@charset "UTF-8";

/* ================================================================================
KV
================================================================================ */
@media print, screen
{

#KV{	padding: 0;	}
#KV > .inner
{
	max-width: unset;
	padding: 0;
}
#KV .swiper{	overflow: visible;	}
#KV .swiper-slide{	width: calc(1200 * var(--u));	aspect-ratio: 1200/400;	}
#KV .swiper-slide > a,
#KV .swiper-slide > a picture
{
	display: block;
	width: 100%;	height: 100%;
}

#KV .swiper .controll
{
	--C1: var(--Ctheme1);

	z-index: 100;
	position: absolute;
	top: 0;	left: 0;
	width: 100%;	height: 100%;

	pointer-events: none;
}
#KV .swiper .controll > .inner
{
	display: flex;	justify-content: space-between;	align-items: center;
	width: 100%;	height: 100%;
	max-width: calc(var(--pageW) + 50 * 2 * var(--v) + 4 * var(--pageP));

	padding: 0 var(--pageP);
	margin: 0 auto;
	/* background: rgb(255,255,0,0.2); */
}


#KV .swiper .prev,
#KV .swiper .next
{
	container-type: inline-size;
	display: flex;	justify-content: center;	align-items: center;
	width: calc(50 * var(--v));	aspect-ratio: 1;

	background: white;
	border-radius: calc(4 * var(--v));
	box-shadow: var(--shadow0);

	cursor: pointer;
	pointer-events: auto;
}
#KV .swiper .prev svg,
#KV .swiper .next svg
{
	display: block;
	width: 50cqw;	aspect-ratio: 500/430;

}

#KV .pagination
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(10 * var(--v));
	width: 100%;
	max-width: var(--pageW);
	margin: 0 auto;
}
#KV .pagination [class*="bullet"]
{
	--D:0%;
	
	flex: 1;
	height: 5px;
	max-width: calc(200 * var(--v));

	padding: 0;
	margin: 0;
	/* background: var(--Cgray2); */
	background: linear-gradient(90deg,
		var(--Ctheme1) 0%,
		var(--Ctheme1) var(--D),
		#c4cbec var(--D),
		#c4cbec 100%
	);
	border-radius: unset;
	opacity: 1;
}
#KV .pagination [class*="bullet"]:not([class*="active"])
{
	--D:0% !important;
	background: var(--Cgray3);
}

}
@media screen and (min-width: 767px)
{

#KV .pagination [class*="bullet"]{	transition: var(--T02);	}
#KV .pagination [class*="bullet"]:hover{	opacity: 0.7;	}

}
@media screen and (max-width: 767px)
{

#KV .swiper-slide{	width: 100%;aspect-ratio: 1;	}

}

/* ================================================================================
product
================================================================================ */
@media print, screen
{

section.product ul
{
	--gap: calc(25 * var(--v));

	display: flex;	flex-wrap: wrap;
	gap: calc(40 * var(--v)) var(--gap);
}
section.product li{	width: calc((100% - 4 * var(--gap))/5);	}
section.product li a
{
	display: block;
	width: 100%;
}
section.product li picture
{
	position: relative;
	width: 100%;	aspect-ratio: 1;
	margin-bottom: calc(10 * var(--v));
	overflow: hidden;
}
section.product li picture img{	object-fit: cover;	}
section.product li picture::before
{
	z-index: 5;
	position: absolute;
	top: 0;	right: 0;
	content: "";

	display: block;
	width: 100%;	aspect-ratio: 1;
	box-shadow: inset var(--shadow0);
}
section.product li picture::after
{
	z-index: 10;
	position: absolute;
	bottom: 0;	right: 0;
	/* content: ""; */
	display: block;
	width: calc(20 * var(--u));	aspect-ratio: 1;
	background: black;
	clip-path: polygon(100% 0%, 100% 100%, 0 100%);
}

section.product li .name
{
	display: flex;	justify-content: center;	align-items: center;
	gap: calc(10 * var(--v));
	padding: 0 0.5em;
	font-size: var(--fzv18);
}
section.product li .name h3
{
	font-size: 1em;
	font-weight: 500;
	text-align: center;
	line-height: 1.3;
}
section.product li .name i
{
	flex-shrink: 0;
	display: block;
	padding-top: 0.1em;
	color: var(--Ctheme1);
	/* font-size: 0.6em; */
}

}
@media screen and (max-width: 767px)
{

section.product li{	width: calc((100% - 2 * var(--gap))/3);	}

}

/* ================================================================================
information
================================================================================ */
@media print, screen
{

/* #information{	background: var(--Cgray4);	} */
#information > .inner
{
	/* max-width: calc(1000 * var(--v)); */
	padding: 0 var(--pageP);
	background: var(--Cgray4);
}

#information .postListArea
{
	max-width: calc(1000 * var(--v));
	max-height: calc(380 * var(--v));

	padding: calc(20 * var(--v)) calc(40 * var(--v));
	margin: 0 auto;

	/* border: 1px solid var(--Cgray3); */
	/* background: white; */
	overflow-y: scroll;
}
#information .postList{	display: flex;	flex-direction: column;	}
#information .postList > li:not(:last-child){	border-bottom: 1px solid var(--Cgray2);	}

#information .postList > li.noItem,
#information .postList > li.noMoreItem,
#information .postList > li.loadMoreItem
{
	display: flex;	justify-content: center;	align-items: center;
	padding: calc(10 * var(--v));
	color: var(--Cgray2);
}

#information .postList > li > a
{
	display: flex;	align-items: center;
	gap: calc(10 * var(--v)) calc(15 * var(--v));
	padding: calc(20 * var(--v)) calc(10 * var(--v));
}
#information .postList .date
{
	flex-shrink: 0;
	width: calc(120 * var(--v));
	color: var(--Cgray1);
	font-size: var(--fzv14);
	/* font-weight: 500; */
	line-height: 1.3;
}
#information .postList h3
{
	padding: 0 1em;
	color: var(--Cgray1);
	font-size: var(--fzv16);
	/* font-weight: 500; */
	line-height: 1.3;
}

#information .postList .category
{
	flex-shrink: 0;
	display: flex;	flex-direction: column;
	gap: calc(5 * var(--v));
	width: calc(100 * var(--v));
}
#information .postList .category > li
{
	display: flex;	justify-content: center;	align-items: center;
	/* min-height: calc(30 * var(--v)); */
	width: 100%;
	padding: 0.5em 0.5em 0.6em;

	background: var(--Ctheme1);
	border-radius: calc(4 * var(--v));

	color: white;
	font-size: var(--fzv13);
	font-weight: 500;
}


}
@media screen and (max-width: 767px)
{

#information .postList > li > a{	flex-wrap: wrap;	}
#information .postList .date{	width: calc(180 * var(--v));	}
#information .postList .category{	width: fit-content;	}
#information .postList h3{	width: 100%;	padding: 0;	}

}


/* ======================================== end ======================================== */