/* CSS Document */

main{
	display: grid;
	margin-inline: auto;
	margin-bottom: clamp(64px, calc(128 / 1200 * 100vw), 128px);
}

#detail{
	justify-self: center;
	display: grid;
	grid-gap: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(32px, calc(64 / 1200 * 100vw), 64px);
	width: var(--wrap);
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	@media (min-width: 576px) {
		grid-template-columns: repeat(2, 1fr);
		
		& h2{
			grid-column: 1 / 3;
		}
	}
	& h2{
		color: var(--color-theme);
		font: 700 clamp(40px, calc(49 / 768 * 100vw), 49px) var(--font-min);
	}
	#detailPhoto{
		grid-row: 2;
	}
}

#detailStatus{
	& dl{
		display: grid;
		border: 1px solid #707070;
		@media (min-width: 576px) {
			grid-template-columns: auto 1fr;
			border-left-width: 0;
			& dt,
			& dd{
				&:nth-of-type(n+2){
					border-top: 1px solid #707070;
				}
			}
		}
	}
	& dt{
		display: grid;
		align-items: center;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
		background: #8D968D;
		color: #243124;
		font: 700 clamp(16px, calc(18 / 768 * 100vw), 18px) 'eb-garamond', var(--font-min);
		@media (min-width: 576px) {
			width: clamp(200px, calc(280 / 768 * 100vw), 280px);
		}
	}
	& dd{
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) clamp(24px, calc(32 / 1200 * 100vw), 32px);
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.06em;
	}
}

#terms{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1040px);
	justify-content: center;
	margin-top: clamp(40px, calc(104 / 1200 * 100vw), 104px);
	padding: clamp(32px, calc(72 / 1200 * 100vw), 72px) 0;
	background: #E4EDE4;
	& h2{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		color: #2A4029;
		font: 700 clamp(20px, calc(30 / 768 * 100vw), 30px) 'eb-garamond', var(--font-min);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(20px, calc(30 / 768 * 100vw), 30px);
			background: currentColor;
			transform: translateY(calc(0.825em - 50%));
			-webkit-mask: var(--logoMark) no-repeat center / contain;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
	& section{
		display: grid;
		grid-gap: 16px;
		}
	& h3{
		margin-top: clamp(8px, calc(32 / 1200 * 100vw), 32px);
		font-size: 26px;
		font-weight: 600;
		font-style: italic;
		letter-spacing: 0.06em;
	}
	& ul{
		display: grid;
		grid-gap: 0.25em;
		& li{
			padding-left: 1em;
			text-indent: -1em;
			&:before{
				content: "・";
			}
		}
	}
	& ol{
		counter-reset: count;
		display: grid;
		grid-gap: 0.25em;
		& li{
			position: relative;
			padding-left: 1.5em;
			&:before{
				counter-increment: count;
				content: counter(count)".";
				position: absolute;
				left: 0;
			}
		}
	}
}

#download{
	display: grid;
	grid-template-columns: min(var(--wrap-fit), 1040px);
	justify-content: center;
	grid-row-gap: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	margin-top: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	& form{
		justify-self: center;
	}
	& label{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto auto;
		grid-gap: 8px;
		align-items: center;
		justify-content: center;
		padding: 8px 16px;
		font-weight: 600;
		font-size: 18px;
		& input{
			transform: none;
		}
	}
	& p{
		justify-self: center;
		&.none{
			display: none;
		}
	}
}

#downloadCart{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		min-height: 56px;
		padding: 8px clamp(24px, calc(32 / 768 * 100vw), 32px);
		border: 1px solid #41583F;
		border-radius: 28px;
		color: inheritv;
		font-size: 24px;
		letter-spacing: 0.06em;
		text-decoration: none;
		&#cart{
			&.none{
				display: none;
			}
			&.err{
				opacity: 0.5;
				pointer-events: none;
			}
			&.has{
				background: var(--color-theme);
				color: #fff;
				pointer-events: none;
			}
		}
		&#delete{
			background: #b1b6b7;
			&.none{
				display: none;
			}
		}
	}
}

#downloadLinks{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	&:not(:has(a)){
		display: none;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		justify-content: center;
		align-items: center; 
		column-gap: 8px;
		min-width: min(100%, 186px);
		min-height: 48px;
		padding: 8px 24px;
		border: 1px solid #41583F;
		border-radius: 24px;
		color: inherit;
		font: 600 18px var(--font-min);
		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: black;"><polyline points="0 8 14.5 8 9.5 5"/></svg>') no-repeat center / contain;
		}
		&#links:after{
			-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;"><polyline points="0.5 15.5 15.5 0.5" /><polyline points="0.5 0.5 15.5 0.5 15.5 15.5" /></svg>');
		}
		&#eiheiji:after{
			-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;"><polyline points="0.5 8 0.5 15.5 15.5 15.5 15.5 8" /><polyline points="8 0 8 10.5 11.5 5.5"/></svg>');
		}
	}
}