/* 授業・現場サンプル：内容を見せながら、偲スタジオの紙面の静けさを保つ。 */
.sample-index{padding:clamp(5rem,10vw,9rem) max(5vw,26px);border-top:1px solid rgba(29,46,40,.22);background:linear-gradient(180deg,transparent,rgba(231,223,210,.48))}.sample-index-video{display:block}.sample-index-head{max-width:760px;margin:0 auto 3rem;text-align:center}.sample-index h2{margin:.7rem 0 1.1rem;font:400 clamp(2rem,4vw,4rem)/1.13 var(--font-display,serif);letter-spacing:.02em}.sample-index-head p{max-width:620px;margin:0 auto;color:rgba(23,39,34,.78);line-height:1.95}.sample-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem);max-width:1120px;margin:0 auto}.sample-video-card{padding:clamp(1.15rem,2.5vw,2rem);border:1px solid rgba(29,46,40,.18);background:#f9f4ec}.sample-video-card.youtube-video-card{background:#1d3028;color:#f8f0e7}.sample-video-meta{min-height:112px}.sample-video-meta span{color:var(--warm,#b05e43);font:700 .6rem/1.3 var(--font-mono,monospace);letter-spacing:.14em}.youtube-video-card .sample-video-meta span{color:#e6bd70}.sample-video-meta h3{margin:.85rem 0 0;font:400 clamp(1.55rem,2.5vw,2.2rem)/1.32 var(--font-display,serif)}.sample-video-card video,.youtube-frame{display:block;width:100%;aspect-ratio:16/9;margin:1rem 0;background:#152820;overflow:hidden}.sample-video-card video{object-fit:cover}.youtube-frame iframe{display:block;width:100%;height:100%;border:0}.sample-video-card>p{margin:0;color:rgba(23,39,34,.74);font-size:.86rem;line-height:1.85}.youtube-video-card>p{color:rgba(248,240,231,.76)}
.sample-lab{margin:clamp(4.5rem,9vw,9rem) 0 0;padding:clamp(2rem,5vw,5rem);background:#efe7db;border-top:1px solid rgba(29,46,40,.28);border-bottom:1px solid rgba(29,46,40,.28)}.sample-lab-head{display:grid;grid-template-columns:minmax(12rem,.8fr) minmax(0,1.2fr);gap:2rem;align-items:end;margin-bottom:2.4rem}.sample-lab h2{margin:.65rem 0 0;font:400 clamp(2rem,4vw,3.7rem)/1.13 var(--font-display,serif)}.sample-lab-head p{margin:0;color:rgba(23,39,34,.75);line-height:1.9}.sample-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.sample-mode{display:flex;flex-direction:column;min-height:100%;padding:1.25rem;background:#f9f4ec;border:1px solid rgba(29,46,40,.18)}.sample-mode>small{color:var(--rust,#b05e43);font:700 .6rem/1.3 var(--font-mono,monospace);letter-spacing:.14em}.sample-mode h3{margin:.8rem 0 .55rem;font:400 1.65rem/1.3 var(--font-display,serif)}.sample-mode p{color:rgba(23,39,34,.77);font-size:.91rem;line-height:1.8}.sample-mode video{width:100%;margin:1rem 0 0;background:#152820;aspect-ratio:16/9;object-fit:cover}.sample-mode .sample-note{margin-top:auto;padding-top:1rem;color:rgba(23,39,34,.62);font-size:.76rem;line-height:1.7}.youtube-mode{background:#1d3028;color:#f8f0e7}.youtube-mode p,.youtube-mode .sample-note{color:rgba(248,240,231,.78)}.youtube-mode .sample-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0;padding:1.15rem;background:rgba(248,240,231,.1);color:#fff0cf;text-decoration:none;transition:background .2s ease,transform .2s ease}.youtube-mode .sample-link:hover{background:rgba(248,240,231,.16);transform:translateY(-2px)}.youtube-mode .sample-link b{font:400 1.2rem/1.3 var(--font-display,serif)}.youtube-mode .sample-link span{font:700 .58rem/1.3 var(--font-mono,monospace);letter-spacing:.08em;white-space:nowrap}
@media (max-width:760px){.sample-video-grid,.sample-lab-head{grid-template-columns:1fr;gap:1.6rem}.sample-index{padding:4rem 8vw}.sample-index-head{text-align:left}.sample-index-head p{margin-left:0}.sample-lab{margin-top:4rem;padding:1.45rem}.sample-modes{grid-template-columns:1fr}.sample-card{padding:1.5rem}.sample-mode{padding:1rem}}