@charset "utf-8";

:root{
	--blue: #1e6cff;
	--yellow: #e11d48;
	--red: #e11d48;
}

.operate-bar{
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	z-index: 90900;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	width: max-content;
	max-width: calc(100% - 24px);
	background: #0b1f4a;
	color: #fff;
	padding: 8px 10px;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(30,108,255,.28);
	white-space: nowrap;
}
.operate-bar a{
	color: #fff !important;
	font-size: 0.92rem;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	word-break: keep-all;
	background: var(--blue);
	padding: 10px 18px;
	border-radius: 999px;
}
.operate-bar a.red{ background: var(--red); }

#shopPage .product-card{
	padding: 0 0 18px;
	overflow: hidden;
}
#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: 18px 20px 4px; }
#shopPage .product-card .cta{
	margin: 8px 20px 4px;
	background: var(--blue);
	color: #fff !important;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 999px;
}
#shopPage .product-card .cta i{ color: #fff; }
#shopPage .order-steps{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 14px;
	margin: 28px 0 50px;
}
#shopPage .order-steps li{
	background: #fff;
	border-radius: 20px;
	padding: 22px 18px;
	border: 1px solid #dbe7ff;
}
#shopPage .order-steps b{
	display: block;
	color: var(--red);
	font-size: 0.8rem;
	margin-bottom: 8px;
}
#shopPage .order-steps strong{ font-size: 1.05rem; font-weight: 800; display: block; margin-bottom: 8px; }

@media screen and (max-width: 900px){
	#shopPage .order-steps{ grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 700px){
	#shopPage .order-steps{ grid-template-columns: 1fr; }
	.operate-bar{
		width: max-content;
		max-width: calc(100% - 24px);
		justify-content: center;
	}
	.operate-bar a{ font-size: 0.86rem; padding: 9px 14px; }
	.brand-pair__logos{ grid-template-columns: 1fr; }
}

.brand-pair{
	background: linear-gradient(90deg, #fff1f4 0%, #f3f7ff 100%);
	border-top: 3px solid var(--red);
	border-bottom: 3px solid var(--blue);
	padding: 48px 0;
}
.brand-pair__label{
	font-weight: 800;
	color: var(--blue);
	margin-bottom: 18px;
	letter-spacing: 0.04em;
}
.brand-pair__logos{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: center;
}
.brand-pair figure{
	background: #fff;
	border-radius: 20px;
	padding: 28px 32px;
	border: 1px solid #dbe7ff;
	text-align: center;
}
.brand-pair img{
	max-width: 280px;
	width: 100%;
	height: 72px;
	object-fit: contain;
	margin: 0 auto;
}
.brand-pair figcaption{
	margin-top: 12px;
	font-weight: 800;
	color: var(--red);
}
.brand-pair .note{
	margin-top: 20px;
	color: var(--gray02);
	line-height: 1.7;
	max-width: 860px;
}

#subNav.about,
#subNav.news{
	background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%);
}
#shopPage{
	background: linear-gradient(180deg, #f3f7ff 0%, #fff5f7 40%, #f3f7ff 100%);
}

.article-view .article-cover img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: linear-gradient(160deg, #eff4ff, #ffe4ea);
}