/* v022(2026-09-26 Claude Code Opus 5.5)Apple × 深海
   本人「こういった公式LPのデザイン観点で、原理原則を大事に、徹底的に細部までこだわって改善して。何か、崩れてるところとか、おかしいところ、デザインセンスないところを直して。」
   「あと、APPLEみ ✖️ 深海という感じにしたい。APPLEはいつだって一流だからです。」
   方針: 深海の世界観(紺・金のランタン・粒と泡・明朝の章見出し)はそのまま。置き方を Apple の規律にそろえる。
   ① 幅は3種類(広い絵 1200/本文 1080/正方形の絵 780)② 節の間は一定(PC 140/スマホ 80)
   ③ 箱の中の箱をやめ、箱は1種類のガラス ④ 押すものは3種類(申込=塗り/操作=輪郭の丸/それ以外=金の文字リンク)
   ⑤ 見出しの大小をはっきり。文言・価格・日程・条件は変えない。
   棚卸し(before): qa/design_inventory.json …押せる形25通り・箱の角丸8種・節の幅10通り・節の間32〜204px・文字リンクが水色と金の2色。 */:root{--ap-wide:1200px;--ap-content:1080px;--ap-panel:780px;--ap-gap:140px;--ap-r-lg:28px;--ap-r-md:18px;
  --ap-t1:#eef3f6;--ap-t2:#aebfc8;--ap-gold:#e3c98f;--ap-line:rgba(255,255,255,.09);
  --ap-glass:linear-gradient(160deg,rgba(18,58,76,.42),rgba(6,24,36,.58))}:root{--ap-gap:84px;--ap-r-lg:22px}/* ② 節の間を一定に(映像のあとの節どうし)。層の目印(高さ0)と、絵のすぐ下の「しくみを読む」は例外 */#afterdive>:not(.wv-zone){margin-top:0!important;margin-bottom:0!important}#afterdive>:not(.wv-zone):not(#p01){margin-top:var(--ap-gap)!important}#afterdive>.v19-mechanism{margin-top:20px!important}#afterdive>:last-child{margin-bottom:var(--ap-gap)!important}/* 背景のない節は内側の上下の余白を持たない(外の間だけで区切る) */#work-gallery,#p02,#grow-skills,#evidence-voices,#paku{padding-top:0!important;padding-bottom:0!important}/* ① 幅を3種類に(タブレット・PC) *//* スマホ: 箱を持つ節の左右の余白を16pxにそろえる(20/14/18/12pxが混在していた) */#workspace,#paku,#participation-plans,#schedule,#p25{width:calc(100% - 32px)!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}/* 絵の枠: 角丸を1種類に・縁の線をやめ、深い影で浮かせる(Appleの製品写真の置き方) *//* ③ 箱の中の箱をやめる: 「このページも育てています」の外側の箱を外し、中の2つの箱を同じガラスに */#public-loop>.v16-lead{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}#public-loop .v20-wip-head{padding-left:0!important;padding-right:0!important}#public-loop .v19-loop-example,#public-loop .v16-databody{margin-top:48px!important}/* 箱は1種類のガラス(紺・細い白線・角丸28)。作品の展示・導入・修正記録・公開の記録で色味と角丸がばらばらだった */#workspace,#work-gallery .v19-stage,#public-loop .v19-loop-example,#public-loop .v16-databody,#evidence-feedback.ba-exhibit{
  background:var(--ap-glass)!important;border:1px solid var(--ap-line)!important;border-radius:var(--ap-r-lg)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.28)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#public-loop .v19-loop-example,#public-loop .v16-databody,#work-gallery .v19-stage{padding:24px 18px!important}/* ⑤ 見出しの大小: 節の見出し(h2)> 箱の見出し(h3)をはっきり。作品の箱の「想像が、動きだす。」が節の見出しとほぼ同じ大きさだった */#afterdive h2{letter-spacing:.05em!important;line-height:1.38!important}#afterdive h2{font-size:27px!important}#work-gallery .v19-stage h3{font-size:21px!important}/* 節の入口の見出しは中央にそろえる(中央と左が混在していた)。2列の組(パクの紹介・miniの入口)は左のまま */#evidence-feedback .ba-header,#evidence-feedback .ba-header>*{text-align:center!important;margin-left:auto!important;margin-right:auto!important}#public-loop .v16-databody>h2,#public-loop .v16-databody>h2+p,#public-loop .v16-databody>.v16-date{text-align:center!important;margin-left:auto!important;margin-right:auto!important}#public-loop .v20-wip-head>p{text-align:center!important}/* ④ 押すものは3種類 *//* 操作(映像を再生・次の作品・修正前後の切替)= 輪郭の丸。金の塗りは申込だけに残す */#afterdive .v19-play,#afterdive .next-work,#evidence-feedback .ba-toolbar button{background:rgba(255,255,255,.06)!important;color:var(--ap-t1)!important;border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;min-height:44px!important;padding:0 22px!important;font-size:15px!important;font-weight:600!important;letter-spacing:.04em;box-shadow:none!important;transition:background .25s ease,border-color .25s ease}#afterdive .v19-play:hover,#afterdive .next-work:hover,#evidence-feedback .ba-toolbar button:hover{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.4)!important}#evidence-feedback .ba-toolbar button[aria-pressed=true]{background:var(--ap-t1)!important;color:#0a2533!important;border-color:var(--ap-t1)!important}/* それ以外の移動・開閉 = 金の文字リンク(水色と金の2色が混在していた) */#afterdive .wv-fold summary,#afterdive .v19-text-button,#afterdive .v16-link,#afterdive .ccdd-next,#afterdive .v19-text-link,
#public-loop .v19-loop-example a,#paku p+a:not(.wv-x-card),#workspace a[href*="aipakkun"],#evidence-feedback .ba-zoom{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--ap-gold)!important;
  font-size:15px!important;font-weight:500!important;letter-spacing:.04em!important;text-decoration:none!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:.35em;min-height:44px!important;padding:0 6px!important}#afterdive .wv-fold summary:hover,#afterdive .v19-text-button:hover,#afterdive .v16-link:hover,#afterdive .ccdd-next:hover,#afterdive .v19-text-link:hover,
#public-loop .v19-loop-example a:hover,#paku p+a:not(.wv-x-card):hover,#evidence-feedback .ba-zoom:hover{text-decoration:underline!important;text-underline-offset:5px}#afterdive .wv-fold summary{padding:0 6px!important}#afterdive .v19-mechanism,#afterdive .wv-fold{text-align:center}/* 作品の映像の枠: 縦の映像の左右が真っ黒の帯になっていた → 箱の紺に溶かす */#work-gallery .v19-film-pair video,#work-gallery .v19-film-pair figure{background:rgba(3,14,22,.35)!important;border-radius:var(--ap-r-md)!important}/* 日程・会場・よくある質問(PC): 2枚+3枚に並べる(5枚目だけが1段に取り残されていた) */#schedule .panel{border-radius:24px!important}/* パクの写真: 角丸を箱と同じ28に・細い光の縁で深海の中に置く(写真そのものは変えない) */#paku>img{border-radius:var(--ap-r-lg)!important;box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.08)!important}/* 2回目の直し(実画面で見つけたもの) *//* 作品の展示: 節そのものに背景と影の箱があり、中の展示の箱と二重に見えた → 節の箱を外す */#work-gallery{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;padding-left:0!important;padding-right:0!important}/* 公開の記録: 節そのものの細い枠が、中の2つの箱の外にもう1本見えた → 外す */#public-loop{border:0!important;background:transparent!important;padding-left:0!important;padding-right:0!important}/* 仮説の箱: 絵と2つのリンクが左に寄っていた → 中央に */#public-loop .v19-loop-example{text-align:center}#public-loop .v19-loop-example>figure{margin-left:auto!important;margin-right:auto!important}#public-loop .v19-loop-example>div:not(.sr-only){display:flex!important;justify-content:center!important;gap:24px!important;flex-wrap:wrap}#public-loop .v19-loop-example .v19-caption{margin-left:auto!important;margin-right:auto!important;text-align:center!important}/* 参加者の声: 節の頭の明るい帯(背景の放射グラデーション)が見出しの上で四角く切れて見えた → 外して深海の背景に任せる */#evidence-voices{background:transparent!important;background-image:none!important}/* 「自分たちの知識を」の節の背景の光の円が、節の上下でまっすぐ切れて帯に見えた → 外して深海の背景に任せる */#p02{background:transparent!important;background-image:none!important}/* スマホ: 箱の中の絵(仮説)も、ワークスペースの節と同じく画面いっぱいに(v021のスマホの縦の絵の約束)。
   19px右にはみ出していたのは、上の「中央に寄せる」指定(#public-loop .v19-loop-example>figure の左右 auto)が
   画面いっぱいにする左右の負の余白を上書きしていたため。箱に収めるのをやめ、より強い指定で負の余白を戻す(2026-09-26 追記1) */#public-loop .v19-loop-example>figure.v21-bleed{width:var(--cw)!important;margin-left:calc(50% - calc(var(--cw)*0.5))!important;margin-right:calc(50% - calc(var(--cw)*0.5))!important;border-radius:0!important}/* スマホ: 箱が画面の端に付いていた(作品の展示・公開の記録・修正記録)/参加者の声だけ24px → すべて16px */#work-gallery .v19-stage,#public-loop .v19-loop-example,#public-loop .v16-databody,#evidence-feedback{margin-left:16px!important;margin-right:16px!important;width:auto!important;max-width:none!important;box-sizing:border-box}#evidence-voices{padding-left:16px!important;padding-right:16px!important}/* 招待状の紙: v020 の #participation-plans.v19-offer{margin:72px 14px!important} が残り、左14px・右18pxと左右がずれていた → 同じ強さで16pxにそろえる(上下の間は②の一定の間) */#participation-plans.v19-offer{margin-left:16px!important;margin-right:16px!important;width:auto!important}#afterdive>#participation-plans.v19-offer{margin-top:var(--ap-gap)!important;margin-bottom:0!important}/* 「しくみを読む」は絵に付いたもの: ②の一定の間(同じ強さ)より後に書いて、絵のすぐ下に置く */#afterdive>.v19-mechanism:not(#p01){margin-top:16px!important}/* 3回目(総点検のあとの目視): 数字の節の折りたたみ2行は、文字の上29px・下54pxで下だけ空いていた(次の行の上の余白30pxが足されていた)。
   Appleの一覧と同じく、上下の細線で挟んで上下24pxの対称に */#public-loop .v16-details{padding-top:0!important;border-bottom:1px solid #45626d}#public-loop .v16-details+.v16-details{margin-top:0!important;border-top:0!important}/* 左揃えの所の金のリンクは、押せる範囲の左右6pxのぶん文字が本文より右へずれていた → 範囲は残して文字の左端を本文に揃える */#public-loop .v16-link,#evidence-voices>.ccdd-next,#paku p+a:not(.wv-x-card),#afterdive .v19-mini-intro>.v19-text-link{margin-left:-6px!important}/* 最後の細線の直下に注記が8pxで詰まっていた */#public-loop .v16-details+.v16-quiet{margin-top:24px!important}/* スマホ: 紙の幅が4px狭くなっただけで「円（税込）」が次の行へ落ちた(v021は362px・v022は358px。320pxではv021でも2行)。
   数字の大きさを画面幅に合わせて少し縮め、金額と税込の表示を必ず1行に(文言は同じ・2026-09-26 追記1) */#participation-plans .v19-price{font-size:min(54px,calc(var(--cw)*0.116))!important;white-space:nowrap!important}