/* v023(2026-09-26 Claude Code Opus 5.5)
   本人「1日で、なんでも作れる。みたいな感じがいい」「作った実物から。ではなく、初日、君が作れる様になるもの。…AIパクくんのLPの演出を最大限に転用して」
   「WHY？Agentic Marketing DIVEパーツを、序盤に入れたい。」
   → WHY の1枚絵の節(#why)と、配布LP aipakukun.com の作品カードのレール(12枚)を深海の見た目で。v022-apple.css の後に読む。 *//* WHY の節: 冒頭の絵と同じ横幅(PC 1200)・スマホは縦の絵を画面いっぱいに(v21-bleed) */#why img{aspect-ratio:2/3!important}/* 作品のレール(配布LP site.v028 の .rail/.work-card を転用・深海のガラスに) */.v23-rail-wrap{margin-top:56px}.v23-rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  width:var(--cw);margin-left:calc(50% - calc(var(--cw)*0.5));padding:8px max(24px,calc((var(--cw) - var(--ap-wide))/2)) 36px;box-sizing:border-box;scroll-padding-inline:max(24px,calc((var(--cw) - var(--ap-wide))/2))}.v23-rail::-webkit-scrollbar{display:none}.v23-rail:focus-visible{outline:2px solid var(--ap-gold);outline-offset:-2px}.v23-card{margin:0;flex:0 0 clamp(280px,calc(var(--cw)*0.3),420px);scroll-snap-align:start;border-radius:24px;overflow:hidden;background:#0a2230;
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);transition:transform .35s ease,box-shadow .35s ease}.v23-card img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}@media (hover:hover){.v23-card:hover{transform:translateY(-6px);box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(227,201,143,.35)}}.v23-rail-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:4px}.v23-rail-controls button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.06);color:var(--ap-t1);
  font-size:18px;line-height:1;cursor:pointer;transition:background .25s ease,border-color .25s ease,opacity .25s ease}.v23-rail-controls button:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}.v23-rail-controls button:disabled{opacity:.3;cursor:default}.v23-rail-pos{min-width:88px;text-align:center;font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.12em;color:var(--ap-t2)}.v23-rail-note{max-width:640px;margin:20px auto 0;text-align:center;font-size:13px;line-height:1.8;color:var(--ap-t2)}/* ここから下は実物(映像・歌広告・LP・漫画LP・バナー)。レールと別の束だと分かる間と一行 */.v23-real-label{margin:88px auto 28px;text-align:center;font-size:15px;letter-spacing:.06em;color:var(--ap-t1)}.v23-real-label::before{content:"";display:block;width:48px;height:1px;margin:0 auto 22px;background:rgba(227,201,143,.6)}.v23-rail-wrap{margin-top:36px}.v23-rail{gap:16px;padding:6px 16px 28px;scroll-padding-inline:16px}.v23-card{flex-basis:calc(var(--cw)*0.82);max-width:390px;border-radius:20px;scroll-snap-align:center}.v23-rail-note{padding:0 16px;font-size:13px}.v23-real-label{margin:64px 16px 22px}@media (prefers-reduced-motion:reduce){.v23-card{transition:none}.v23-card:hover{transform:none}}/* 2回目(目視): 伝えたい「初日、きみがつくれるようになるもの。」が小さな飾りの字だった → 見出しの上の大きめの金の一行に */#work-gallery .v23-kicker{font-size:21px!important;letter-spacing:.14em!important;line-height:1.6!important;color:var(--ap-gold)!important;font-weight:600!important;margin-bottom:10px!important}#work-gallery .v23-kicker{font-size:16px!important;letter-spacing:.1em!important}/* 注記と境目の一行が語の途中で折れた(「案件ご/とに」「架空の商/品」) → 文節の <wbr> で折る */.v23-rail-note,.v23-real-label,#work-gallery .v23-kicker{word-break:keep-all;overflow-wrap:anywhere}/* PC・タブレット: 右端の水深の目盛りにカードが重なった → レールは本文の幅に収め、PCは3枚・タブレットは2枚がぴったり並ぶ *//* 3回目(タブレットの目視・v022から続いていた崩れ): v020-worldview.css が 700〜1100px で冒頭の絵を600px・節の絵を560pxに抑え、枠(762px)だけ残っていた。
   冒頭は押せる範囲(.panel-cta・枠に対する%)が絵の下の何もない所にずれた。
   → 正方形の絵を使う 701〜900px は冒頭の枠ごと600pxに。横長の絵を使う 901〜1100px と WHY の絵は枠いっぱいに。 *//* 6回目(総点検 a1): 横向きタブレット(1080px・密度2倍)で絵を枠いっぱいにすると元の画素の1.34倍に引き伸ばされた(v020 が600pxに抑えていた理由)
   → 700〜1100px は絵を600pxのまま、枠の方を600pxにそろえる(押せる範囲が絵に重なる)。WHY はこの幅では縦の絵(スマホと同じ)を600pxで出し、小さな行も読める大きさに *//* 4回目(目視): カードの影が横スクロールの箱で四角く切られ、カードの後ろに薄い面が見えた → 影を軽くし、影の入る余白を箱の内側に取る(外側は負の余白で相殺) */.v23-card{box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.08)}@media (hover:hover){.v23-card:hover{box-shadow:0 24px 44px rgba(0,0,0,.44),0 0 0 1px rgba(227,201,143,.35)}}.v23-rail{padding-bottom:56px;margin-bottom:-28px}/* 5回目(押す確認): 影の余白を取ったレールの下端が矢印の列に重なり、スマホで矢印が押せなかった → 矢印の列を前面に */.v23-rail-controls{position:relative;z-index:2}