/* 制作例の下見（10案）。単位は .shot の幅基準（cqw）。写真の場所は .ph（何の写真かを data-n で表示） */
.pvx{position:absolute;inset:0;overflow:hidden;font-family:var(--sans);color:#333;text-align:left;line-height:1.35}
.pvx *{box-sizing:border-box}
.pvx .ph{position:absolute;display:block;background:linear-gradient(135deg,var(--p1,#b9b2a6),var(--p2,#6f665a));overflow:hidden}
.pvx .ph::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 1px,transparent 1px 1.4cqw)}
.pvx .ph::after{content:attr(data-n);position:absolute;left:1cqw;bottom:.8cqw;font-size:1.25cqw;letter-spacing:.06em;color:rgba(255,255,255,.85);font-style:normal}
.pvx .hd{position:absolute;left:3.5cqw;right:3.5cqw;top:2.6cqw;display:flex;align-items:center;justify-content:space-between;gap:2cqw;z-index:3}
.pvx .hd em{font-style:normal;font-size:1.2cqw;letter-spacing:.08em;opacity:.8;white-space:nowrap}
.pvx .hd--w{color:#fff}
.pvx .lg{font-size:2cqw;font-weight:900;letter-spacing:.06em;display:flex;align-items:baseline;gap:1cqw}
.pvx .lg small{font-size:1.1cqw;font-weight:700}
.pvx .lg--serif{font-family:var(--serif);font-weight:600;letter-spacing:.18em}
.pvx .lg--round{font-family:"Zen Maru Gothic",var(--sans)}
.pvx .lg--wide{font-weight:500;letter-spacing:.6em;font-size:1.8cqw}
.pvx .lg--thin{font-weight:500;font-size:1.8cqw}
.pvx .pill{font-style:normal;font-size:1.3cqw;font-weight:700;padding:.8cqw 2cqw;border-radius:99px;background:var(--ac);color:var(--on,#fff);opacity:1!important}
.pvx .tx{position:absolute;z-index:2;display:grid;gap:1.6cqw;justify-items:start}
.pvx .h{font-size:4.4cqw;line-height:1.35;font-weight:700}
.pvx .h--serif{font-family:var(--serif);font-weight:600}
.pvx .h--round{font-family:"Zen Maru Gothic",var(--sans);font-weight:700}
.pvx small{font-size:1.3cqw;line-height:1.6}
.pvx .bt{font-style:normal;font-size:1.4cqw;font-weight:700;padding:1cqw 2.2cqw;background:var(--ac);color:var(--on,#fff)}
.pvx .bt--w{background:#fff;color:#1C2A3A}
.pvx .bt--line{background:none;border:1px solid currentColor;color:inherit}
.pvx .bt--under{background:none;padding:0 0 .4cqw;border-bottom:1px solid currentColor;color:inherit;font-weight:500}

/* 1 建設A：全面の施工写真＋重なる事業カード3枚（暗い面・白い明朝） */
.pv-construction-a{background:#1C2A3A;--p1:#6d7d8c;--p2:#22303d}
.pv-construction-a .ph--full{inset:0 0 34% 0;background:linear-gradient(90deg,#1C2A3A 0 22%,rgba(28,42,58,.4) 55%,transparent),linear-gradient(135deg,#8a6b4f,#2b3946 60%)}
.pv-construction-a .tx{left:5cqw;top:14cqw;color:#fff;max-width:40cqw}
.pv-construction-a .cards3{position:absolute;left:5%;right:5%;top:52%;bottom:6%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;z-index:2}
.pv-construction-a .cards3 i{position:relative;background:#fff;box-shadow:0 1cqw 2cqw rgba(0,0,0,.25);display:grid;grid-template-rows:1fr auto;font-style:normal}
.pv-construction-a .cards3 .ph{position:relative;display:block}
.pv-construction-a .cards3 b{padding:1cqw 1.4cqw;font-size:1.5cqw;color:#1C2A3A}

/* 2 建設B：画面の半分を占める極太の見出し＋斜めの写真パネル */
.pv-construction-b{background:#FAFAF8;--ac:#F08A24;--on:#141414;--p1:#c9a27a;--p2:#4a3a2c;color:#141414}
.pv-construction-b .giant{position:absolute;left:3.5cqw;top:9cqw;z-index:2}
.pv-construction-b .giant b{display:block;font-size:8.4cqw;line-height:1.08;font-weight:900;letter-spacing:-.02em}
.pv-construction-b mark{background:none;color:#F08A24}
.pv-construction-b .diag{position:absolute;left:47%;right:0;top:12%;bottom:0;clip-path:polygon(10% 0,100% 0,100% 100%,0 100%)}
.pv-construction-b .diag .ph:nth-child(1){left:0;top:0;width:62%;height:62%}
.pv-construction-b .diag .ph:nth-child(2){left:63%;top:0;right:0;height:62%;--p1:#9fb0bf;--p2:#3b4a58}
.pv-construction-b .diag .ph:nth-child(3){left:0;top:63%;right:0;bottom:0;--p1:#d7b48f;--p2:#6b4e33}
.pv-construction-b .para{position:absolute;left:43%;top:64%;z-index:3;background:#F08A24;color:#fff;font-weight:900;font-size:1.9cqw;line-height:1.3;padding:1.4cqw 3cqw;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%)}

/* 3 士業A：深緑の面（波線）に縦書きの明朝＋手元の写真＋下の生成りの帯 */
.pv-office-a{background:#F1ECE4;--p1:#c8b49a;--p2:#6e5a44;color:#fff}
.pv-office-a .panel{position:absolute;left:0;top:0;width:50%;height:74%;background:#23402F;border-radius:0 46% 38% 0/0 60% 40% 0;z-index:1}
.pv-office-a .ph--r{left:44%;right:0;top:0;height:74%}
.pv-office-a .tate{position:absolute;left:8cqw;top:9cqw;height:52%;z-index:2;writing-mode:vertical-rl;display:flex;gap:3cqw}
.pv-office-a .tate b{font-family:var(--serif);font-weight:600;font-size:3.6cqw;line-height:1.7;letter-spacing:.14em}
.pv-office-a .tate small{font-family:var(--serif);font-size:1.3cqw;letter-spacing:.2em;opacity:.85}
.pv-office-a .bt{position:absolute;left:30cqw;top:58%;z-index:2;color:#fff}
.pv-office-a .band{position:absolute;left:0;right:0;bottom:0;height:26%;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:1.4cqw;align-items:center;padding:0 3cqw;color:#23402F;z-index:2}
.pv-office-a .band b{font-family:var(--serif);font-size:1.7cqw}
.pv-office-a .band i{font-style:normal;font-size:1.4cqw;font-weight:700;background:#fff;padding:2.4cqw 1.4cqw;border-top:.4cqw solid #A47C55}

/* 4 士業B：相談の写真を吹き出し3つが囲む＋相談の流れ3段（丸ゴシック） */
.pv-office-b{background:#F7F3EA;--ac:#7E9C84;--p1:#d9cdb6;--p2:#7d7766;color:#2F4A3A}
.pv-office-b .tx{left:4cqw;top:14cqw;max-width:36cqw}
.pv-office-b .ph--photo{left:47%;right:5%;top:15%;height:52%;border-radius:2.4cqw}
.pv-office-b .bubble{position:absolute;z-index:3;background:#fff;border:1px solid #7E9C84;border-radius:1.6cqw;padding:1cqw 1.8cqw;font-size:1.45cqw;font-weight:700;box-shadow:0 .6cqw 1.4cqw rgba(0,0,0,.08)}
.pv-office-b .bubble::after{content:"";position:absolute;bottom:-1cqw;left:2.4cqw;border:.6cqw solid transparent;border-top:.8cqw solid #fff}
.pv-office-b .b1{left:42%;top:12%}.pv-office-b .b2{right:2%;top:30%}.pv-office-b .b3{left:44%;top:56%}
.pv-office-b .steps{position:absolute;left:4%;right:4%;bottom:5%;height:18%;background:#fff;border-radius:1.6cqw;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:0 2cqw;z-index:2}
.pv-office-b .steps i{font-style:normal;font-size:1.6cqw;font-weight:700;display:flex;align-items:center;gap:1cqw}
.pv-office-b .steps b{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#7E9C84;color:#fff;font-size:1.6cqw}
.pv-office-b .steps i:not(:last-child)::after{content:"→";margin-left:auto;margin-right:2cqw;color:#D9A441}

/* 5 美容A：余白の中に高さ違いのアーチ形の写真3枚（小さな明朝） */
.pv-salon-a{background:#F3EEE7;--p1:#d8c6b2;--p2:#8a7563;color:#4A3F38}
.pv-salon-a .circle{position:absolute;left:52%;top:10%;width:30cqw;height:30cqw;border-radius:50%;background:#E6DBCD}
.pv-salon-a .arch{border-radius:50cqw 50cqw 0 0}
.pv-salon-a .a1{left:36%;width:15%;top:26%;bottom:12%}
.pv-salon-a .a2{left:55%;width:21%;top:13%;bottom:4%;--p1:#cdb7a2;--p2:#5e4c40}
.pv-salon-a .a3{left:79%;width:16%;top:38%;bottom:18%}
.pv-salon-a .tx--small{left:6cqw;top:24cqw}
.pv-salon-a .h{font-size:2.8cqw;line-height:1.6;letter-spacing:.08em}

/* 6 美容B：色面のタイル＋巨大な NEW OPEN（極太） */
.pv-salon-b{background:#F3ECE3;--ac:#C7654A;--p1:#e2c2b4;--p2:#8b5a4a;color:#4A3F38}
.pv-salon-b .t1{position:absolute;left:0;top:0;width:42%;height:60%;background:#C7654A}
.pv-salon-b .t2{position:absolute;left:0;top:60%;width:42%;bottom:0;background:#F3ECE3}
.pv-salon-b .t3{left:42%;top:0;width:30%;bottom:0}
.pv-salon-b .t4{position:absolute;left:72%;right:0;top:0;bottom:0;background:#A9B9A0;display:grid;align-content:center;justify-items:center;gap:1.6cqw}
.pv-salon-b .t4 i{display:grid;place-items:center;width:9cqw;height:9cqw;border-radius:50%;background:#fff;font-style:normal;font-size:1.4cqw;font-weight:700}
.pv-salon-b .neo{position:absolute;left:3cqw;top:10cqw;z-index:3;font-size:10.5cqw;line-height:.92;font-weight:900;color:#fff;letter-spacing:-.02em;mix-blend-mode:normal}
.pv-salon-b .tx2{position:absolute;left:3.5cqw;top:62%;z-index:3;display:grid;gap:1.2cqw;justify-items:start}
.pv-salon-b .tx2 .h{font-size:2.8cqw}
.pv-salon-b .hd{z-index:4;color:#fff}

/* 7 不動産A：右半分が街の線画地図＋ピンと丸い写真（細い明朝） */
.pv-realestate-a{background:#F7F6F2;--p1:#b9d6d3;--p2:#3A8C88;color:#3A3A3A}
.pv-realestate-a .tx{left:5cqw;top:17cqw;max-width:34cqw}
.pv-realestate-a .map{position:absolute;left:40%;top:12%;width:58%;height:84%;fill:none;stroke:#3A8C88;stroke-width:.35}
.pv-realestate-a .map .river{fill:#D3ECEA;stroke:none}
.pv-realestate-a .map .rail{stroke-dasharray:2 1;stroke-width:.5}
.pv-realestate-a .pin{position:absolute;z-index:2;display:grid;justify-items:center;gap:.4cqw;font-size:1.2cqw;font-weight:700}
.pv-realestate-a .pin .ph{position:relative;width:8cqw;height:8cqw;border-radius:50%;border:.4cqw solid #fff;box-shadow:0 .4cqw 1cqw rgba(0,0,0,.15)}
.pv-realestate-a .pin::before{content:"";order:2;width:0;height:0;border:1cqw solid transparent;border-top:1.4cqw solid #3A8C88;margin-top:-.6cqw}
.pv-realestate-a .p1{left:50%;top:18%}.pv-realestate-a .p2{left:74%;top:12%}.pv-realestate-a .p3{left:62%;top:52%}.pv-realestate-a .p4{left:84%;top:58%}

/* 8 不動産B：上に写真、下半分を占める入口カード3枚（太めの丸ゴシック） */
.pv-realestate-b{background:#fff;--ac:#3A8C88;--p1:#e6dccb;--p2:#a0896c;color:#3A3A3A}
.pv-realestate-b .ph--top{left:0;right:0;top:0;height:56%;background:linear-gradient(90deg,#fff 0 30%,rgba(255,255,255,0) 60%),linear-gradient(135deg,#e9dfcf,#9d8b6f)}
.pv-realestate-b .tx{left:5cqw;top:10cqw}
.pv-realestate-b .doors{position:absolute;left:4%;right:4%;top:44%;bottom:5%;display:grid;grid-template-columns:repeat(3,1fr);gap:1.8cqw;z-index:2}
.pv-realestate-b .doors i{background:#fff;border-radius:1.6cqw;box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.12);display:grid;justify-items:center;align-content:center;gap:.8cqw;font-style:normal}
.pv-realestate-b .doors svg{width:9cqw;height:6.5cqw;fill:none;stroke:#3A8C88;stroke-width:1.6}
.pv-realestate-b .doors b{font-family:"Zen Maru Gothic",var(--sans);font-size:2.6cqw}
.pv-realestate-b .doors em{font-style:normal;font-size:1.2cqw;color:#fff;background:#3A8C88;padding:.5cqw 1.6cqw;border-radius:99px}

/* 9 採用A：大小の写真の雑誌グリッド＋黄色い文字のタイル（極太） */
.pv-recruit-a{background:#fff;--ac:#F2C230;--on:#1E2F55;--p1:#9fb0c8;--p2:#2c3c5c}
.pv-recruit-a .grid{position:absolute;inset:8% 0 0 0;display:grid;grid-template-columns:38fr 32fr 30fr;grid-template-rows:1fr 1fr 1fr;gap:.5cqw}
.pv-recruit-a .grid .ph{position:relative}
.pv-recruit-a .g1{grid-row:1/4}
.pv-recruit-a .g2{grid-column:2;grid-row:1/3;background:#F2C230;color:#1E2F55;padding:2.4cqw;display:grid;align-content:center;gap:1cqw}
.pv-recruit-a .g2 small{font-weight:900;letter-spacing:.3em}
.pv-recruit-a .g2 b{font-size:5cqw;line-height:1.12;font-weight:900}
.pv-recruit-a .g3{grid-column:3;grid-row:1/3;--p1:#c8b49a;--p2:#5a4a3a}
.pv-recruit-a .g4,.pv-recruit-a .g5,.pv-recruit-a .g6,.pv-recruit-a .g7{grid-row:3}
.pv-recruit-a .grid{grid-template-areas:none}
.pv-recruit-a .g4{grid-column:2;--p1:#b8c2cc;--p2:#46525e}.pv-recruit-a .g5{grid-column:3;--p1:#d6c5a8;--p2:#6d5c45}
.pv-recruit-a .g6,.pv-recruit-a .g7{display:none}
.pv-recruit-a .hd--bar{top:0;left:0;right:0;height:8%;padding:0 3cqw;background:#1E2F55;color:#fff}

/* 10 採用B：白地の書類のような募集要項の表＋細い縦写真1枚（細いゴシック） */
.pv-recruit-b{background:#FCFCFA;--ac:#1E2F55;--p1:#7b8fb3;--p2:#1c2a46;color:#1E2F55}
.pv-recruit-b .hd em{opacity:1}
.pv-recruit-b .doc{position:absolute;left:6cqw;top:13cqw;width:56cqw;display:grid;gap:1.8cqw;justify-items:start}
.pv-recruit-b .doc>b{font-size:2.4cqw;font-weight:500;letter-spacing:.06em}
.pv-recruit-b dl{width:100%;display:grid;grid-template-columns:12cqw 1fr;margin:0;border-top:1px solid #C9CFDA}
.pv-recruit-b dt,.pv-recruit-b dd{margin:0;padding:1.5cqw 0;border-bottom:1px solid #C9CFDA;font-size:1.6cqw}
.pv-recruit-b dt{color:#8A8F99}
.pv-recruit-b dd{font-weight:700}
.pv-recruit-b .ph--slim{left:74%;width:18%;top:12%;bottom:6%}

/* 動き（V2：枠→主題→ラベル）：写真の面→文字→仕掛けの順に出る。画面に入ったときだけ */
.js .shot .pvx>*{opacity:0;transform:translateY(1.6cqw);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.js .shot .pvx>.ph,.js .shot .pvx>.panel,.js .shot .pvx>.t1,.js .shot .pvx>.t2,.js .shot .pvx>.t4,.js .shot .pvx>.circle,.js .shot .pvx>.grid{transform:scale(1.04);transition-delay:.3s}
.js .shot .pvx>.hd{transition-delay:.45s}
.js .shot .pvx>.tx,.js .shot .pvx>.tx2,.js .shot .pvx>.tate,.js .shot .pvx>.giant,.js .shot .pvx>.neo,.js .shot .pvx>.doc{transition-delay:.6s}
.js .shot .pvx>.cards3,.js .shot .pvx>.bubble,.js .shot .pvx>.steps,.js .shot .pvx>.band,.js .shot .pvx>.doors,.js .shot .pvx>.pin,.js .shot .pvx>.para,.js .shot .pvx>.diag,.js .shot .pvx>.map,.js .shot .pvx>.bt,.js .shot .pvx>.arch{transition-delay:.85s}
.js .shot .pvx>.b2,.js .shot .pvx>.p2,.js .shot .pvx>.a2{transition-delay:1s}
.js .shot .pvx>.b3,.js .shot .pvx>.p3,.js .shot .pvx>.a3{transition-delay:1.15s}
.js .shot .pvx>.p4{transition-delay:1.3s}
.js .shot.in .pvx>*{opacity:1;transform:none}
.shot[data-ok="1"] .pvx{display:none}
.lightbox__img .pvx>*{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.js .shot .pvx>*{opacity:1;transform:none;transition:none}}
/* 実画面で見えた重なりの修正 */
.pv-construction-a .tx{top:10cqw;gap:1.2cqw}
.pv-construction-a .cards3{top:60%}
.pv-construction-b .giant b{font-size:7.2cqw}
.pv-office-a .tate{top:8cqw;height:60%;left:9cqw}
.pv-office-a .tate b{font-size:3.1cqw}
.pv-office-a .bt{left:4cqw;top:62%}
.pv-office-b .tx{max-width:42cqw}
.pv-office-b .h{font-size:3.5cqw}
/* 手描きの図版をやめ、生成画像の枠に置き換えた部分（2026-11-06） */
.pv-realestate-a .ph--map{left:40%;right:0;top:10%;bottom:0;--p1:#d9ebe8;--p2:#8fbfba}
.pv-realestate-a .pin::before{content:none}
.pv-realestate-a .pin .ph{--p1:#9ccdc8;--p2:#3A8C88}
.pv-realestate-b .doors i{grid-template-rows:1fr auto auto;padding:1.4cqw 1.4cqw 1.6cqw}
.pv-realestate-b .doors .ph{position:relative;width:100%;border-radius:1cqw;--p1:#d3ecea;--p2:#6fb0aa}
.pvx .st{position:absolute;right:2.4cqw;bottom:1.8cqw;z-index:5;font-size:1.15cqw;letter-spacing:.06em;padding:.4cqw 1cqw;background:rgba(255,255,255,.85);color:#555}
.js .shot .pvx>.st{transition-delay:1.2s}
.pv-office-a .tate small{white-space:nowrap}