/* クラブ向けの見本（v1.0.40・案B） TOPの帯と専用ページ */
#club-samples-band{padding:48px 0;background:#fff}
#club-samples-band .sb-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:24px;width:calc(100% - 48px);max-width:1200px;margin:auto;padding:40px 48px;border-radius:16px;background:linear-gradient(90deg,#1093ce 0%,#1ba4d2 30%,#53bcb1 53%,#b2f857 100%);overflow:hidden;color:#111}
#club-samples-band .sb-kicker{margin:0 0 8px;font-size:14px;font-weight:700}
#club-samples-band h2{margin:0 0 12px;font-size:clamp(23px,2.6vw,32px);font-weight:800;line-height:1.5}
#club-samples-band p.sb-lead{margin:0 0 24px;font-size:15px;line-height:1.9}
#club-samples-band .sb-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:12px 26px;border-radius:999px;background:#111;color:#fff!important;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
#club-samples-band .sb-btn:hover{background:#333}
#club-samples-band .sb-btn:focus-visible{outline:3px solid #111;outline-offset:4px}
#club-samples-band .sb-phones{display:flex;justify-content:center;align-items:flex-end;gap:12px;align-self:end;margin:0 0 -40px}
#club-samples-band .sb-phones img{width:18%;height:auto;aspect-ratio:9/17;object-fit:cover;object-position:top;border:4px solid #111;border-bottom:0;border-radius:18px 18px 0 0;background:#fff;box-shadow:0 10px 28px #0003}
#club-samples-band .sb-phones img:nth-child(2n){aspect-ratio:9/20}
@media(max-width:767px){#club-samples-band{padding:36px 0}#club-samples-band .sb-panel{grid-template-columns:1fr;width:calc(100% - 32px);padding:28px 20px 0;gap:20px}#club-samples-band .sb-phones{margin:0 -4px;gap:6px}#club-samples-band .sb-phones img{width:19%;border-width:3px;border-radius:12px 12px 0 0}#club-samples-band p.sb-lead{font-size:14px;line-height:1.8}}
.cs-wrap{width:calc(100% - 48px);max-width:1200px;margin:auto}
.cs-jump{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid #dce5e9}
.cs-jump .cs-wrap{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.cs-jump a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid #c9d5dd;border-radius:999px;color:#111;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.cs-jump a:hover,.cs-jump a:focus-visible{background:#111;color:#fff;border-color:#111;outline:none}
.cs-item{padding:64px 0;border-bottom:1px solid #e8eef1;scroll-margin-top:72px}
.cs-item:nth-of-type(2n){background:#f5f8fa}
.cs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.cs-item:nth-of-type(2n) .cs-shot{order:2}
.cs-shot{position:relative;margin:0 0 32px;padding-right:9%}
.cs-shot .pc{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #dce5e9;box-shadow:0 14px 36px #415b6b26}
.cs-shot .sp{position:absolute;right:0;bottom:-32px;width:24%;height:auto;border:4px solid #111;border-radius:20px;background:#fff;box-shadow:0 12px 30px #0003}
.cs-no{display:inline-block;margin-bottom:10px;padding:2px 12px;border-radius:999px;background:linear-gradient(90deg,#1093ce 0%,#1ba4d2 30%,#53bcb1 53%,#b2f857 100%);font-size:13px;font-weight:700;color:#111}
.cs-item h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.5}
.cs-copy{margin:0 0 18px;font-size:17px;font-weight:700;color:#415b6b}
.cs-who{margin:0 0 18px;font-size:15px;line-height:1.9}
.cs-pages{margin:0 0 24px;padding:16px 18px 16px 2.2em;border-radius:8px;background:#fff;border:1px solid #dce5e9;font-size:14px;line-height:1.9}
.cs-pages-title{margin:0 0 6px;font-size:13px;font-weight:700;color:#415b6b}
.cs-btns{display:flex;flex-wrap:wrap;gap:12px}
.cs-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:10px 22px;border-radius:999px;background:#111;color:#fff!important;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap}
.cs-btn:hover{background:#333}
.cs-btn--line{background:#fff;color:#111!important;border:2px solid #111}
.cs-btn--line:hover{background:#eef3f6}
.cs-btn:focus-visible{outline:3px solid #1093ce;outline-offset:3px}
.cs-note{padding:32px 0 0;color:#526875;font-size:12px;line-height:1.8}
@media(max-width:899px){.cs-wrap{width:calc(100% - 32px)}.cs-item{padding:44px 0}.cs-grid{grid-template-columns:1fr;gap:28px}.cs-item:nth-of-type(2n) .cs-shot{order:0}.cs-shot .sp{right:0;width:26%;border-width:3px;border-radius:14px}.cs-hero-art{display:none}}
/* v1.0.41：目的で選ぶ（案2）・矢印 */
.cs-btn .cs-arrow{display:inline-block;margin-left:2px;font-weight:700;transition:transform .2s}
.cs-btn:hover .cs-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.cs-btn .cs-arrow{transition:none}
}
.cs-purpose .cs-wrap{align-items:center}
.cs-purpose-lead{flex:none;font-size:13px;font-weight:700;color:#415b6b;margin-right:4px}
.cs-purpose button{flex:none;min-height:40px;padding:6px 16px;border:1px solid #c9d5dd;border-radius:999px;background:#fff;color:#111;font:700 14px/1.4 "Noto Sans JP",sans-serif;cursor:pointer;white-space:nowrap}
.cs-purpose button.is-on{background:#111;color:#fff;border-color:#111}
.cs-purpose button:focus-visible{outline:3px solid #1093ce;outline-offset:2px}
.cs-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 12px;padding:0}
.cs-tags li{padding:2px 10px;border-radius:4px;background:#eef3f6;font-size:12px;font-weight:700;color:#415b6b}
.cs-item[hidden]{display:none}