/* v031(2026-09-29 Claude Code Opus 5.5): PC を主役に(本人「PCをメインにするわ。PCの方が大事だけど、もちろんスマホも原理原則を大事にして」・FB-695)。
   タブレット以下(〜1023px)は v030 の1列のまま。PC(1024px〜)だけ、main を広げて節ごとに2段組み・格子へ組み直す。
   組み直さない節は今までどおり真ん中の480pxの列(下の既定)。参考: free web「マジガチLP制作」から学んだ PC の横幅の使い方(research/fwh/)。 */
.v31-pc-only{display:none!important}
@media (min-width:1024px){
  :root{--pcw:min(1160px,calc(100vw - 80px))}
  .v31-pc-only{display:revert!important}
  /* revert だと header は block に戻るので、横並びの物は個別に */
  #v31-head.v31-pc-only{display:flex!important}
  .v31-sp-only{display:none!important}
  /* 1列の枠を PC では外す(v025-column.css の main 480px を上書き)。節の既定は480pxの列のまま */
  main,#afterdive{max-width:none!important}
  #afterdive>*{max-width:480px;margin-left:auto!important;margin-right:auto!important}
  #afterdive>.v31-wide{max-width:var(--pcw)!important;width:var(--pcw)}
  #afterdive>.v31-full{max-width:none!important;width:100%}
  #bgmBtn{right:24px!important}
  .chapter-nav{left:24px!important}
  .wv-depth{right:8px!important}
  /* 2段組みの型: 左に縦の1枚絵(列の幅 440px)、右に本文 */
  .v31-split{display:grid;grid-template-columns:440px minmax(0,1fr);gap:56px;align-items:center}
  .v31-split.rev{grid-template-columns:minmax(0,1fr) 440px}
  .v31-split.rev>.v31-split-media{order:2}
  .v31-split-media>*{margin:0!important;max-width:440px!important;width:100%!important}
  .v31-split-media img{width:100%;height:auto;border-radius:18px}
  .v31-split-body{min-width:0}
  .v31-split-body>*{max-width:600px}
  /* 固定のヘッダー(温度の違う2つの出口) */
  .v31-head{position:fixed;left:0;right:0;top:0;z-index:70;display:flex;align-items:center;gap:18px;padding:10px 28px;background:rgba(4,18,28,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(227,201,143,.18);transform:translateY(-100%);transition:transform .35s ease}
  .v31-head.on{transform:none}
  .v31-head .brand{color:#f4ecd9;font-weight:800;letter-spacing:.06em;font-size:15px;text-decoration:none;margin-right:auto}
  .v31-head nav{display:flex;gap:22px}
  .v31-head nav a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;min-width:36px;padding:0 4px;color:#c9d6de;font-size:13.5px;text-decoration:none}
  .v31-head .brand{display:inline-flex;align-items:center;min-height:40px}
  .v31-head nav a:hover{color:#fff}
  .v31-head .cta-light{color:var(--ap-gold,#e3c98f);border:1px solid rgba(227,201,143,.6);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;text-decoration:none}
  .v31-head .cta-strong{background:linear-gradient(180deg,#f3d995,#d8b465);color:#1c1406;border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:800;text-decoration:none}
  @media (prefers-reduced-motion:reduce){.v31-head{transition:none}}
}

/* ---- PC で横に広げる既存の節(DOM は変えず CSS だけ。学び58「PC は横幅を使う」・24「PC にはPCの流儀」) ---- */
@media (min-width:1024px){
  /* 最初の入口: 日程・条件・ボタンを横一列に */
  #afterdive>#v27-start{max-width:var(--pcw)!important;width:var(--pcw);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:22px 30px;text-align:left}
  #v27-start .v27-facts-date{margin:0;font-size:17px;line-height:1.6}
  #v27-start .v27-facts{justify-content:flex-start;margin:0}
  #v27-start .v27-cta{margin:0!important;width:auto;min-width:340px;padding-inline:28px}
  #v27-start .v30-start-note{grid-column:1/-1;margin:-6px 0 0;text-align:right}
  /* 作品(初日につくれるもの): 横送り → 4列の格子 */
  #afterdive>#work-gallery{max-width:var(--pcw)!important;width:var(--pcw)}
  #work-gallery .v23-rail{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:22px!important;overflow:visible!important;scroll-snap-type:none!important;padding:0!important;width:100%!important;max-width:none!important;margin:0!important}
  #work-gallery .v23-rail>*{width:auto!important;flex:none!important;margin:0!important}
  #work-gallery .v23-rail-wrap>:not(.v23-rail),#work-gallery .v23-nav,#work-gallery .v23-count{display:none!important}
  /* スキル工房 8チーム: 横送り → 4列 */
  #afterdive>#skills{max-width:var(--pcw)!important;width:var(--pcw)!important}
  #skills .v28-crew{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:18px!important;overflow:visible!important;padding:0!important}
  #skills .v28-crew>*{width:auto!important;flex:none!important;margin:0!important}
  #skills .v28-hint,#talks .v29-hint,#evidence-voices .v29-hint,#v27-day1 .v27-rail-hint{display:none!important}
  /* 登壇: 3列 */
  #talks .v29-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:18px!important;overflow:visible!important}
  #talks .v29-rail>*{width:auto!important;flex:none!important}
  /* 参加者の声: 3列 */
  #afterdive>#evidence-voices{max-width:var(--pcw)!important;width:var(--pcw)}
  #evidence-voices .v29-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:18px!important;overflow:visible!important;align-items:start}
  #evidence-voices .v29-rail>*{width:auto!important;flex:none!important;margin:0!important}
  /* 1日目の3つの場面: 3列 */
  #afterdive>#v27-day1{max-width:var(--pcw)!important;width:var(--pcw)}
  #v27-day1 .v27-day1-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;max-width:none!important;gap:22px!important;overflow:visible!important}
  #v27-day1 .v27-day1-rail>*{width:auto!important;flex:none!important;margin:0!important}
  /* 便り: 見出しの絵(左)と、10枚の札(右・5列×2段) */
  #afterdive>#letters{max-width:var(--pcw)!important;width:var(--pcw);display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:48px;align-items:start;text-align:left}
  #letters>.v30-panel{grid-row:1/span 9;margin:0!important;width:auto!important;max-width:none!important}
  #letters>.v30-panel img{width:100%!important;max-width:none!important;margin:0!important}
  #letters>.v30-panel img{border-radius:18px}
  #letters>*:not(.v30-panel){grid-column:2;margin-left:0!important;margin-right:0!important}
  #letters .v30-hint{display:none}
  #letters .v30-rail{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important;padding:0!important;margin:0!important;width:100%!important;max-width:none!important}
  #letters .v30-card{max-width:none}
  #letters .v30-card figcaption{font-size:12px}
  #letters .v30-cta{margin:18px 0 0!important;max-width:420px}
  /* 招待状: 絵(左)と条件(右) */
  #afterdive>#participation-plans{max-width:var(--pcw)!important;width:var(--pcw)!important;display:grid;grid-template-columns:420px minmax(0,1fr);column-gap:48px;align-items:start}
  #participation-plans>*{grid-column:2}
  #participation-plans>.wv-invite-head,#participation-plans>figure{grid-column:1}
  #participation-plans>figure{grid-row:2/span 12;position:sticky;top:96px}
  #participation-plans>.wv-invite-head{grid-row:1}
  /* 条件の1つ目(箇条)を1〜2段にまたがらせ、左の絵が見出しのすぐ下から始まるように */
  #participation-plans>ul{grid-row:1/span 2}
  #afterdive>#participation-plans{margin-left:auto!important;margin-right:auto!important}
  /* 日程・会場(左)とよくある質問(右) */
  #afterdive>#schedule{max-width:var(--pcw)!important;width:var(--pcw)!important;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:40px;align-items:start}
  #schedule>#faq{grid-column:2;grid-row:1/span 4;margin-top:0!important}
  /* 最後の入口: 札は5列 */
  #afterdive>#p25{max-width:880px!important;width:880px}
  #p25 .v30-rail-sm{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;overflow:visible!important;margin:18px 0 0!important;padding:0!important;width:100%!important;max-width:none!important}
  #p25 .v30-rail-sm .v30-card{max-width:none}
}

/* ---- v031 の新しい部品を PC で(2段組み・格子)。学び: 縦の絵は左の列、右に必ず相手(Fable Q4) ---- */
@media (min-width:1024px){
  #v25-bar{display:none!important}
  #afterdive>.v31-pair{max-width:var(--pcw)!important;width:var(--pcw);display:grid;grid-template-columns:440px minmax(0,1fr);column-gap:64px;align-items:center}
  #afterdive>.v31-pair.rev{grid-template-columns:minmax(0,1fr) 440px}
  .v31-pair.rev>.v31-pair-media{order:2}
  .v31-pair-media>section{margin:0!important;width:100%!important;max-width:none!important}
  .v31-pair-media picture,.v31-pair-media img{display:block;width:100%!important;max-width:none!important;height:auto;margin:0!important}
  .v31-pair-media img{border-radius:18px}
  .v31-pair-side{min-width:0}
  .v31-pair-side>*{margin:0!important;max-width:640px}
  .v31-pair-side>*+*{margin-top:28px!important}
  .v31-diag{text-align:left}
  .v31-diag h2{font-size:30px}
  .v31-diag-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .v31-diag-list li{padding:18px 18px 16px}
  .v31-diag-close{text-align:left}
  .v31-doubts .lead{text-align:left;font-size:22px}
  .v31-doubts .q{gap:12px}
  .v31-doubts .q li{max-width:72%;font-size:16px}
  /* A 実物: PC 枠2つ・スマホ枠6つ */
  #afterdive>#real-works{max-width:var(--pcw)!important;width:var(--pcw)}
  .v31-real-pc{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin:34px 0 0}
  .v31-real-sp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;overflow:visible;margin:40px 0 0;padding:0}
  .v31-real-sp>li{flex:none}
  #real-works .v31-note{margin:18px 0 0;text-align:center}
  #real-works .v31-lead{font-size:16px}
  /* C ループの実演: 全幅で大きく */
  .v31-loop{height:300vh}
  .v31-loop-ring{width:min(54vh,470px)}
  .v31-loop-ring .words li,.v31-loop-ring .again,.v31-loop-ring .closed{font-size:44px}
  .v31-loop .asset{font-size:22px}
  .v31-loop .quote p{font-size:32px}
  /* F */
  #p25 .v31-final-line{font-size:18px}
}

/* PC の最初の画面: 横長の絵を画面の高さに収め、ボタンは絵のすぐ下の帯に(1280×720・1920×1080 で絵が画面より長く、ボタンが隠れていた) */
@media (min-width:1024px){
  #pc-hero.v31-pc-only{display:flex!important;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 30%,#0b3550 0,#04121c 70%)}
  #pc-hero picture{display:block;width:auto;max-width:100%}
  #pc-hero img{width:auto;max-width:100%;height:calc(100vh - 104px);height:calc(100svh - 104px);max-height:calc(100vw * 1024 / 1536);min-height:420px;object-fit:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
  #pc-hero .v31-hero-cta{position:static;justify-content:center;align-items:center;min-height:104px;padding:16px 0 20px;box-sizing:border-box}
}

/* Fable 点検(15時台)の直し: ヘッダーは常に出す・♪ボタンはヘッダーの右端に(本文の右の列に重ならない)・ページ内の移動はヘッダーの高さぶん下げる・確認用の帯はヘッダーより前に */
@media (min-width:1024px){
  html{scroll-padding-top:65px!important}
  .v31-head{padding-right:210px}
  #bgmBtn{top:10px!important;bottom:auto!important;right:24px!important;z-index:80!important;max-width:none!important;white-space:nowrap!important;min-height:44px}
  body.cta-on #bgmBtn,body.v25-bar-on #bgmBtn,.in-opening #bgmBtn{top:10px!important;bottom:auto!important;right:24px!important}
  /* 最初の絵はヘッダーの下に収める(ページ内の移動で画面の上端がヘッダーの下になる) */
  #pc-hero img{height:calc(100vh - 65px - 104px);height:calc(100svh - 65px - 104px)}
  #pc-hero{min-height:calc(100svh - 65px)}
  .v31-doubts .q li{justify-self:start}
}
@media (min-width:1024px) and (max-width:1199px){
  .v31-head{gap:12px;padding-left:20px}
  .v31-head nav{gap:14px}
  .v31-head .brand{font-size:13.5px}
  .v31-real-sp{grid-template-columns:repeat(3,minmax(0,1fr))}
}