:root {
    --cl-selected-label: #856624;
    --cl-selected-light: #ffe0e0;
    --cl-selected-itemquant: #afa89c;
    --cl-selected-image-border: #655b55;
    --cl-selected-image-label: #8c7a6b;
    --cl-selected-image-itemquant: #bfbdb6;

		--font-number: "Maven Pro", serif;;
		--font-accent:  "Krona One", serif;
}

.container {
	main {
	}
	main #steps {
		position: relative;
		z-index: 0;
	}
	main #steps .step-cell {
		transition: all 0.3s;
	}

	[data-isselectedcat="1"] [data-classid="category"] {
		background-image: url(/share/im/prl_ring.png);
			background-position: center 22vh;
			background-size: 3em auto;
			visibility: hidden;
	}

	/*step init*/
	main #steps .step-cell {
	}
	main #steps .step-cell[data-stepdir="prev"] {
	}
	main #steps .step-cell[data-stepdir="current"] {
	}
	main #steps .step-cell[data-stepdir="next"] {
	}
	main #steps .step-cell[data-selected=""] {
		display: none;
	}
	main[data-stat="loading"] #steps .step-cell[data-selected=""] {
		
	}

	/*step motion*/
	main #steps .step-cell[data-stepdir="next"][data-selected=""] {
	}
	main #steps .step-cell[data-stepdir="prev"][data-selected=""] {
	}
	main.activation-step .step-cell[data-stepdir="current"] {
	}
	main #steps .step-cell[data-selected="1"] {
	}

	/**/
	#steps .step-cell[data-classid="item"] > * {
	}
	main #steps .step-cell[data-classid="item"]::before {
		display: none;
	}

	.step-content {
		position: relative;
		z-index: 0;
	}

	/**/
	.step-cell .step-num {
		color: #d3d2cf;
		font-family: var(--font-accent);
		font-size: 15px;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-align: center;
		text-transform: uppercase;
	}
	.step-cell .step-title {
		font-size: 17px;
		letter-spacing: 0.08em;
		margin-top: 10px;
		margin-bottom: 35px;
		text-align: center;
	}

	/**/
	.select-pan {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		column-gap: 10px;
		row-gap: 30px;
		margin: 0;
	}
	.select-pan li {
		display: block;
		position: relative;
		z-index: 0;
		width: calc(50% - 12px / 2);
		padding: 0;
		text-align: center;
	}
	[data-classid="category"] .select-pan li {
		width: 50%;
		max-width: 360px;
	}
	[data-classid="series_gd"] .select-pan li {
		width: 25%;
			font-size: 0.8em;
	}
	.select-pan[data-quant="1"] li {
		width: 100%;
	}
	.select-pan li[data-disabled="true"] {
		opacity: 0.4;
	}
	.select-pan li a {
		display: block;
		position: relative;
		z-index: 0;
		color: inherit;
		background-color: #ffffff;
		border-radius: 38px;
		text-align: center;
		text-decoration: none !important;
		height: 100%;
		padding: 45px 8px 15px;
		padding: 12.5vw 8px 10px;
		border: 3px solid #fff;
	}
		.select-pan li[data-selected="true"] a {
			background-color: #e5e4e1;
			border: 3px solid #bfbdb6;
		}
		.select-pan li a .title {
			font-size: 10px;
			letter-spacing: 0.02em;
			margin-top: 0;
			margin-bottom: 0.25em;
		}
		.select-pan li a .label {
			font-size: 13.5px;
			margin: 0;
		}


		.select-pan li[data-selected="true"] a .title,
		.select-pan li[data-selected="true"] a .label {
			color: #81817F;
		}
		.select-pan li[data-disabled="true"] a {
			background-color: #f0efed;
			pointer-events: none;
		}





	.select-pan li.non-select a {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 8px 6px;
	}
	.select-pan li.non-select[data-selected="true"] a {
		background-color: #E5E4E1;
		border-color: #BFBDB6;
		border: 3px solid #BFBDB6;
	}
		.select-pan li.non-select[data-selected="true"] a .label {
			color: rgba(63,63,61,0.6);
		}

	/*item-quant*/
	.select-pan li .item-quant {
		background-color: #7c7976;
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		right: 0;
		top: 0;
		width: 27px;
		height: 27px;
		color: rgba(255, 255, 255, 1);
		font-size: 11px;
		font-family: var(--font-number);
		font-weight: 500;
		letter-spacing: 0.02em;
		line-height: 1.0;
		text-align: center;
		border-radius: 100px;
		transform: translate(25%, -35%);
		z-index: 5;
	}
	.select-pan li[data-selected="true"] .item-quant {
		background-color: var(--cl-selected-itemquant);
	}
	.select-pan li.non-select .item-quant {
	}

	/**/
	.select-pan li figure {
		position: absolute;
		left: 50%;
		top: 0;
		aspect-ratio: 216 / 143;
		transform: translate(-50%,-50%);
		z-index: 0;
	}
	.select-pan li figure img {
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: contain;
		object-position: center;
		transition: all 0.3s;
		z-index: 0;
	}

	/**/
	.select-pan li[data-listtype="icn"] {
	}
	.select-pan li[data-listtype="icn"] .item-quant {
	}
	.select-pan li[data-listtype="icn"][data-selected="true"] figure {
		border-color: var(--cl-selected-image-border);
	}
	.select-pan li[data-listtype="icn"][data-selected="true"] a::before {
		content: "";
		display: none;
	}
	.select-pan li[data-listtype="image"][data-selected="true"] .item-quant,
	.select-pan li[data-listtype="icn"][data-selected="true"] .item-quant {
		background-color: var(--cl-selected-image-itemquant);
	}

	/* 該当商品ゼロの場合 */
	.select-pan li[data-listtype="image"][data-disabled="true"],
	.select-pan li[data-listtype="icn"][data-disabled="true"] {
		opacity: 0.5;
	}
	.select-pan li[data-listtype="image"][data-disabled="true"] a,
	.select-pan li[data-listtype="icn"][data-disabled="true"] a {
		background-color: #ffffff;
	}

	/**/
	.select-pan li[data-listtype="color"] {
		width: 33.33%;
	}
	.select-pan li[data-listtype="color"] a {
		display: block;
		text-align: center;
		padding: 0 0.8em;
		border: none;
	}
	.select-pan li[data-listtype="color"] a .label {
		margin-top: 0.6em;
		white-space: nowrap;
	}
	.select-pan li[data-listtype="color"] a mark {
		display: block;
		width: 100%;
		border-radius: 100%;
		border: solid 4px #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
	}
		.select-pan li[data-listtype="color"] a mark::before {
			content: "";
			display: block;
			padding-top: 100%;
		}
	.select-pan li[data-listtype="color"] .item-quant {
		top: 4%;
		right: 8%;
		color: #a3a3a3;
		background-color: #ffffff;
		border-color: #fff;
		border-width: 2px;
	}
	.select-pan li[data-listtype="color"][data-disabled="true"] a {
		background-color: transparent;
	}
	.select-pan li[data-listtype="color"][data-selected="true"] a .label {
		color: #939393;
	}
	.select-pan li[data-listtype="color"][data-selected="true"] a::before {
		content: "";
		display: none;
	}
	.select-pan li[data-listtype="color"][data-selected="true"] a mark {
		border-color: rgba(0, 0, 0, 0.34);
	}
	.select-pan li[data-listtype="color"][data-disabled="true"]  {
		background-color: transparent;
	}
	.select-pan li[data-listtype="color"][data-disabled="true"] a mark {
		border-color: rgba(255, 255, 255, 0);
		opacity: 0.5;
	}
	.select-pan li[data-listtype="color"][data-selected="true"] .item-quant {
		color: #555555;
		background-color: #fff;
	}

	/* 4column */
	.select-pan[data-quant="3"] li {
		width: calc((100% - 40px - 12px) / 2);
	}
	.select-pan[data-quant="3"] li a {
		padding-top: 35%;
	}
	.select-pan[data-quant="3"] li.non-select a {
		padding-top: 8px;
	}
	.select-pan[data-quant="3"] li figure {
		width: calc(216 / 256 * 100% + 3px * 2);
	}

	/* 5column */
	.select-pan[data-quant="4"] li {
		width: calc((100% - 12px * 2) / 3);
	}
	.select-pan[data-quant="4"] li a {
		padding-top: 42%;
	}
	.select-pan[data-quant="4"] li.non-select a {
		padding-top: 8px;
	}
	.select-pan[data-quant="4"] li figure {
		width: calc(100% + 3px * 2);
	}
}