/* 椎葉千 トップ（固定ページ home の本文 .sb-top）。提案の方向A「千のマス」をそのまま移したもの。
   ヘッダー・フッターは SWELL。トークンは style.css の :root。 */

/* SWELL の本文の枠を外して、トップは全幅で組む */
.sb-front .l-content { padding-top: 0; }
.sb-front .l-mainContent__inner > .post_content { margin: 0; }
.sb-front .l-content.l-container, .sb-front .l-mainContent, .sb-front .l-mainContent__inner, .sb-front .post_content { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
.sb-front .l-header.-transparent { background: transparent; }

.sb-top { --gut: max(16px, env(safe-area-inset-left, 0px)); --gutR: max(16px, env(safe-area-inset-right, 0px)); font-family: var(--sb-body); }
.sb-top *, .sb-top *::before, .sb-top *::after { box-sizing: border-box; }
.sb-top p { margin: 0; }
.sb-top img { max-width: 100%; display: block; }

/* ---------- FV：1000マス ---------- */
.sb-fv { padding: 88px var(--gutR) 40px var(--gut); }
.sb-fv-grid { position: relative; max-width: 1400px; margin: 0 auto; }
.sb-fv-grid canvas { display: block; width: 100%; height: auto; }
.sb-fv-cap { max-width: 1400px; margin: 20px auto 0; }
.sb-fv-cap p { font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.7; word-break: keep-all; }
.sb-fv-cap .count { display: block; font-family: var(--sb-mono); font-weight: 500; font-size: 12px; color: var(--sb-muted); letter-spacing: .06em; margin-top: 6px; }
.sb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- セクション共通 ---------- */
.sb-sec { max-width: 1400px; margin: 0 auto; padding: 96px var(--gutR) 24px var(--gut); }
.sb-top .sb-h2 { margin: 0 0 32px; font-size: clamp(30px, 4vw, 48px); line-height: 1.25; text-wrap: balance; border: 0; padding: 0; background: none; }
.sb-top .sb-h2::before { content: ""; display: inline-block; width: .42em; height: .42em; background: var(--sb-accent); margin-right: .35em; vertical-align: .12em; }
.sb-top .sb-h2::after { display: none; }
.sb-sec-lead { margin: -16px 0 28px !important; color: var(--sb-muted); }
/* 見出しは静かに上がる（16px・0.9s）。最初から見えている物は出したまま */
.sb-h2.pre .sb-h2-t { display: inline-block; opacity: 0; transform: translateY(16px); }
.sb-h2.in .sb-h2-t { opacity: 1; transform: none; transition: opacity var(--sb-base) var(--sb-ease), transform var(--sb-base) var(--sb-ease); }

/* ---------- 作ったもの ---------- */
.sb-works { display: grid; gap: 72px; }
.sb-work { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.sb-work:nth-child(even) .sb-work-vis { order: 2; }
.sb-work-kind { font-size: 13px; color: var(--sb-muted); font-weight: 700; }
.sb-top .sb-work-name { margin: 4px 0 2px; font-family: var(--sb-disp); font-weight: 400; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.25; border: 0; padding: 0; background: none; }
.sb-top .sb-work-name::before, .sb-top .sb-work-name::after { display: none; }
.sb-work-sub { margin: 0 0 14px !important; font-size: 14px; color: var(--sb-muted); }
.sb-work-lead { margin: 0 0 18px !important; max-width: 34em; }
.sb-work-page { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--sb-muted) !important; }

/* ---------- ココが面白い・椎葉千について ---------- */
.sb-more { display: inline-block; margin-top: 22px; font-weight: 700; color: var(--sb-ink) !important; }
.sb-about-p { max-width: 34em; font-size: 17px; }

@media (max-width: 760px) {
	.sb-fv { padding-top: 76px; }
	.sb-sec { padding-top: 72px; }
	.sb-work { grid-template-columns: 1fr; gap: 18px; }
	.sb-work:nth-child(even) .sb-work-vis { order: 0; }
}