@charset "utf-8";

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



/*************************************************

 mainarea

*************************************************/
@media only screen and (max-width:767px) {
	.mainarea {
		padding-top: 74px;
	}
}



/*************************************************

 top-mainvisual

*************************************************/

.top-mainvisual {
	overflow: hidden;
	margin-bottom: 30px;
	line-height: 0;
}

.top-mainvisual .target-slider {
	position: relative;
}

.top-mainvisual .swiper-button-next,
.top-mainvisual .swiper-button-prev {
	all: unset;
	position: absolute;
	top: 50%;
	width: 14px;
	height: 24px;
	transform: translateY(-50%);
	cursor: pointer;
	/* background: url(../images/common/icon_arw01.svg) no-repeat center center / 100% auto; */
	z-index: 10;
}

.top-mainvisual .swiper-button-prev {
	left: 5.3%;
}

.top-mainvisual .swiper-button-next {
	right: 5.3%;
	transform: translateY(-50%) scale(-1, 1);
}

.top-mainvisual .swiper-my-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
	line-height: 0;
}

.top-mainvisual .swiper-pagination-bullet {
	all: unset;
	box-sizing: border-box;
	width: 13px;
	height: 13px;
	margin: 0 10px;
	border: #E1251B solid 1px;
	border-radius: 50%;
	cursor: pointer;
}

.top-mainvisual .swiper-pagination-bullet-active {
	background-color: #E1251B;
}

@media only screen and (max-width:767px) {
	.top-mainvisual .swiper-button-next,
	.top-mainvisual .swiper-button-prev {
		width: 8px;
		height: 14px;
	}

	.top-mainvisual .swiper-button-prev {
		left: 5px;
	}

	.top-mainvisual .swiper-button-next {
		right: 5px;
	}

	.top-mainvisual .swiper-pagination-bullet {
		width: 10px;
		height: 10px;
		margin: 0 7px;
	}
}



/*************************************************

 top-categorybtns

*************************************************/
.top-categorybtns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 20px;
	line-height: 0;
}

.top-categorybtns__li {
	box-sizing: border-box;
	width: calc(100% / 4);
	padding: 0 20px 40px;
}

.top-categorybtns__anchor {
	display: block;
}

@media only screen and (max-width:991px) {
	.top-categorybtns__li {
		width: calc(100% / 2);
	}
}

@media only screen and (max-width:767px) {
	.top-categorybtns {
		justify-content: space-between;
	}

	.top-categorybtns__li {
		width: calc(100% / 2 - 5px);
		padding: 0 0 10px;
	}
}




/*************************************************

 top-categorybtns

*************************************************/

.top-recommendation__list {
	display: flex;
	flex-wrap: wrap;
	margin: -20px -20px 0;
}

.top-recommendation__list__li {
	box-sizing: border-box;
	display: flex;
	width: calc(100% / 3);
	padding: 20px 20px 0;
}

.top-recommendation__list__anchor {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #1F2128;
	text-decoration: none;
}

.top-recommendation__list__anchor__top {
	width: 100%;
}

.top-recommendation__list__img {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: #fff;
}

.top-recommendation__list__img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.top-recommendation__list__title {
	line-height: 1.7;
}

.top-recommendation__list__price {
	width: 100%;
	margin-top: 3px;
	/* color: #E1251B; */
	font-size: 22px;
	font-weight: 700;
	line-height: 1.545;
}

@media only screen and (max-width:991px) {
	.top-recommendation__list__li {
		width: 50%;
	}
}

@media only screen and (max-width:767px) {
	.top-recommendation__list {
		justify-content: space-between;
		margin: -20px 0 0;
	}

	.top-recommendation__list__li {
		width: calc(50% - 7px);
		padding: 20px 0 0;
	}

	.top-recommendation__list__price {
		font-size: 20px;
	}
}




/*************************************************

 top-banner

*************************************************/
.top-banner {
	max-width: 940px;
	margin: 60px auto 70px;
}

.top-banner__anchor {
	display: block;
	line-height: 0;
}

@media only screen and (max-width:767px) {
	.top-banner {
		margin: 30px auto 40px;
	}
}




/*************************************************

 top-featured

*************************************************/
.top-featured {
	overflow: hidden;
	margin-bottom: 70px;
}

.top-featured__slide__anchor {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #1F2128;
	text-decoration: none;
}

.top-featured__slide__anchor__top {
	width: 100%;
}

.top-featured__slide__img {
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: #fff;
}

.top-featured__slide__img img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.top-featured__slide__title {
	line-height: 1.7;
}

.top-featured__slide__price {
	width: 100%;
	margin-top: 3px;
	/* color: #E1251B; */
	font-size: 22px;
	font-weight: 700;
	line-height: 1.545;
}

.top-featured__slide .swiper-slide {
	display: flex;
	height: auto;
	width: calc(100% / 3) !important;
	max-width: calc(100% / 3) !important;
	flex-shrink: 0;
}

.top-featured .swiper-container .swiper-wrapper .swiper-slide {
	width: calc(100% / 3) !important;
	max-width: calc(100% / 3) !important;
}

/* Force consistent width regardless of number of items */
.top-featured .swiper-container .swiper-wrapper {
	display: flex !important;
}

.top-featured .swiper-container .swiper-wrapper .swiper-slide {
	flex: 0 0 calc(100% / 3) !important;
}

.top-featured__slide .swiper-scrollbar {
	position: relative;
	width: 100%;
	left: 0;
	margin-top: 30px;
	background-color: #ccc;
}

.top-featured__slide .swiper-scrollbar-drag {
	background-color: #E1251B;
}

@media only screen and (max-width:991px) {
	.top-featured__slide .swiper-slide,
	.top-featured .swiper-container .swiper-wrapper .swiper-slide {
		width: 50% !important;
		max-width: 50% !important;
	}
}

@media only screen and (max-width:767px) {
	.top-featured__slide__price {
		font-size: 20px;
	}

	.top-featured__slide .swiper-slide,
	.top-featured .swiper-container .swiper-wrapper .swiper-slide {
		width: 50% !important;
		max-width: 50% !important;
	}
}