/* CSS Document */

#main{
	background: #f0f5f7;
	#form{
		@media (min-width: 992px) {
			&:before{
				border-radius: unset;
			}
		}
	}
}

#photo{
	display: grid;
	& hgroup{
		display: grid;
		grid-template-columns: 1fr var(--wrap) 1fr;
		grid-row-gap: 16px;
		&:before{
			content: "";
			grid-column: 1 / 4;
			grid-row: 1;
			background: white;
			margin-bottom: -8px;
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			margin-top: 24px;
			text-align: center;
		}
		& p{
			grid-column: 2;
			grid-row: 2;
			justify-self: center;
			background: linear-gradient(90deg, var(--color-theme) 0.8em, currentColor 0.8em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
		}
	}
	& h2{
		font-weight: 900;
		font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		letter-spacing: 0.15em;
	}
	#text{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		@media (min-width: 768px) {
			text-align: center;
		}
	}
	#tab{
		display: grid;
		justify-content: center;
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		& ul{
			display: flex;
			column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			padding-top: 8px;
		}
		& li{
			display: grid;
			width: min(50%, 300px);
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px;
			background: #9c9c9c;
			border-radius: 16px 16px 0 0;
			color: #fff;
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			text-align: center;
			text-decoration: none;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
			.select &{
				margin-top: -8px;
				background: #303030;
				pointer-events: none;
			}
		}
		@media (max-width: 991.98px) {
			grid-template-columns: var(--wrap);
			& ul{
				justify-content: center;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: min(calc(100% - 80px), var(--wrap-max));
		}
	}
	#message{
		justify-self: center;
		width: min(100%, 1236px);
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		grid-row-gap: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		padding-top: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		background: white;
		#photo:last-child &{
			padding-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
		}
		@media (min-width: 992px) {
			border-radius: 40px 40px 0 0;
		}
	}
}

#list{
	display: grid;
	grid-template-columns: var(--wrap);
	grid-row-gap: clamp(48px, calc(64 / 768 * 100dvw), 64px);
	justify-content: center;
	padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) 0 clamp(96px, calc(120 / 768 * 100dvw), 120px) 0;
	& hgroup{
		display: grid;
		text-align: center;
		text-wrap: balance;
		& h2{
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
		}
	}
	#addition{
		display: grid;
		grid-row-gap: clamp(32px, calc(48 / 768 * 100dvw), 48px);
		& section:not(:has(.add)){
			display: none;
		}
	}
	#none{
	}
	#download{
		display: flex;
		justify-content: center;
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px 24px;
			border: 2px solid currentColor;
			border-radius: 24px;
			color: inherit;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
		}
		& button{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 8px;
			min-height: 48px;
			padding: 8px 24px;
			border: 2px solid currentColor;
			border-radius: 24px;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M1.5,9.5h2.5l-2.5,4h2.5"/><path d="M10,11.5v2"/><path d="M10,9.5h1.25c.69,0,1.25.56,1.25,1.25s-.56,1.25-1.25,1.25h-1.25v-2.5Z"/><path d="M6,9.5h2"/><path d="M6,13.5h2"/><path d="M7,9.5v4"/><path d="M1.5,7.5V1.5c0-.27.11-.52.29-.71.19-.19.44-.29.71-.29h6.5l3.5,3.5v3.5"/><path d="M9,.62v3.38h3.38"/></svg>') no-repeat center / contain;
			}
		}
	}
	@media (max-width: 991.98px) {
		background: white;
	}
	@media (min-width: 992px) {
		position: relative;
		z-index: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: min(100%, 1236px);
			height: 100%;
			background: white;
			border-radius: 40px 40px 0 0;
			z-index: -1;
			transform: translateX(-50%);
		}
	}
}

#guide{
	padding: clamp(48px, calc(64 / 768 * 100dvw), 64px) 0 clamp(96px, calc(120 / 768 * 100dvw), 120px) 0;
	#flow{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		& h2{
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
			text-align: center;
			text-wrap: balance;
		}
		& h2+div{
			display: grid;
			grid-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px) 40px;
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			& dl:nth-child(n+2){
				position: relative;
				&:before{
					content: "";
					position: absolute;
					aspect-ratio: 1;
					background: currentColor;
					transform: translate(-50%, -50%);
				}
			}
			@media (max-width: 991.98px) {
				& dl:before{
					top: calc(0px - clamp(12px, calc(16 / 768 * 100dvw), 16px));
					left: 50%;
					width: 16px;
					-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 4 8 12 16 4 0 4"/></svg>') no-repeat center / contain;
				}
			}
			@media (min-width: 992px) {
				grid-template-columns: repeat(4, 1fr);
				& dl:before{
					top: 50%;
					left: -20px;
					width: 24px;
					-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="4 16 12 8 4 0 4 16"/></svg>') no-repeat center / contain;
				}
			}
		}
		& dl{
			display: grid;
			align-content: start;
			grid-row-gap: 8px;
			padding: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			border: 1px solid #ebebeb;
			border-radius: 4px;
		}
		& dt{
			justify-self: center;
			background: linear-gradient(270deg, var(--color-theme) 0.85em, currentColor 0.85em);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: 600;
			font-size: clamp(20px, calc(24 / 768 * 100dvw), 24px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
			line-height: 1;
		}
		& dd{
			text-align: center;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
	}
	#terms{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		& h2{
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
			text-align: center;
			text-wrap: balance;
		}
		& h2+div{
			margin-top: clamp(16px, calc(24 / 768 * 100dvw), 24px);
		}
		& section{
			counter-increment: count;
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			& h3{
				font-weight: 700;
				font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
				&:before{
					content: counter(count)".";
					margin-right: 0.25em;
				}
			}
			& h3+div{
				margin-top: 8px;
			}
			& ol{
				counter-reset: count;
				display: grid;
				grid-template-columns: auto 1fr;
				column-gap: 0.25em;
				& li{
					counter-increment: count;
					display: grid;
					grid-template-columns: subgrid;
					grid-column: span 2;
					&:before{
						content: "("counter(count)")";
						justify-self: center;
					}
				}
			}
		}
		& address{
			margin-top: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			& h3{
				font-weight: 700;
				font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
			}
			& h3+div{
				margin-top: 8px;
				font-weight: 700;
			}
		}
	}
	@media (max-width: 991.98px) {
		background: white;
	}
	@media (min-width: 992px) {
		position: relative;
		z-index: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: min(100%, 1236px);
			height: 100%;
			background: white;
			border-radius: 40px 40px 0 0;
			z-index: -1;
			transform: translateX(-50%);
		}
	}
	#terms{
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		border-top: 1px solid currentColor;
	}
}

#detail{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) 0 clamp(96px, calc(120 / 768 * 100dvw), 120px) 0;
	& h2{
		display: grid;
		grid-row-gap: 8px;
		font-weight: 900;
		font-size: clamp(20px, calc(40 / 768 * 100dvw), 40px);
		letter-spacing: 0.025em;
		&:after{
			content: "";
			border-bottom: 1px solid currentColor;
		}
	}
	#text{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
	#photo{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& img{
			width: 100%;
			height: auto;
		}
	}
	#status{
		margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		& dl{
			display: grid;
		}
		& dt,
		& dd{
			padding: 0 16px;
			border: 0 solid #ebebeb;
		}
		& dt{
			font-weight: 700;
		}
		& dd{
			font-weight: 600;
			& ul{
				display: grid;
				grid-row-gap: 8px;
			}
		}
		@media (max-width: 767.98px) {
			& dd+dt{
				margin-top: 16px;
				padding-top: 16px;
				border-top-width: 1px;
			}
			& dd{
				margin-top: 8px;
			}
		}
		@media (min-width: 768px) {
			& dl{
				grid-template-columns: auto 1fr;
			}
			& dt,
			& dd{
				&:nth-of-type(n+2){
					border-top-width: 1px;
					margin-top: 16px;
					padding-top: 16px;
				}
			}
		}
	}
	#cart{
		margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		& ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			grid-gap: 16px 24px;
		}
		& li{
			display: contents;
		}
		& a{
			color: inherit;
		}
		& button,
		& a{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			column-gap: 8px;
			min-height: 48px;
			padding: 8px 24px;
			border: 2px solid currentColor;
			border-radius: 24px;
			font-weight: 800;
			font-size: 14px;
			letter-spacing: 0.1em;
			text-align: center;
			text-decoration: none;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M1,3c.28,0,.5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5Z"/><path d="M4.5,2.5h9"/><path d="M1,7.5c.28,0,.5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5Z"/><path d="M4.5,7h9"/><path d="M1,12c.28,0,.5-.22.5-.5s-.22-.5-.5-.5-.5.22-.5.5.22.5.5.5Z"/><path d="M4.5,11.5h9"/></svg>') no-repeat center / contain;
			}
		}
		& button{
			&:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M12.86,6.79l-5.88,5.93c-.23.23-.5.42-.8.54-.3.13-.62.19-.95.19s-.65-.06-.95-.19c-.3-.13-.57-.31-.8-.54l-1.76-1.79c-.46-.47-.72-1.1-.72-1.75s.26-1.29.72-1.75L7.99,1.13c.18-.19.4-.33.64-.43.24-.1.5-.15.76-.15s.52.05.76.15c.24.1.46.25.64.43l.7.7c.19.18.33.4.43.64.1.24.15.5.15.76s-.05.52-.15.76c-.1.24-.25.46-.43.64l-5.55,5.57c-.09.09-.2.17-.32.22-.12.05-.25.08-.38.08s-.26-.03-.38-.08c-.12-.05-.23-.12-.32-.22l-.35-.36c-.09-.09-.17-.2-.22-.32-.05-.12-.08-.25-.08-.38s.03-.26.08-.38c.05-.12.12-.23.22-.32l3.73-3.7"/></svg>');
			}
			&.add{
				color: var(--color-theme);
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M.5,8.55l2.73,3.51c.09.12.21.22.35.28.14.07.28.1.43.11.15,0,.3-.03.43-.09.13-.06.25-.15.35-.27L13.5,1.55"/></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 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M13.5.5L.5,13.5"/><path d="M.5.5l13,13"/></svg>');
				}
			}
			&.limit{
				background: silver;
				border-color: transparent;
				color: gray;
			}
		}
	}
	@media (max-width: 991.98px) {
		background: white;
		#photo{
			grid-column: 1;
			grid-row: 2;
		}
		#status{
			grid-column: 1;
			grid-row: 3;
		}
	}
	@media (min-width: 992px) {
		position: relative;
		z-index: 0;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 50%;
			width: min(100%, 1236px);
			height: 100%;
			background: white;
			border-radius: 40px 40px 0 0;
			z-index: -1;
			transform: translateX(-50%);
		}
		#photo,
		#status{
			grid-column: 1;
			grid-row: 2;
			align-self: start;
		}
		#photo{
			width: 40%;
		}
		#status{
			justify-self: end;
			width: calc(60% - clamp(24px, calc(40 / 768 * 100dvw), 40px));
		}
	}
}


.photoList{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 272px), 1fr));
	grid-gap: 40px 16px;
	& section{
		position: relative;
		display: grid;
		grid-template-columns: calc(100% - 16px);
		justify-content: center;
		grid-row-gap: 8px;
		align-content: start;
		&:not(:has(figure)):before{
			content: "";
			background: var(--dummy);
			border-radius: 4px;
		}
		&:before,
		& ul,
		& figure img{
			aspect-ratio: 1;
		}
		&:before,
		& ul,
		& a[data-fav-id],
		& figure{
			grid-column: 1;
			grid-row: 1;
			margin-inline: -8px;
		}
		& ul{
			place-content: end;
			padding: 48px 8px 8px 8px;
			overflow: hidden;
			z-index: 1;
		}
		& button{
			justify-self: center;
			z-index: 2;
		}
		& a{
			z-index: 1;
		}
	}
	& h3{
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	& h3+div{
		display: contents;
		grid-row-gap: inherit;
	}
	& p{
		font-weight: 600;
		font-size: 14px;
		letter-spacing: 0.025em;
	}
	& ul{
		display: flex;
		flex-wrap: wrap;
		grid-gap: 8px;
	}
	& li{
		display: grid;
		align-items: center;
		min-height: 20px;
		padding: 0 0.75em;
		background: silver;
		border-radius: 10px;
		font-weight: 700;
		font-size: clamp(10px, calc(12 / 768 * 100dvw), 12px);
		letter-spacing: 0.2em;
		text-align: center;
		&[data-area]{
			color: #fff;
		}
		&[data-area="1"]{
			background: #c1c42f;
		}
		&[data-area="2"]{
			background: #67afe1;
		}
		&[data-area="3"]{
			background: #81c2c2;
		}
		&[data-area="4"]{
			background: #555ea9;
		}
		&[data-area="5"]{
			background: #b078b0;
		}
		&[data-area="6"]{
			background: #e57897;
		}
		&[data-area="7"]{
			background: #ca7b5e;
		}
	}
	& button{
		&[data-photo-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: 40px;
			padding: 8px 16px;
			border: 2px solid currentColor;
			border-radius: 20px;
			font-weight: 800;
			font-size: 14px;
			text-align: center;
			text-decoration: none;
			z-index: 2;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M12.86,6.79l-5.88,5.93c-.23.23-.5.42-.8.54-.3.13-.62.19-.95.19s-.65-.06-.95-.19c-.3-.13-.57-.31-.8-.54l-1.76-1.79c-.46-.47-.72-1.1-.72-1.75s.26-1.29.72-1.75L7.99,1.13c.18-.19.4-.33.64-.43.24-.1.5-.15.76-.15s.52.05.76.15c.24.1.46.25.64.43l.7.7c.19.18.33.4.43.64.1.24.15.5.15.76s-.05.52-.15.76c-.1.24-.25.46-.43.64l-5.55,5.57c-.09.09-.2.17-.32.22-.12.05-.25.08-.38.08s-.26-.03-.38-.08c-.12-.05-.23-.12-.32-.22l-.35-.36c-.09-.09-.17-.2-.22-.32-.05-.12-.08-.25-.08-.38s.03-.26.08-.38c.05-.12.12-.23.22-.32l3.73-3.7"/></svg>') no-repeat center / contain;
			}
			&.add{
				color: var(--color-theme);
				&:before{
					-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M.5,8.55l2.73,3.51c.09.12.21.22.35.28.14.07.28.1.43.11.15,0,.3-.03.43-.09.13-.06.25-.15.35-.27L13.5,1.55"/></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 14 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><path d="M13.5.5L.5,13.5"/><path d="M.5.5l13,13"/></svg>');
				}
			}
			&.limit{
				background: silver;
				border-color: transparent;
				color: gray;
			}
		}
	}
	& a{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		font-size: 0;
	}
	& figure{
		& img{
			object-fit: contain;
			background: snow;
			border-radius: 4px;
		}
	}
}