@charset "utf-8";

/* ttlWrap */
.sec.ttlWrap {
	padding-bottom: var(--35px);
}
.sec.ttlWrap h2 {
	margin-bottom: 0;
}

/* contentsWrap */
.contentsWrap.sec {
	padding: 0;
}
.contentsWrap .shopWrap li {
	padding: var(--35px) 0 var(--45px);
}
.contentsWrap .shopWrap li:nth-child(2n-1) {
	background: var(--blueBgColor);
}
.contentsWrap .shopWrap h3 {
	font-size: var(--18px);
	font-weight: 600;
	text-align: center;
	position: relative;
	padding-bottom: var(--10px);
}
.contentsWrap .shopWrap h3::after {
	content: "";
	position: absolute;
	width: var(--40px);
	height: 2px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	background: var(--baseColor);
}
.contentsWrap .shopWrap .pic {
	margin-top: var(--25px);
	text-align: center;
}
.contentsWrap .shopWrap .txt {
	margin-top: var(--15px);
	font-size: var(--14px);
	line-height: 1.7;
}
.contentsWrap .shopWrap .slide {
	margin-top: var(--27px);
}
.contentsWrap .shopWrap .swiper-slide {
	padding-bottom: var(--18px);
}
.contentsWrap .shopWrap .swiper-slide .spic {
	display: flex;
	aspect-ratio: 1.49700599 / 1;
}
.contentsWrap .shopWrap .swiper-slide .spic img {
	aspect-ratio: 1.49700599 / 1;
	object-fit: contain;
}
.contentsWrap .moreBtn {
	margin-top: var(--35px);
}
.contentsWrap .moreBtn a {
	padding: var(--6px) var(--45px) var(--7px);
	line-height: 1.4;
}

/* swiper 「contentsWrap」「othersWrap」共通 */
.sec .swiper:not(.swiper-initialized) .swiper-wrapper {
	gap: 0 var(--12px);
}
.sec .swiper:not(.swiper-initialized) .swiper-slide {
	width: calc((100% - var(--12px)) / 2);
	margin: 0 auto;
	padding-bottom: 0;
}


/* othersWrap */
.sec.othersWrap h2 {
	font-size: var(--18px);
	font-weight: bold;
	margin-bottom: var(--20px);
}
.othersWrap .swiper-slide {
	padding-bottom: var(--18px);
}
.othersWrap .swiper-slide a {
	display: block;
}
.othersWrap .swiper-slide a .pic {
	display: flex;
	aspect-ratio: 1 / 1;
}
.othersWrap .swiper-slide a .txt {
	font-size: var(--14px);
	margin-top: var(--8px);
}
.othersWrap .swiper-slide a .name {
	font-size: var(--12px);
	margin-top: var(--5px);
}
.othersWrap .moreBtn {
	margin-top: var(--35px);
}
