/* Movie Stack 項目ページ v5 — design.md 2〜4 節。白と薄灰、4 種の共通の型。 */
.pc{
 --lime:#C6F91F;--dk:#060608;
 --rp-body:clamp(15px,0.9rem + 0.25vw,16px);
 --rp-h1:clamp(30px,1.2rem + 2.4vw,48px);
 --rp-h2:clamp(24px,1rem + 1.4vw,34px);
 --rp-key:clamp(17px,0.95rem + 0.5vw,20px);
 --rp-h3:18px;--rp-small:13px;
 --rp-gutter:clamp(20px,5vw,80px);
 --rp-sec:clamp(64px,8vw,112px);
 --rp-sec-tight:clamp(40px,5vw,64px);
 --rp-radius:10px;
}
.pc-main{font-family:var(--jp);font-size:var(--rp-body);line-height:1.85;color:var(--ink);background:#fff}
.pc-main *,.pc-main *::before,.pc-main *::after{box-sizing:border-box;min-width:0}
:where(.pc-main) :where(h1,h2,h3,p,figure,ol,ul){margin:0}
.pc-main :where(button,input){font:inherit}
.pc-main :where(h1,h2,h3,p,figcaption,a){overflow-wrap:anywhere}
.pc-main p{max-width:36em}
.pc-main img{display:block;max-width:100%;height:auto}
.pc-main [hidden]{display:none!important}
.pc-w{max-width:calc(1120px + 2 * var(--rp-gutter));padding:0 var(--rp-gutter);margin:0 auto}
.pc-sec{padding:var(--rp-sec) 0}
.pc-tight{padding:var(--rp-sec-tight) 0}
.pc-gray{background:#F2F2F0}
.pc-mh{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}
.pc-no{font:700 var(--rp-small)/1.4 var(--en-nav);letter-spacing:.12em;color:var(--ink)}
.pc-main h1{font-size:var(--rp-h1);font-weight:800;line-height:1.3}
.pc-main h2{font-size:var(--rp-h2);font-weight:800;line-height:1.4}
.pc-main h3{font-size:var(--rp-h3);font-weight:700;line-height:1.5}
.pc-key{font-size:var(--rp-key);font-weight:700;margin-bottom:28px}
.pc-main a{color:inherit}
.pc-main :is(a,summary,button,input):focus-visible{outline:3px solid var(--ink);outline-offset:4px}

/* 冒頭だけ型を崩す。映像 7/12、説明 5/12。スマホも同じ HTML。 */
.pc-hero{padding:24px 0 var(--rp-sec-tight);background:#fff}
.pc-main .pc-crumb{display:flex;flex-wrap:wrap;gap:8px 12px;max-width:none;margin-bottom:32px;font-size:15px;line-height:1.6;color:var(--ink)}
.pc-crumb a{text-decoration:none}
.pc-back{display:block;width:fit-content;margin-bottom:16px;font-size:15px}
.pc-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:40px;row-gap:20px;align-items:center}
.pc-hero-title{grid-column:2;grid-row:1;align-self:end}
.pc-kind{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;font-size:var(--rp-small);line-height:1.6}
.pc-kind span:first-child,.pc-chips span{padding:4px 12px;border-radius:999px;background:#F2F2F0;font-size:var(--rp-small);line-height:1.6}
.pc-kind-en{font-family:var(--en-nav);letter-spacing:.08em}
.pc-vid{grid-column:1;grid-row:1/3;position:relative;overflow:hidden;border-radius:var(--rp-radius);background:#000}
.pc-vid video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.pc-hero-copy{grid-column:2;grid-row:2;align-self:start}
.pc-lead{font-size:var(--rp-key);font-weight:700}
.pc-use-label{margin-top:20px;font-size:15px;font-weight:700}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pc-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.pc-copy{border:0;border-radius:var(--rp-radius);background:var(--ink);color:#fff;padding:12px 20px;cursor:pointer;font-weight:700!important}
.pc-hero-actions a{font-size:15px;text-underline-offset:4px}
.pc-vid>.rx-snd{all:unset;position:absolute;top:12px;right:12px;z-index:3;cursor:pointer;background:#fff;color:var(--ink);font:700 15px/1.4 var(--jp);border-radius:999px;padding:8px 16px}
.pc-vid>.rx-snd[aria-pressed=true]{background:var(--ink);color:#fff}
.pc-vid .rx-time{font-size:13px}
.pc-vid .rx-fs{font-size:15px}
.rx-full>.rx-snd{top:20px;right:20px}

/* A: 写真の並び（写真はいつも 16:9） */
.pc-scns{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.pc-scn img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rp-radius)}
.pc-scn h3{margin-top:12px}
.pc-scn-none{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--rp-radius);background:#ddd}

/* B: 前→後。1 枚・音だけ・連続するコマも、既存の図と文を省かず見せる。 */
.pc-comparison{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:16px 40px}
.pc-comparison:has(>.pc-cmp:only-child){grid-template-columns:minmax(0,1fr)}
.pc-comparison:has(>.pc-cmp:nth-child(2))::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);background:#D9D9D4}
.pc-cmp{display:grid;grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);gap:16px 12px;align-content:start}
.pc-comparison>.pc-cmp{grid-row:1/3;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid}
.pc-comparison .pc-cmp-l{grid-row:1}
.pc-cmp-pics{grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);gap:12px;align-content:start}
.pc-cmp-one>.pc-cmp-pics{grid-template-columns:minmax(0,1fr)}
.pc-cmp-l{grid-column:1/-1}
.pc-mk{display:inline-block;padding:4px 12px;background:#e4e4e1;border-radius:999px;font-size:13px;font-weight:700;line-height:1.6}
.pc-mk-ok{background:var(--lime)}
.pc-cmp-r{margin-top:12px}
.pc-compare-label{font-size:15px;font-weight:700;margin-bottom:8px}
.pc-cmp img{width:100%;border-radius:var(--rp-radius);align-self:start}
.pc-cutbar{align-self:stretch;background:#ddd;border-radius:4px}
.pc-min .pc-cmp-one>img{grid-column:1/-1}
.pc-min .pc-cmp-none{grid-template-columns:minmax(0,1fr)}
@supports not (grid-template-rows:subgrid){
 .pc-comparison{grid-template-rows:auto}
 .pc-comparison>.pc-cmp{grid-row:auto;grid-template-rows:auto auto}
 /* 小見出し 1 行・札 1 行・説明 2 行と、それぞれの余白。 */
 .pc-comparison .pc-cmp-l{min-height:calc(15px * 1.85 + 8px + 13px * 1.6 + 8px + 12px + 2 * var(--rp-body) * 1.85)}
}
.pc-min .pc-flow{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:24px}
.pc-flow:first-child{margin-top:0}
.pc-flow-f{display:grid;align-items:center;column-gap:12px}
.pc-flow-2{grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr)}
.pc-flow-3{grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr) 0 minmax(0,1fr)}
.pc-flow-f img{width:100%;aspect-ratio:16/9;object-fit:cover}
.pc-flow-ar{position:relative;z-index:1}
.pc-flow-ar::before{content:"→";position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;font-size:20px}
.pc-legend{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:20px;font-size:15px}
.pc-legend span{display:inline-flex;align-items:center;gap:8px}
.pc-legend i{display:inline-block;width:28px;border-top:3px solid #555}
.pc-legend .lg-dash{border-top-style:dashed}
.pc-fail-f{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:16px;align-items:start}
.pc-fail-f img{width:100%;border-radius:var(--rp-radius)}
.pc-fail-f figcaption{margin-top:12px;font-size:15px}
.pc-fail-f b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ddd}
.pc-fail-f .ok b{background:var(--lime)}
.pc-compare-arrow{align-self:center;text-align:center;font-size:24px}
.pc-pair{display:grid;grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);overflow:hidden;border-radius:var(--rp-radius);background:#ddd}
.pc-pair img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0}

/* 絵がない比較もカードに。失敗例と CHECK をまとめる時は左列内で縦に積む。 */
.pc-text-pair{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:16px;grid-auto-rows:1fr}
.pc-text-pair:has(>.pc-text-card:only-child){grid-template-columns:minmax(0,1fr)}
.pc-text-card{padding:24px;background:#fff;border:1px solid #E3E3DF;border-radius:var(--rp-radius)}
.pc-text-card .pc-cmp-r{font-size:var(--rp-key);font-weight:700}
.pc-text-card .pc-compare-label{font-size:15px}
.pc-text-arrow{align-self:center;text-align:center;font-size:24px}
.pc-text-arrow::before{content:"→"}
.pc-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.pc-review-grid .pc-text-pair{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
.pc-review-grid .pc-text-pair:has(>.pc-text-arrow){grid-template-rows:1fr auto 1fr}
.pc-review-grid .pc-text-arrow::before{content:"↓"}

/* C: 番号カード。番号は左、本文と図は同じカードの中に。 */
.pc-steps{list-style:none;padding:0;display:flex;flex-direction:column;gap:20px}
.pc-step{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:start;padding:24px;background:#fff;border:1px solid #ddd;border-radius:var(--rp-radius)}
.pc-hand .pc-step{background:#F2F2F0;border-color:transparent}
.pc-step-no{width:fit-content;font:700 13px/1.6 var(--en-nav);border-bottom:4px solid var(--lime);padding-bottom:4px}
.pc-step-t>p{margin-top:12px}
.pc-step-figures{display:flex;flex-direction:column;gap:16px}
.pc-min .pc-step-nofig{grid-template-columns:72px minmax(0,1fr)}
.pc-step-f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.pc-step-f2.pc-step-f1{grid-template-columns:minmax(0,1fr)}
.pc-step-f img{width:100%;border-radius:var(--rp-radius)}
.pc-step-f figcaption{margin-top:8px;font-size:15px;line-height:1.85}
.pc-step-arrow{position:relative}
.pc-step-arrow::after{content:"→";position:absolute;left:50%;top:24px;transform:translateX(-50%);background:#fff;border-radius:50%;width:32px;text-align:center;font-size:20px}
.pc-main .pbox{padding:20px;background:var(--ink);color:#fff;border-radius:var(--rp-radius)}
.pc-main .pbox .ph{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:15px}
.pc-main .pbox .cp{padding:8px 16px;background:#fff;color:var(--ink);border:0;border-radius:var(--rp-radius);cursor:pointer;font-size:15px}
.pc-main .pbox .pr{margin-top:16px;font:400 var(--rp-body)/1.85 ui-monospace,Menlo,monospace;white-space:pre-wrap;max-height:9.25em;overflow:hidden}
.pc-main .pbox .pr-full{max-height:none}
.pc-main .pbox mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:4px}
.pc-main .pbox .more-pr{margin-top:12px;padding:0;border:0;background:none;color:#fff;font-size:15px;text-decoration:underline;cursor:pointer}
.pc-tl{padding:16px;border:1px solid #ccc;border-radius:var(--rp-radius);background:#fff}
.pc-tl-ruler{position:relative;height:20px;margin-left:52px;font:700 13px/1.4 var(--en-nav)}
.pc-tl-ruler span{position:absolute;transform:translateX(-50%)}
.pc-tl-tr{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;margin-top:12px}
.pc-tl-l{font-size:13px;font-weight:700}
.pc-tl-v,.pc-tl-b{position:relative}
.pc-tl-b{height:36px;border-block:1px solid #ccc}
.pc-tl-b i{position:absolute;top:8px;bottom:8px;width:2px;background:#888}
.pc-tl-b i.on{top:4px;bottom:4px;width:4px;background:var(--ink)}
.pc-tl-cut{position:absolute;top:-4px;bottom:-4px;width:3px;background:var(--ink)}

/* D: 確かめる。端末の保存が使えなくても、その場の操作はできる。 */
.pc-check{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px;max-width:36em}
.pc-check label{display:flex;align-items:flex-start;gap:16px;padding:16px 20px;border:1px solid #ccc;border-radius:var(--rp-radius);cursor:pointer}
.pc-check input{flex:none;width:20px;height:20px;margin:4px 0 0;accent-color:var(--ink)}
.pc-check label:has(input:checked){background:#F2F2F0}

/* NEXT と、最初は 1 行だけの MORE。 */
.pc-main .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pc-main .cd{display:block;color:var(--ink);text-decoration:none}
.pc-main .cd .m{display:block;position:relative;overflow:hidden;border-radius:var(--rp-radius)}
.pc-main .cd img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .2s}
.pc-main .cd:hover img{transform:scale(1.03)}
.pc-main .cd .nm{display:block;margin-top:12px;font-size:var(--rp-h3);font-weight:700;line-height:1.5}
.pc-main .cd .ef{display:block;margin-top:8px;font-size:15px;line-height:1.85}
.pc-main .cd .lk{font-size:13px}
.pc-next-link{display:inline-block;margin-top:28px;font-size:15px;text-underline-offset:4px}
.pc-more summary.pc-mh{display:flex;flex-direction:row;align-items:center;gap:20px;margin:0;cursor:pointer;list-style:none}
.pc-more summary::-webkit-details-marker{display:none}
.pc-more summary::after{content:"＋";margin-left:auto;font-size:24px}
.pc-more details[open]>summary::after{content:"−"}
.pc-sl-nav{display:flex;justify-content:flex-end;gap:12px;margin:24px 0 16px}
.pc-sl-b{width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;font-size:20px}
.pc-sl{list-style:none;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px) / 3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory}
.pc-sl li{scroll-snap-align:start}
.pc-sl img{width:100%;border-radius:var(--rp-radius)}
/* このページの共通ヘッダー・フッターの小札も 13px 未満にしない。 */
body.pc .hd .lang :is(.ja,.sep,.en),body.pc .mnav-links a,body.pc .mnav-ft span,body.pc .mnav-ft .mnav-lang,body.pc .ft .ft-tag,body.pc .ft h4 small,body.pc .ft li a,body.pc .mnav-in>a small,body.pc .ft2-legal a,body.pc .ft2-copy{font-size:13px!important}

/* 切り替え幅は 760px の 1 か所。絵の前→後は横並び、文だけなら縦に積む。 */
@media (max-width:760px){
 .pc{--rp-h3:17px}
 .pc-hero-grid{grid-template-columns:minmax(0,1fr);gap:20px}
 .pc-hero-title,.pc-vid,.pc-hero-copy{grid-column:1;grid-row:auto}
 .pc-main .pc-crumb{margin-bottom:24px}
 .pc-kind{margin-bottom:8px}
 .pc-hero-actions{margin-top:20px}
 .pc-mh{gap:8px;margin-bottom:24px}
 .pc-scns{gap:12px}
 .pc-scn h3{font-size:var(--rp-h3);margin-top:8px}
 .pc-comparison{gap:12px 28px}
 .pc-cmp{grid-template-columns:minmax(0,1fr);row-gap:12px}
 .pc-cmp-pics{grid-template-columns:minmax(0,1fr)}
 .pc-cmp-pics>.pc-cutbar{display:none}
 .pc-cmp>.pc-cutbar{display:none}
 .pc-fail-f{grid-template-columns:minmax(0,1fr);gap:8px}
 .pc-fail-f>.pc-compare-arrow{justify-self:center;transform:rotate(90deg)}
 .pc-compare-arrow{font-size:20px}
 @media (width < 760px){
  .pc-review-grid{grid-template-columns:minmax(0,1fr)}
  .pc-text-pair{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .pc-text-pair:has(>.pc-text-arrow){grid-template-rows:1fr auto 1fr}
  .pc-text-card{padding:20px}
  .pc-text-arrow::before{content:"↓"}
 }
 .pc-step{grid-template-columns:minmax(0,1fr);padding:20px;gap:16px}
 .pc-min .pc-step-nofig{grid-template-columns:minmax(0,1fr)}
 .pc-step-t>p{margin-top:8px}
 .pc-flow-f{column-gap:8px}
 .pc-flow-ar::before{width:28px;height:28px;font-size:18px}
 .pc-main .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
 .pc-more summary.pc-mh{gap:12px}
 .pc-sl{grid-auto-columns:84%}
}
@media (prefers-reduced-motion:reduce){
 .pc-main *{transition:none!important;scroll-behavior:auto!important}
}