@charset "utf-8";

#shopPage{ background: var(--light-blue); padding: 0 0 140px; }
#shopPage .shop-lead{ max-width: 720px; margin: 20px 0 50px; color: var(--gray02); line-height: 1.8; }
#shopPage .shop-sec{ scroll-margin-top: 140px; margin-bottom: 80px; }
#shopPage .shop-sec h3{ font-size: 2rem; font-weight: 800; color: var(--blue); margin-bottom: 12px; }
#shopPage .shop-sec p.desc{ color: var(--gray03); margin-bottom: 28px; line-height: 1.7; }
#shopPage .product-grid{
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}
#shopPage .product-card{
	background: #fff;
	border-radius: 16px;
	padding: 0 0 10px;
	box-shadow: 0 6px 18px rgba(30,108,255,0.07);
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
	border: 1px solid #dbe7ff;
	transition: transform .2s ease, box-shadow .2s ease;
}
#shopPage .product-card:hover{
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(225,29,72,0.12);
	border-color: #ffc1cd;
}
#shopPage .product-card .thumb{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: linear-gradient(160deg, #eff4ff, #ffe4ea);
}
#shopPage .product-card .pad{ padding: 10px 12px 2px; }
#shopPage .product-card .badge{
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	color: var(--yellow);
	margin-bottom: 6px;
	letter-spacing: 0.03em;
}
#shopPage .product-card h4{
	font-size: 0.92rem;
	font-weight: 800;
	line-height: 1.35;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#shopPage .product-card .price{
	margin-top: auto;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--blue);
}
#shopPage .product-card .price s{
	display: block;
	font-size: 0.78rem;
	font-weight: 500;
	color: #9aa4a8;
	margin-bottom: 4px;
}
#shopPage .product-card .cta-pair{ margin-top: auto; }
#shopPage .product-card .cta-pair .cta{
	background: #fff !important;
	color: #12224d !important;
	border: 1.5px solid #e5ecf7;
	box-shadow: none;
}
#shopPage .product-card .cta-pair .cta:hover{
	background: #fff !important;
	color: #12224d !important;
}
#shopPage .guide-box{
	background: #fff;
	border-radius: 28px;
	padding: 40px 36px;
	border: 1px solid #d7e1e5;
}
#shopPage .guide-box li{
	position: relative;
	padding-left: 18px;
	margin-bottom: 10px;
	color: var(--gray02);
	line-height: 1.7;
}
#shopPage .guide-box li::before{
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--yellow);
	position: absolute;
	left: 0;
	top: 10px;
}
#shopPage .bank-box{ display: none !important; }

@media screen and (max-width: 1400px){
	#shopPage .product-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 1100px){
	#shopPage .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 700px){
	#shopPage .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	#shopPage .guide-box{ padding: 28px 20px; }
	#shopPage .product-card h4{ font-size: 0.86rem; }
}