.product-personalize {
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	display: grid;
	align-items: center;
	gap: 10px;
	font-feature-settings: "palt";
	font-variant-east-asian: proportional-width;
	font-size: 14px;
	margin-block: 2em;
	padding: 10px;
	@media (min-width: 769px) {
		padding: 20px;
	}
	* {
		margin: 0;
	}
	fieldset {
		border: initial;
		margin: initial;
		padding: 0;
	}
	small {
		font-size: 0.8em;
		line-height: 1.3;
	}
	:is(select, .select, input[type="text"]) {
		font-size: 1em !important;
		height: 45px;
		width: 100%;
	}
	:is(select, .select) {
		background: var(--urlIcoSelect) no-repeat right 10px center / 11px;
		border: 1px solid currentColor;
		cursor: pointer;
		padding: 8px 10px;
		padding-right: 28px;
		&.disabled {
			background-color: #f0f0f0;
			border: 1px solid #ccc;
			pointer-events: none;
		}
	}
	input[type="text"] {
		border-color: currentColor !important;
	}
	fieldset {
		display: grid;
		align-items: center;
		gap: 10px;
		@media (min-width: 1000px) {
			grid-template-columns: repeat(2, 1fr);
			:is(p, [name="properties[ワンポイント刺繍]"], .select) {
				grid-column: 1 / -1;
			}
		}
		p:has(small) {
			margin-right: auto;
		}
	}
	label {
		cursor: pointer;
		display: flex;
		align-items: center;
		font-size: 14px !important;
		letter-spacing: initial !important;
	}
	.patterns {
		background: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		height: calc(100dvh - 40px);
		list-style: none;
		margin: auto;
		overflow: auto;
		position: fixed;
		inset: 0;
		width: calc(100dvw - 40px);
		z-index: 999;
		@media (min-width: 769px) {
			max-height: 50dvh;
			max-width: 50dvw;
		}
		li {
			&:not(:has(img)) {
				grid-column: 1 / -1;
			}
		}
		:is(h3, label) {
			display: flex;
			align-items: center;
			gap: 10px;
		}
		h3 {
			padding: 10px 8px;
			button {
				margin-left: auto;
			}
		}
		label {
			padding: 8px;
			&:hover,
			&:has(:checked) {
				background: #f9f9f9;
			}
			&:has(:checked) {
				&:after {
					aspect-ratio: 1;
					background: currentColor;
					content: "";
					height: 20px;
					margin-left: auto;
					mask: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m10.5%2013.4l4.9-4.9q.275-.275.7-.275t.7.275q.275.275.275.7t-.275.7l-5.6%205.6q-.3.3-.7.3t-.7-.3l-2.6-2.6q-.275-.275-.275-.7t.275-.7q.275-.275.7-.275t.7.275l1.9%201.9Z%22%2F%3E%3C%2Fsvg%3E")
						no-repeat;
				}
			}
		}
	}
}

.page-content.has_naire {
	opacity: 0.4;
	position: relative;
	transition: 0.3s ease;
	* {
		pointer-events: none;
	}
	&.loaded {
		opacity: 1;
		* {
			pointer-events: initial;
		}
	}
}