@charset "UTF-8";

/*************************
main
SP_layout（980px未満）
*************************/

#LP .recommendWrapper {
	background-color: transparent;
	font-size: 2vw;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column wrap;
	gap: 1em;
	position: relative;
	overflow: hidden;
	transition: background .4s ease, height .4s;
	padding: 20vh 0;
	width: 100%;
	height: auto;
}

#LP .recommendWrapper::before {
	animation: loader-animation 1s ease-out infinite;
	border: 4px solid #ddd;
	border-top-color: #dc3545;
	border-radius: 50%;
	content: "";
	display: block;
	width: 2em;
	height: 2em;
}
#LP .recommendWrapper::after { content: "ショップ情報を取得中…"; }

#LP .recommendWrapper::before,
#LP .recommendWrapper::after { display: block; }

#LP .recommendWrapper:not(:last-of-type) { margin-bottom: 3em; }

#LP .recommendWrapper.is_show { padding: 0; }

#LP .recommendWrapper.is_show::before,
#LP .recommendWrapper.is_show::after { display: none; }

@keyframes loader-animation {
	from { transform: rotate(0turn); }
	to { transform: rotate(1turn); }
}

#LP .recommendWrapper a:hover { filter: none; }

#LP .recommendShops {
	position: relative;
	transition: .4s height, opacity .4s;
	opacity: 0;
	height: 0;
}

#LP .is_show .recommendShops {
	color: #252525;
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	gap: 1em;
	opacity: 1;
	padding: 0;
	width: 100%;
	height: auto;
}

#LP .is_show .recommendShops::after { display: none; }

#LP .is_show .recommendShops:empty::before { content: "該当のショップがありませんでした。" }

#LP .is_show .recommendShops > li {
	background-color: #fff;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	transition: .4s filter;
	position: relative;
	width: calc((100% - 1em * 2) / 3);
}
#LP .is_show .recommendShops > li:hover { filter: brightness(.9); }

#LP .is_show .recommendShops > li a {
	border: 3px solid #eee;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 2em;
	width: 100%;
	height: 100%;
}
#LP .is_show .recommendShops > li a img { width: 60%; }

#LP .shop__label {
	line-height: 1.5;
	text-align: center;
	position: absolute;
	left: 0;
	pointer-events: none;
	width: 100%;
}
#LP .shop__label:empty { display: none; }

#LP .shop__label.top {
	background-color: #dc3545;
	color: #fff;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: -.05em;
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	min-height: calc(1em + (1.25em / 2));
}
#LP .shop__label.top.smaller > .textBlock { font-size: .8em; }

#LP .shop__label.bottom {
	color: #064ead;
	font-size: .9em;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: .5em;
	bottom: .75em;
	padding: 0 .75em;
}

#LP .shop__groupDiscount,
#LP .shop__freeShipping {
	background-color: #dbeafe;
	box-shadow: 0 0 1px rgba(25, 25, 25, .4);
	border-radius: 100px;
	display: inline-flex;
	padding: .1em 1em;
}

/**************************************************
main
PC_layout（980px以上）
**************************************************/

@media screen and (min-width: 980px) {
	#LP .recommendWrapper { font-size: 10px; }

	#LP .is_show .recommendShops > li { width: calc((100% - 1em * 4) / 5); }

	#LP .shop__label.top { font-size: 1.5em; }
	#LP .shop__label.top.smaller > .textBlock { font-size: .7em; }

	#LP .shop__label.bottom { font-size: 1.1em; }
}