/* CSS Document */

#main{
	margin-bottom: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
}

#photo{
	display: grid;
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 24px 0;
		background: var(--color-theme-sub);
		color: #fff;
		font-weight: 700;
		font-size: clamp(28px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.05em;
		text-align: center;
	}
	& h2+div{
		justify-self: center;
		width: var(--wrap);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		font-weight: 500;
	}
	& h2+div+div{
		justify-self: center;
		display: flex;
		justify-content: center;
		width: var(--wrap);
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		& a{
			display: grid;
			align-items: center;
			min-width: min(100%, 320px);
			min-height: 48px;
			padding: 0.25em 1em;
			background: var(--color-theme);
			border-radius: 24px;
			color: inherit;
			font-weight: 700;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
		}
	}
}

#tab{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
	&:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 2px solid currentColor;
	}
	& 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);
		}
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		min-height: 64px;
		padding: 0.25em 1em;
		background: var(--color);
		border: solid var(--color);
		border-width: 2px 2px 0 2px;
		border-radius: 16px 16px 0 0;
		color: #fff;
		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: "";
			aspect-ratio: 1;
			height: 8px;
			background: var(--color-theme-sub);
			border-radius: 4px;
		}
		.select &{
			background: #fff;
			color: var(--color);
			pointer-events: none;
		}
	}
}

#terms{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& h2{
		display: none;
	}
	& section{
		margin-top: clamp(48px, calc(64 / 1200 * 100dvw), 64px);
	}
	& h3{
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
	}
	& p{
		margin-top: 1em;
	}
	& ol{
		margin-top: 1em;
		& li{
			padding-left: 2.5em;
			text-indent: -2.5em;
		}
	}
}

#flow{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
	overflow: hidden;
	& h2{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		padding-bottom: 16px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			border: 5px solid var(--color-theme-sub);
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	& h2+div{
		margin-top: clamp(24px, calc(40 / 1200 * 100dvw), 40px);
	}
}

#recommend{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(128 / 1200 * 100dvw), 128px);
	overflow: hidden;
	& h2{
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.25em;
		padding-bottom: 16px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(28 / 768 * 100dvw), 28px);
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 18px;
			border: 5px solid var(--color-theme-sub);
			border-radius: 100%;
			transform: translateY(calc(0.875em - 50%));
		}
		&:after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100dvw;
			border-bottom: 1px dashed currentColor;
		}
	}
	& h2+div{
		display: grid;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 20px;
		}
	}
	& 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: 16px;
		}
	}
	& h3{
		font-weight: 700;
	}
	& h3+div{
		display: contents;
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 16px;
		}
	}
	.slide{
		display: grid;
		&:not(.slick-initialized){
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 24px), 248px), 1fr));
			grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
		}
	}
	.slick-slider{
		grid-template-columns: auto 1fr auto;
		align-items: center;
		@media (min-width: 1200px) {
			grid-template-columns: 0 1fr 0;
			.slick-list{
				margin: 0 calc(0px - clamp(4px, calc(10 / 1200 * 100dvw), 10px));
			}
		}
		&:before{
			content: "";
			grid-column: 2;
			grid-row: 1;
			aspect-ratio: 1 / 0.75;
			width: calc(100% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			margin: 0 clamp(4px, calc(10 / 1200 * 100dvw), 10px);
			visibility: hidden;
		}
		@media (min-width: 576px) {
			&:before{
				width: calc(50% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 992px) {
			&:before{
				width: calc(33.33% - clamp(8px, calc(20 / 1200 * 100dvw), 20px));
			}
		}
		@media (min-width: 1200px) {
			&:before{
				width: calc((100% - (clamp(8px, calc(20 / 1200 * 100dvw), 20px) * 3)) / 4);
			}
		}
	}
	.slick-list{
		grid-column: 2;
		grid-row: 1 / 3;
		@media (max-width: 1199.98px) {
			overflow: visible;
		}
	}
	.slick-slide{
		margin: 0 clamp(4px, calc(10 / 1200 * 100dvw), 10px);
	}
	.slick-arrow{
		justify-self: center;
	}
}

#cart{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	& hgroup{
		& h2{
			font-weight: 700;
			font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
			text-align: center;
		}
		& p{
			font-weight: 500;
			text-align: center;
		}
	}
	#list{
		margin-top: clamp(32px, calc(64 / 1200 * 100dvw), 64px);
	}
	&: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: 1fr auto;
		align-items: center;
		min-width: min(100%, 320px);
		min-height: 48px;
		padding: 0.25em 1em;
		background: var(--color-theme);
		border-radius: 24px;
		color: inherit;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
	}
}

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

.photoList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 216px), 1fr));
	grid-gap: 40px 16px;
	& 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: 700;
	}
	& h3+div{
		display: contents;
		& ul{
			display: flex;
			flex-wrap: wrap;
			grid-gap: 8px;
		}
		& li{
			display: grid;
			align-items: center;
			min-height: 32px;
			padding: 0 1em;
			border-radius: 16px;
			border: 2px solid currentColor;
			font-weight: 700;
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
			letter-spacing: 0.05em;
			&[data-area="1"] {
				background: #d1955e;
			}
			&[data-area="2"] {
				background: #8bd17d;
			}
			&[data-area="3"] {
				background: #78b7db;
			}
			&[data-area="4"] {
				background: #c2d767;
			}
			&[data-area="5"] {
				background: #9999d4;
			}
		}
		& 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;
				align-items: center;
				min-height: 40px;
				margin-top: 8px;
				padding: 0.25em 1em;
				border: 1px solid #ccc;
				border-radius: 8px;
				color: inherit;
				font-weight: 700;
				font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
				text-align: center;
				text-decoration: none;
				z-index: 1;
				&.deleteCart{
					background: #ccc;
					border-color: transparent;
				}
				&.limit{
					pointer-events: none;
				}
			}
		}
	}
	& figure{
		order: -1;
		& img{
			aspect-ratio: 1 / 0.75;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 10px;
		}
	}
}

.slick-arrow{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	aspect-ratio: 1;
	width: clamp(40px, calc(56 / 1200 * 100dvw), 56px);
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 100%;
	font-size: 0;
	z-index: 1;
	&:hover{
		background: var(--color);
		&:before{
			color: #fff;
		}
	}
	&:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		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: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><polyline points="5 2 11 8 5 14"/></svg>') no-repeat center / 16px;
	}
	&.slick-prev:before{
		transform: scale(-1, 1);
	}
}