/* v004 パターン別の冒頭の部品。B=型を写す / C=ジャンル別 / D=スリジェの見た目 */

/* B: 元の型 → 写した3本 */
.xfer{position:absolute;left:4%;right:4%;top:43%;bottom:3%;display:flex;align-items:center;justify-content:center;gap:2.2%}
.xfer figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.xfer img{display:block;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:3px solid #231d20;box-shadow:0 8px 20px rgba(42,35,38,.16);background:#ddd}
.xfer .src img{width:calc(var(--fvw,390px) * .27)}
.xfer .outs{display:flex;gap:6px}
.xfer .outs img{width:calc(var(--fvw,390px) * .175);border-width:2px;border-radius:9px}
.xfer figcaption{font-size:12px;line-height:1.2;color:var(--ink);background:var(--paper);padding:3px 8px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 3px rgba(42,35,38,.08)}
.xfer .src figcaption{background:var(--ink);color:#fff}
.xfer .arrow{font-size:22px;color:var(--sakura-d);font-weight:700;line-height:1}
.xfer .outs figure{opacity:1;transform:none}
.js .xfer .outs figure{opacity:0;transform:translateX(-10px);transition:opacity .45s ease,transform .45s ease}
.js .xfer .outs figure.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .xfer .outs figure{opacity:1;transform:none;transition:none}}
.fvnote{margin:10px 16px 0;font-size:13px;color:var(--sub);text-align:center}

/* C: ジャンルの札と、そのジャンルの作品2〜3点 */
.genre{position:absolute;left:3%;right:3%;top:41%;bottom:3%;display:flex;flex-direction:column;align-items:center;gap:10px}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.chips button{min-height:44px;min-width:60px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(250,246,240,.95);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.genre .sets{position:relative;width:100%;flex:1}
.genre .set{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s}
.genre .set.on{opacity:1;visibility:visible}
.genre .set img{display:block;object-fit:cover;background:#ddd;box-shadow:0 10px 22px rgba(42,35,38,.16)}
.genre .set img.reel{width:calc(var(--fvw,390px) * .29);aspect-ratio:9/16;border-radius:14px;border:3px solid #231d20}
.genre .set img.sq{width:calc(var(--fvw,390px) * .27);aspect-ratio:1/1;border-radius:8px}
@media (prefers-reduced-motion:reduce){.genre .set{transition:none}}

/* D: スリジェの見た目(ピンク・水彩) */
.theme-3je{--paper:#FFF8F7;--paper2:#FDEEEE;--outside:#F8E7E6;--sakura:#F79AA9;--sakura-d:#B23A55;--line:#F1D3D4}
.theme-3je .ttl{font-family:var(--sans);font-weight:800;letter-spacing:.02em;color:#3F2A2E}
.theme-3je .eyebrow{color:#B23A55}
.theme-3je .why p:first-child{font-family:var(--sans);font-weight:800;color:#3F2A2E}

/* D: 2画面目の作品の壁(冒頭の外) */
.wall-sec{padding:28px 0 18px;background:var(--paper2)}
.wall-sec .ttl{text-align:center;margin-bottom:12px}
.wall.inline{position:relative;left:auto;right:auto;top:auto;bottom:auto;gap:14px}
.wall-sec{--fvw:min(100vw,480px)}