@charset "utf-8";

@media screen and (max-width: 768px) {
	:root {
		--Shoplist_Div_gap: 0;
		--Shoplist_Div_width: 100%;
		--Shoplist_Div_A_flex-basis: calc( calc( 100% - var(--Gap_M) ) / 2 );
	}
}

@media screen and (min-width:769px) {
	:root {
		--Shoplist_Div_gap: var(--Margin_S);
		--Shoplist_Div_size: 280px;
		--Shoplist_Div_width: calc( calc( var(--Shoplist_Div_size) + var(--Shoplist_Div_gap) ) * 3 );
		--Shoplist_Div_A_flex-basis: var(--Shoplist_Div_size);
	}
}

#nolen {
	& div {
		background: url('../common/img/shoplist/noren_title.png');
		background-size: contain;
		background-repeat: no-repeat;
		aspect-ratio: 300 / 101;
		& span {
		}
	}
}

#shoplist {
	display: flex;
	justify-content: center;
	margin: var(--Margin_S) 0 0;
	& div {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--Shoplist_Div_gap);
		width: var(--Shoplist_Div_width);
		& a {
			flex-basis: var(--Shoplist_Div_A_flex-basis);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: var(--Gap_M);
			aspect-ratio: 1 / 1;
			& img {
				scale: 0.9;
				transition: var(--Transition);
				-o-transition: var(--Transition);
				-moz-transition: var(--Transition);
				-webkit-transition: var(--Transition);
			}
		}
		& a:nth-of-type(5) {
			& img {
				width: 80%;
			}
		}
		& a:nth-of-type(6) {
			& img {
				width: 80%;
			}
		}
		& a:hover {
			& img {
				scale: 1;
				opacity: .7;
			}
		}
	}
}