@charset "UTF-8";

/*************************
main
SP_layout（980px未満）
*************************/

#LP .salesDynamic {
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	transition: max-height .7s ease, opacity .7s ease;
	width: 100%;
	max-height: 0;
}
#LP .salesDynamic.is_show {
	opacity: 1;
	max-height: fit-content;
	margin: 8% 0;
}

#LP .is_show .salesDynamic__inner {
	background-color: #fff;
	border-radius: 8px;
	color: #252525;
	position: relative;
	padding: 6% 4% 8% 4%;
	width: 100%;
}

#LP .salesDynamic__block:not(:last-of-type) { margin-bottom: 3.5em; }

#LP .salesDynamic__header {
	border-left: 6px solid #dc3545;
	font-size: 4.5vw;
	font-weight: 700;
	line-height: 2;
    margin-bottom: 6%;
    padding-left: .5em;
}

#LP .salesDynamic__slider {
	user-select: none;
	position: relative;
	width: 100%;
	height: 100%;
}
#LP .salesDynamic__slider::after {
	background: linear-gradient(
		to right,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 97%,
		rgba(255, 255, 255, 1) 100%
	);
	content: "";
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

#LP .salesDynamic__list {
	display: flex;
	align-items: flex-start;
}

#LP .salesDynamic__list > li {
	display: block;
	height: auto;
}

#LP .salesDynamic__list > li a {
	color: #252525;
	cursor: grab;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	row-gap: .5em;
	transition: .4s filter;
	width: 100%;
	height: 100%;
}
#LP .salesDynamic__list > li a:hover { filter: opacity(.7) }

#LP .item__image {
	aspect-ratio: 1 / 1;
	border: 3px solid #f1f1f1;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
}

#LP .item__image > img { width: 100%; }

#LP .item__info {
	font-size: 3vw;
	line-height: 1.5;
	text-align: left;
	display: flex;
	flex-flow: column wrap;
	gap: 1.5em;
	width: 100%;
}

#LP .item__name {
	display: flex;
	flex-flow: column wrap;
	gap: 1em;
}

#LP .item__name__shop {
	font-size: 1.2em;
	display: flex;
	align-items: center;
	min-height: calc(2em * 1.5);
}

#LP .item__name__product {
	font-size: .9em;
	min-height: calc(2em * 1.5);
}

#LP .item__price { text-align: right; }

#LP .item__price__block {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	gap: .5em;
}

#LP .item__price__original {
	font-size: 1.2em;
	font-weight: 600;
}

#LP .item__price__original.is_sale {
	font-size: 1em;
	font-weight: 400;
	text-decoration: line-through;
}

#LP .item__price__rate {
	background-color: #dc3545;
	color: #fff;
	font-weight: 600;
	display: inline-block;
	padding: .15em .3em;
}

#LP .item__price__discount {
	color: #dc3545;
	font-size: 1.2em;
	font-weight: 700;
}

/**************************************************
main
PC_layout（980px以上）
**************************************************/

@media screen and (min-width: 980px) {

	#LP .salesDynamic.is_show { margin: 48px 0; }
	#LP .is_show .salesDynamic__inner { padding: 36px 36px 48px 36px; }

	#LP .salesDynamic__header {
		font-size: 24px;
		margin-bottom: 24px;
	}

	#LP .item__info { font-size: 14px; }
}