/* スリジェ 第1波 ブラッシュアップの動き(4案共通)。色と書体は v003 の変数 */
.vwrap{position:relative;overflow:hidden;background:#EFE7DE}
.vwrap video{display:block;width:100%;height:100%;object-fit:cover}
.vp{position:absolute;right:4px;bottom:4px;width:44px;height:44px;border-radius:50%;border:0;background:radial-gradient(circle at center,rgba(250,246,240,.88) 0 17px,rgba(42,35,38,.10) 17.5px 18.5px,transparent 19px);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.vp::before{content:"";display:block;width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.vp[data-state="pause"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink);margin-left:3px}
/* 冒頭の分割(上=焼いた文字の絵、下=動き) */
.fvsplit{position:relative}
.fvsplit img,.fvsplit .vwrap{display:block;width:100%}
.fvsplit .vwrap{aspect-ratio:4/3}
/* d1: 確かな写真をゆっくり寄る */
.mo-on:not(.mo-still) .kb img{animation:kb 9s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
.kb{overflow:hidden}
/* d2: 冒頭の写真の枠を動画に */
.d2low .vwrap{width:88%;aspect-ratio:4/3;border-radius:6px;box-shadow:0 12px 30px rgba(42,35,38,.18);margin:0 auto}
/* 静かに現れる(JSが mo-rise を付けた時だけ隠す) */
.mo-rise [data-rise]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.mo-rise [data-rise].in{opacity:1;transform:none}
.mo-rise [data-rise] > li{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.mo-rise [data-rise].in > li{opacity:1;transform:none}
.mo-rise [data-rise].in > li:nth-child(2){transition-delay:.08s}
.mo-rise [data-rise].in > li:nth-child(3){transition-delay:.16s}
.mo-rise [data-rise].in > li:nth-child(4){transition-delay:.24s}
.mo-rise [data-rise].in > li:nth-child(5){transition-delay:.32s}
.mo-rise [data-rise].in > li:nth-child(6){transition-delay:.4s}
/* 写真 → 作品 */
.morph{margin:6px 16px 10px;background:#fff;border-radius:10px;padding:12px;box-shadow:0 4px 18px rgba(42,35,38,.08)}
.morph .m-head{margin:0 0 10px;font-family:var(--serif);font-size:19px;line-height:1.5;text-align:center}
.m-stage{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#EFE7DE}
.m-stage .vwrap{position:absolute;inset:0}
.m-stage .m-done{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:circle(0% at 50% 50%);transition:clip-path 1.1s cubic-bezier(.6,.05,.25,1)}
.morph.done .m-stage .m-done{clip-path:circle(75% at 50% 50%)}
.morph.done:not(.side) .m-stage .vp{visibility:hidden}
.m-tags{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 8px}
.m-tag{font-size:12px;font-weight:700;padding:2px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--sub);transition:background .4s ease,color .4s ease,border-color .4s ease}
.m-tag.t1{background:var(--ink);color:#fff;border-color:var(--ink)}
.morph.done .m-tag.t1{background:#fff;color:var(--sub);border-color:var(--line)}
.morph.done .m-tag.t2{background:var(--sakura-d);color:#fff;border-color:var(--sakura-d);transition-delay:.7s}
.m-arrow{color:var(--sakura-d);font-weight:700}
.m-memo{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.m-memo li{font-size:14px;line-height:1.5;padding:6px 10px;border-radius:6px;background:var(--paper2,#F3ECE4);opacity:.4;transition:opacity .3s ease}
.m-memo li.on{opacity:1}
.m-memo li b{color:var(--sakura-d);margin-right:6px;font-size:12px}
.m-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:8px}
.m-foot small{font-size:12px;color:var(--sub)}
.m-again{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;cursor:pointer;color:var(--ink)}
.morph.side .m-stage{aspect-ratio:2/1}
.morph.side .m-stage .vwrap{right:50%}
.morph.side .m-stage .m-done{left:50%;width:50%;clip-path:none}
/* 締めの上の小さな動き */
.closing-v{width:62%;max-width:260px;margin:0 auto 16px;aspect-ratio:1;border-radius:50%;box-shadow:0 8px 22px rgba(42,35,38,.12);overflow:visible}
.closing-v video{border-radius:50%}
.closing-v .vp{right:0;bottom:0}  /* 円の外の角で切れないように、枠の外へはみ出さず角に置く */
/* 流れの1つ目を動画に */
.steps li .vwrap{flex:none;width:88px;height:88px;border-radius:10px}
.steps li .vwrap .vp,.points li .vwrap .vp{right:0;bottom:0;background:radial-gradient(circle at center,rgba(250,246,240,.88) 0 12px,transparent 13px)}
.steps li .vwrap .vp::before,.points li .vwrap .vp::before{transform:scale(.75)}  /* 小さい枠は見た目の丸を小さく(押せる範囲は44px のまま) */
/* 仲間の大きい枠を動画に */
.collage .vwrap.wide{grid-column:span 2;aspect-ratio:16/9;border-radius:4px}
@media (prefers-reduced-motion: reduce){.mo-on .kb img{animation:none}}

/* 作品の壁の中の動画(対照A) */
/* 10/3 本人「FV、崩れてない？」: app.js が動画に付ける height="480" の属性がそのまま効き(写真は style.css の img{height:auto} で打ち消されるが動画には無かった)、写真の枠の2.5倍に伸びて名札が壁の外へ→高さも写真の枠と同じに明示 */
.tile.phone video{width:calc(var(--fvw,390px) * .225);height:calc(var(--fvw,390px) * .4);min-height:0;flex:none;aspect-ratio:9/16;border-radius:16px;border:4px solid #231d20;box-shadow:0 10px 24px rgba(42,35,38,.18);object-fit:cover;background:#ddd;display:block}
.vp-wall{position:absolute;right:6px;bottom:6px;z-index:3}

/* 作品の格子・帯の中の動画(d8・d1・d2) */
.wgrid video.gridv{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 4px 12px rgba(42,35,38,.10);display:block;background:#EFE7DE}
.strip video.gridv{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block;background:#EFE7DE}
.vp-group{position:relative;right:auto;bottom:auto;margin:4px 12px 0 auto}
/* d2 の Point の枠の動画は、元の写真と同じ 88px の正方形で3行ぶん(崩れると見出しが左の細い列に押し出される) */
.points li .vwrap{grid-row:span 3;width:88px;height:88px;border-radius:6px;align-self:center}
.points li strong.kp{word-break:keep-all}

/* 本文 v011 の部品(10/3・公式の発信を生かした差分): りかこさんの言葉の引用・受講生の声・写真→作品の一言 */
#teacher .q-rikako{margin:14px 22px 6px;padding:2px 0 2px 14px;border-left:3px solid var(--sakura-d);font-family:var(--serif);font-size:16px;line-height:1.8;color:var(--ink)}
#teacher .q-rikako p{margin:0}
#teacher .q-rikako.q-big{font-size:19px;line-height:1.7;margin-top:14px}
#teacher .story{margin:6px 22px 4px;font-size:15px;line-height:1.85;color:var(--ink)}
#teacher .q-src{margin-top:6px}
.voice-q{margin:16px 16px 0;padding:14px 16px;background:#fff;border-radius:10px;box-shadow:0 4px 16px rgba(42,35,38,.07)}
.voice-q blockquote{margin:0;font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--ink)}
.voice-q blockquote p{margin:0}
.voice-q figcaption{margin-top:6px;font-size:12px;color:var(--sub)}
.m-lead{margin:10px 0 0;font-size:13px;color:var(--sub);text-align:center}
/* 1字落ちの防止: 句の切れ目(<wbr>)と句読点でだけ折る。入りきらない時だけどこでも折る(10/3 orphan_check.py で 320/390/810px を確認) */
.kp{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:360px){.wgrid figcaption{white-space:nowrap;font-size:11px;padding:2px 6px}}