/* 一覧ページのランディング差し込みHTML  /sh/css/sh_landing.css  (ProductList.aspx が該当ページでだけ読み込む) */
.shlp { --lp-main: #c2457e; --lp-line: #e6e1dc; --lp-bg: #faf7f5; --lp-sub: #6b6b6b; color: #333; font-size: 14px; line-height: 1.8; }
.shlp *, .shlp *::before, .shlp *::after { box-sizing: border-box; }
.shlp--top { max-width: 1400px; margin: 4px auto 18px; } /* 差し込み位置は本文の器(.global-contents__inner 1400px)の外なので同じ幅にそろえる */
.shlp--bottom { margin: 40px 0 24px; padding-top: 8px; border-top: 1px solid var(--lp-line); }
.shlp-lead { margin: 0 0 12px; color: #444; }
.shlp-chips { margin: 0 0 10px; }
.shlp-chips__title { margin: 0 0 6px; font-size: 12px; font-weight: bold; color: var(--lp-sub); letter-spacing: .05em; }
.shlp-chips ul { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.shlp-chip { display: inline-block; padding: 5px 14px; border: 1px solid var(--lp-line); border-radius: 999px; background: #fff; color: #333; font-size: 13px; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.shlp-chip:hover { border-color: var(--lp-main); color: var(--lp-main); }
.shlp-chip.is-current { border-color: var(--lp-main); background: var(--lp-main); color: #fff; }
.shlp-chip--guide { background: var(--lp-bg); }
@media (max-width: 767px) {
	/* スマホは横スクロールの1行にして商品一覧を押し下げない */
	.shlp--top .shlp-chips ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
	.shlp--top .shlp-chips ul::-webkit-scrollbar { display: none; }
	.shlp--top, .shlp--bottom { padding-left: 15px; padding-right: 15px; }
	/* 横スクロールのチップ列の中身の幅でページ全体が広がらないよう、画面幅に固定する */
	.shlp--top { width: 100vw; max-width: 100vw; overflow: hidden; }
	.shlp--bottom { max-width: 100vw; overflow-wrap: anywhere; }
}
.shlp-sec { margin: 28px 0 0; }
.shlp-h2 { margin: 0 0 12px; padding-left: 12px; border-left: 4px solid var(--lp-main); font-size: 18px; line-height: 1.5; }
.shlp-points { display: grid; gap: 12px; }
@media (min-width: 768px) { .shlp-points { grid-template-columns: repeat(2, 1fr); } }
.shlp-point { padding: 14px 16px; border-radius: 10px; background: var(--lp-bg); }
.shlp-point h3 { margin: 0 0 4px; font-size: 15px; }
.shlp-point p { margin: 0; }
.shlp-point__links { margin-top: 6px !important; font-size: 13px; }
.shlp-point__links a { margin-right: 12px; color: var(--lp-main); }
.shlp-faq__item { border-bottom: 1px solid var(--lp-line); }
.shlp-faq__item summary { position: relative; padding: 12px 28px 12px 0; cursor: pointer; font-weight: bold; list-style: none; }
.shlp-faq__item summary::-webkit-details-marker { display: none; }
.shlp-faq__item summary::after { content: "+"; position: absolute; right: 4px; top: 10px; color: var(--lp-sub); font-size: 18px; }
.shlp-faq__item[open] summary::after { content: "−"; }
.shlp-faq__item p { margin: 0 0 12px; }
.shlp-links { margin: 0; padding-left: 1.2em; }
.shlp-links a { color: var(--lp-main); }
.shlp-back { margin: 24px 0 0; text-align: center; }
.shlp-btn { display: inline-block; padding: 10px 28px; border: 1px solid var(--lp-main); border-radius: 999px; color: var(--lp-main); font-weight: bold; text-decoration: none; }
.shlp-btn:hover { background: var(--lp-main); color: #fff; }

/* アイコン(Codex生成の黒線画PNGを mask にしてブランド色で塗る)・タイル・挿絵 */
.shlp-ico { display: inline-block; width: 20px; height: 20px; margin-right: 4px; vertical-align: -5px; background: var(--lp-main);
	-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.shlp-chip.is-current .shlp-ico { background: #fff; }
.shlp-chips--tiles ul { gap: 8px; }
.shlp-chips--tiles .shlp-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 104px; min-height: 84px;
	padding: 10px 6px; border-radius: 12px; white-space: normal; text-align: center; font-size: 12px; line-height: 1.4; }
.shlp-chips--tiles .shlp-ico { width: 34px; height: 34px; margin: 0 0 6px; }
@media (max-width: 767px) { .shlp-chips--tiles .shlp-chip { width: 88px; min-height: 76px; } }
.shlp-point__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 10px; border-radius: 8px; background: #fff; }