/* ============================================================================
   wonder wall株式会社 会社HP — 共通の見た目
   ★色は 30_ブランドコア_正.md の役割トークンだけ。新しい色は足さない。
   ★緑（確定＝#0C7A53）は使わない（会社案内に確定する操作が無いため）。
   ★明朝は使わない（D-123・全面ゴシック）。
   ============================================================================ */
:root{
  --ww-primary:#1C4E72;
  --ww-line:#D2D2C7;
  --ww-ink:#232826;
  --ww-paper:#F4F2EC;
  --ww-primary-tint:#E4ECF2;
  --ww-muted-ink:#5E707D;
  --ww-font-ui:"BIZ UDPGothic","Hiragino Sans","Yu Gothic UI",sans-serif;
  --ww-font-body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--ww-paper);color:var(--ww-ink);
  font-family:var(--ww-font-body);font-size:16px;line-height:1.95;font-feature-settings:"palt";}
body.is-top{background:var(--ww-ink);}
h1,h2,h3{font-family:var(--ww-font-ui);font-weight:700;line-height:1.35;}
a{color:var(--ww-primary);}
img,svg{max-width:100%;}
:focus-visible{outline:3px solid var(--ww-primary);outline-offset:3px;}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;}
.measure{max-width:32em;}
.nb{white-space:nowrap;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ww-primary);color:#fff;padding:10px 16px;z-index:9;font-family:var(--ww-font-ui);font-weight:700;text-decoration:none;}
.skip:focus{left:0;}

/* ── 上の帯 ─────────────────────────────────────────────
   ★D-056（SSOT §5）: 社名の単体をワードマークにしない（★綴りはここに書かない。
     数える検査がコメントを実体と読むため）。可＝正式商号を通常の書体で発行元表示として。
   ★会社HP のヘッダは商号だけ（司令室回答 2026-09-09・イ）。製品名は事業のページで立てる。 */
.site-head{border-bottom:1px solid var(--ww-line);}
.is-top .site-head{position:absolute;top:0;left:0;right:0;z-index:3;border-bottom:none;}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px;}
/* ★D-056（司令室回答 2026-09-09・イ）: 会社HP のヘッダは正式商号の発行元表示だけ。
   ★通常の書体で。太らせない・字間をいじらない・ロゴ化しない。 */
.brand{font-size:27px;font-weight:400;color:var(--ww-ink);letter-spacing:normal;text-decoration:none;}
.brand:hover{color:var(--ww-primary);}
.is-top .brand{color:var(--ww-paper);}
.is-top .brand:hover{color:#fff;}
.nav{display:flex;flex-wrap:wrap;gap:2px 22px;font-size:13px;}
.nav a{text-decoration:none;color:var(--ww-muted-ink);padding:4px 0;}
.nav a:hover,.nav a:focus-visible{color:var(--ww-primary);}
.is-top .nav a{color:rgba(244,242,236,.7);}
.is-top .nav a:hover,.is-top .nav a:focus-visible{color:var(--ww-paper);}

/* ── トップの入口 ─────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:var(--ww-ink);color:var(--ww-paper);}
.hero .plan{position:absolute;inset:0;width:100%;height:100%;}
.hero .wrap{position:relative;z-index:2;min-height:min(94vh,860px);
  display:flex;flex-direction:column;justify-content:center;padding-top:132px;padding-bottom:88px;}
.hero .eyebrow{margin:0 0 26px;display:flex;align-items:center;gap:14px;
  font-family:var(--ww-font-ui);font-size:13px;letter-spacing:.12em;color:rgba(244,242,236,.72);}
.hero .eyebrow::before{content:"";width:56px;height:2px;background:var(--ww-primary-tint);}
.hero h1{margin:0 0 30px;font-size:clamp(34px,8.4vw,84px);line-height:1.16;letter-spacing:-.015em;color:var(--ww-paper);}
.hero h1 .l{display:block;}
.hero .sub{margin:0 0 16px;font-size:clamp(16px,2.4vw,20px);max-width:28em;color:var(--ww-paper);}
.hero .who{margin:0;font-size:14px;color:rgba(244,242,236,.62);}

/* ── 下層ページの見出し ─────────────────────────────────
   ★入口と同じ通り芯を引いてから、見出しが立ち上がる（1回だけ）。 */
.page-head{position:relative;overflow:hidden;background:var(--ww-ink);color:var(--ww-paper);padding:72px 0 64px;}
.page-head .grid{position:absolute;inset:0;width:100%;height:100%;}
.page-head .wrap{position:relative;z-index:2;}
/* ★帯の右の余白に置く「場面」。★狭い画面では出さない（文字に重なるため） */
.headfig{position:absolute;right:2%;bottom:0;width:330px;height:238px;z-index:1;display:none;}
@media (min-width:1000px){.headfig{display:block;right:4%;}}
@media (min-width:1240px){.headfig{width:380px;height:274px;}}
.page-head .eyebrow{margin:0 0 18px;display:flex;align-items:center;gap:14px;
  font-family:var(--ww-font-ui);font-size:12px;letter-spacing:.16em;color:rgba(244,242,236,.7);}
.page-head .eyebrow::before{content:"";width:52px;height:1px;background:var(--ww-primary-tint);}
.page-head h1{margin:0;font-size:clamp(30px,6vw,58px);line-height:1.18;letter-spacing:-.01em;}
.page-head .sub{margin:22px 0 0;font-size:clamp(15px,2.2vw,18px);color:rgba(244,242,236,.82);}
@media (min-width:900px){.page-head{padding:112px 0 96px;}}

/* ── 節 ─────────────────────────────────────────────── */
.sec{padding:80px 0;}
.sec.on-paper{background:var(--ww-paper);color:var(--ww-ink);}
.sec.on-ink{background:var(--ww-ink);color:var(--ww-paper);}
.sec h2{margin:0 0 18px;font-size:clamp(22px,3.8vw,32px);letter-spacing:-.01em;}
.sec.on-paper h2{color:var(--ww-primary);}
.label{margin:0 0 16px;font-family:var(--ww-font-ui);font-size:12px;letter-spacing:.14em;color:var(--ww-muted-ink);}
.on-ink .label{color:rgba(244,242,236,.55);}
@media (min-width:900px){
  .sec{padding:112px 0;}
  .two{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:64px;align-items:start;}
}
.say{margin:0;font-family:var(--ww-font-ui);font-weight:700;font-size:clamp(20px,3.4vw,30px);line-height:1.65;}
.more{font-family:var(--ww-font-ui);font-weight:700;font-size:16px;color:var(--ww-primary-tint);
  text-decoration:none;border-bottom:2px solid var(--ww-primary-tint);padding-bottom:3px;}
.more:hover{color:#fff;border-bottom-color:#fff;}

/* ── トップの案内板 ───────────────────────────────────── */
.guide{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.guide li{border-top:1px solid var(--ww-line);}
.guide li:last-child{border-bottom:1px solid var(--ww-line);}
.guide a{display:grid;gap:6px;padding:28px 0;text-decoration:none;color:var(--ww-ink);}
@media (min-width:760px){.guide a{grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:64px;align-items:baseline;padding:32px 0;}}
.guide .g-t{font-family:var(--ww-font-ui);font-weight:700;font-size:clamp(24px,3.6vw,34px);
  color:var(--ww-primary);letter-spacing:-.01em;position:relative;display:inline-block;}
.guide .g-d{font-size:15px;color:var(--ww-muted-ink);line-height:1.9;}
/* ★下線が伸びる。★飾りではなく「押せる」ことの合図 */
.guide .g-t::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
  background:var(--ww-primary);transition:right .35s cubic-bezier(.3,.8,.3,1);}
.guide a:hover .g-t::after,.guide a:focus-visible .g-t::after{right:0;}
@media (prefers-reduced-motion:reduce){.guide .g-t::after{transition:none;}}

/* ── 3段（順番があるので番号を振る）───────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:30px 0;border-top:1px solid var(--ww-line);}
.step:last-child{border-bottom:1px solid var(--ww-line);}
.step .n{font-family:var(--ww-font-ui);font-weight:700;font-size:clamp(34px,6vw,64px);
  line-height:.9;color:var(--ww-line);min-width:1.6em;letter-spacing:-.02em;}
.step h2{margin:0 0 10px;font-size:clamp(22px,3.6vw,32px);line-height:1.4;color:var(--ww-primary);letter-spacing:-.01em;}
.step p{margin:0 0 14px;font-size:15px;line-height:2;max-width:32em;}
.step .state{display:inline-block;font-family:var(--ww-font-ui);font-size:12px;letter-spacing:.1em;
  padding:3px 12px;border:1px solid var(--ww-line);color:var(--ww-muted-ink);}
.step .state.now{background:var(--ww-primary);border-color:var(--ww-primary);color:#fff;}
/* ★その段でしていることを、アイソメ（立体）で描いた図。
   ★入ってきたときに動き出す。★見えていない間は動かさない（電池と目の負担を増やさない）。 */
.step .fig{width:100%;max-width:260px;height:auto;color:var(--ww-primary);justify-self:start;margin-top:6px;}
@media (min-width:560px){.step .fig{max-width:230px;justify-self:end;margin-top:0;}}
@media (min-width:820px){
  .step{grid-template-columns:auto minmax(0,1fr) auto;gap:44px;padding:52px 0;align-items:center;}
  .step .fig{width:260px;max-width:none;}
}

/* ── 製品（★事業のページだけ）─────────────────────────
   ロゴは docs/brand-guide.md §2〜§4 を満たすこと:
   最小は高さ24px以上／余白は図案の一辺の1/4以上／変形・回転・影・階調を付けない */
.product{display:grid;gap:22px;align-items:center;}
@media (min-width:760px){.product{grid-template-columns:auto 1fr;gap:32px;}}
.lockup{display:block;height:clamp(40px,6vw,52px);width:auto;}
.product .link{font-family:var(--ww-font-ui);font-weight:700;font-size:16px;margin:0;}
.product .link a{text-decoration:none;border-bottom:2px solid var(--ww-primary);padding-bottom:2px;}
.product .link a:hover{background:var(--ww-primary-tint);}
.product .note{margin:8px 0 0;font-size:13px;color:var(--ww-muted-ink);}

/* ── 表・沿革・承認・連絡先 ───────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:15px;}
th,td{text-align:left;vertical-align:top;padding:16px 4px;border-bottom:1px solid var(--ww-line);}
th{font-family:var(--ww-font-ui);font-weight:700;color:var(--ww-primary);width:9em;white-space:nowrap;}
tr:first-child th,tr:first-child td{border-top:1px solid var(--ww-line);}
@media (max-width:560px){
  th{width:auto;display:block;border-bottom:none;padding-bottom:0;}
  td{display:block;padding-top:2px;}
}
.history{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.history li{display:grid;grid-template-columns:9em 1fr;gap:18px;padding:18px 0;border-bottom:1px solid var(--ww-line);}
.history li:first-child{border-top:1px solid var(--ww-line);}
.history .y{font-family:var(--ww-font-ui);font-weight:700;color:var(--ww-primary);font-size:15px;}
@media (max-width:560px){.history li{grid-template-columns:1fr;gap:2px;}}
.approval{background:#fff;border:1px solid var(--ww-line);border-left:4px solid var(--ww-primary);padding:28px 30px;}
.approval p{margin:0;font-size:15px;}
.approval .note{margin-top:14px;font-size:13px;color:var(--ww-muted-ink);line-height:1.8;}
/* ★連絡先の指定は外した（代表判断 2026-09-09「連絡先は記載しない」）。
   ★お問い合わせのページごと無くしたので、使う所が1つも無い。 */

/* ── フッタ ─────────────────────────────────────────── */
.site-foot{background:var(--ww-ink);color:var(--ww-paper);padding:64px 0 44px;font-size:14px;}
.site-foot .cols{display:grid;gap:28px;}
@media (min-width:760px){.site-foot .cols{grid-template-columns:1.5fr 1fr 1fr;gap:36px;}}
.site-foot h2{font-size:25px;margin:0 0 12px;color:var(--ww-paper);}
.site-foot p{margin:0 0 6px;line-height:1.8;color:rgba(244,242,236,.82);word-break:keep-all;}
.site-foot a{color:var(--ww-paper);}
.site-foot .fnav{list-style:none;margin:0;padding:0;}
.site-foot .fnav li{margin-bottom:8px;}
.site-foot .copy{margin-top:40px;padding-top:20px;border-top:1px solid rgba(244,242,236,.22);font-size:13px;color:rgba(244,242,236,.6);}

/* ============================================================================
   動き（代表指示 2026-09-09「しっかり入れる」）
   ★入口は1回の段取り: 測る（ドローンが横切り走査が下りる）→ 作る（切断の印）
     → 組み立てる（部材が持ち上がって収まる）。★ドローンはそのあとも巡回する。
   ★スクロールでは、入ってきたものだけが1回起き上がる。
   ★prefers-reduced-motion で全部止まる。★JavaScript が無くても中身は全部読める。
   ============================================================================ */
.hero .stud{stroke-dasharray:900;stroke-dashoffset:900;}
.hero .board{opacity:0;transform-box:fill-box;transform-origin:50% 50%;}
.hero .stock{stroke-dasharray:2300;stroke-dashoffset:2300;}
.hero .cuts line{opacity:0;}
.hero .dim{stroke-dasharray:1200;stroke-dashoffset:1200;}
.hero .scan{opacity:0;transform-box:view-box;transform-origin:0 0;}
.hero .drone{opacity:0;transform-box:view-box;transform-origin:0 0;}
.hero .eyebrow,.hero h1 .l,.hero .sub,.hero .who{opacity:0;}
.rise{opacity:0;transform:translateY(18px);}
.rise.in{opacity:1;transform:none;transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1);}

/* ============================================================================
   事業ページの3つの図（アイソメ）
   ★入ってきたとき（.rise.in）に動き出す。★見えていない間は動かさない。
   ★1つの図につき動きは1つだけ。★止める設定の人には、静かな完成形が出る。
   ★1こま＝(40,20)/(40,-20) のひし形。★移動はこの単位の足し算だけで書く。
   ============================================================================ */
.fig .unit,.fig .lit,.fig .ray,.fig .cutter,.fig .p{transform-box:view-box;}

/* 01 測る … ドローンが面を渡り、真下のこまが照らされる */
.fig-measure .unit,.fig-measure .ray,.fig-measure .lit{opacity:0;}
.rise.in .fig-measure .unit{opacity:1;animation:iso-walk 7s ease-in-out .2s infinite;}
.rise.in .fig-measure .ray{opacity:.85;animation:iso-walk 7s ease-in-out .2s infinite;}
.rise.in .fig-measure .lit{animation:iso-walk 7s ease-in-out .2s infinite,lit 7s linear .2s infinite;}

/* 02 作る … 切断の頭が材料の上を渡り、通ったところで切り分けられる */
.fig-cut .cutter{opacity:0;}
.fig-cut .stock-a,.fig-cut .stock-b,.fig-cut .stock-c{opacity:.25;}
.rise.in .fig-cut .cutter{opacity:1;animation:cut-walk 6s ease-in-out .2s infinite;}
.rise.in .fig-cut .stock-a{animation:cut-on 6s linear .2s infinite;}
.rise.in .fig-cut .stock-b{animation:cut-on 6s linear .2s infinite;animation-delay:1.3s;}
.rise.in .fig-cut .stock-c{animation:cut-on 6s linear .2s infinite;animation-delay:2.6s;}

/* 03 組み立てる … ドローンが渡り、こまが1枚ずつ収まる */
.fig-build .p{opacity:0;}
.fig-build .unit{opacity:0;}
.rise.in .fig-build .unit{opacity:1;animation:iso-sweep 8s ease-in-out .2s infinite;}
.rise.in .fig-build .p{animation:drop 8s ease-out .2s infinite;}
.rise.in .fig-build .p1{animation-delay:.5s;}
.rise.in .fig-build .p2{animation-delay:1.1s;}
.rise.in .fig-build .p3{animation-delay:1.7s;}
.rise.in .fig-build .p4{animation-delay:2.3s;}
.rise.in .fig-build .p5{animation-delay:2.9s;}
.rise.in .fig-build .p6{animation-delay:3.5s;}

/* ★こま(0,0)を起点に、(1,0)(2,0)(2,1)(1,1)(0,1) と渡って戻る */
@keyframes iso-walk{
  0%,8%    {transform:translate(0,0);}
  16%,24%  {transform:translate(40px,20px);}
  32%,40%  {transform:translate(80px,40px);}
  48%,56%  {transform:translate(120px,20px);}
  64%,72%  {transform:translate(80px,0);}
  80%,88%  {transform:translate(40px,-20px);}
  100%     {transform:translate(0,0);}
}
@keyframes iso-sweep{
  0%,10%   {transform:translate(-80px,0);}
  30%      {transform:translate(-40px,20px);}
  50%      {transform:translate(0,40px);}
  70%      {transform:translate(-40px,20px);}
  90%,100% {transform:translate(-80px,0);}
}
@keyframes lit{0%,6%{opacity:.55;}10%,90%{opacity:1;}100%{opacity:.55;}}
@keyframes drop{
  0%,4%   {opacity:0;transform:translateY(-14px);}
  10%,92% {opacity:1;transform:translateY(0);}
  100%    {opacity:0;transform:translateY(-14px);}
}
@keyframes cut-walk{
  0%      {opacity:0;transform:translate(50px,84px);}
  6%      {opacity:1;}
  35%     {transform:translate(90px,104px);}
  65%     {transform:translate(130px,124px);}
  92%     {opacity:1;transform:translate(170px,144px);}
  100%    {opacity:0;transform:translate(170px,144px);}
}
@keyframes cut-on{0%,18%{opacity:.25;}26%,92%{opacity:1;}100%{opacity:.25;}}

@media (prefers-reduced-motion:reduce){
  /* ★止める設定の人には、組み上がった静かな形を見せる */
  .fig .unit,.fig .ray,.fig .lit,.fig .p,.fig .cutter{opacity:1;animation:none;}
  .fig-cut .stock-a,.fig-cut .stock-b,.fig-cut .stock-c{opacity:1;}
}

/* ★下層ページの帯。読み込みで通り芯 → 寸法 → 見出し の順に出る */
.page-head .stud{stroke-dasharray:340;stroke-dashoffset:340;}
.page-head .dim{stroke-dasharray:1200;stroke-dashoffset:1200;}
.page-head .eyebrow,.page-head h1,.page-head .sub{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .page-head .stud{animation:draw .9s ease-out .2s forwards;}
  .page-head .stud:nth-of-type(2){animation-delay:.32s;}
  .page-head .stud:nth-of-type(3){animation-delay:.44s;}
  .page-head .stud:nth-of-type(4){animation-delay:.56s;}
  .page-head .dim{animation:draw 1s ease-out .7s forwards;}
  .page-head .eyebrow{animation:rise .7s ease-out .35s forwards;}
  .page-head h1{animation:rise .8s cubic-bezier(.2,.7,.3,1) .5s forwards;}
  .page-head .sub{animation:rise .8s ease-out .68s forwards;}
}
/* ============================================================================
   帯の場面（代表指示 2026-09-09）
     事業     … ドローンが部材を吊り下ろし、人が受け取って下地に置く
     会社概要 … ドローンが銘板を吊り下ろし、据わった瞬間に商号が現れる
   ★D-056: 社名をワードマーク化しない。★銘板の中は通常の書体の発行元表示のまま。
   ★どちらも読み込みで動き出し、ゆっくり繰り返す。★止める設定の人には静かな完成形。
   ============================================================================ */
.headfig .dA,.headfig .dB,.headfig .lifter,.headfig .plate{transform-box:view-box;}
.headfig .brk{opacity:0;transform-box:fill-box;transform-origin:50% 100%;}
.headfig .dA,.headfig .dB,.headfig-plate .lifter,.headfig-plate .plate{opacity:0;}
.headfig-plate .plate-name{opacity:0;}

@media (prefers-reduced-motion:no-preference){
  /* ★事業: ドローン2台が 7秒で10枚を積む（下の段から左→右・段ごとに半分ずらす＝レンガ積み）。
     ★積み終わったら 2台とも上で止まる。★繰り返さない。 */
  .headfig-work .dA{opacity:1;animation:layA 7s cubic-bezier(.4,0,.25,1) .4s forwards;}
  .headfig-work .dB{opacity:1;animation:layB 7s cubic-bezier(.4,0,.25,1) .4s forwards;}
  .headfig-work .brk{animation:laid .34s cubic-bezier(.25,.9,.3,1) forwards;}
  .headfig-work .b1{animation-delay:1.0s;}  .headfig-work .b2{animation-delay:1.6s;}
  .headfig-work .b3{animation-delay:2.2s;}  .headfig-work .b4{animation-delay:2.8s;}
  .headfig-work .b5{animation-delay:3.4s;}  .headfig-work .b6{animation-delay:4.0s;}
  .headfig-work .b7{animation-delay:4.6s;}  .headfig-work .b8{animation-delay:5.2s;}
  .headfig-work .b9{animation-delay:5.8s;}  .headfig-work .b10{animation-delay:6.4s;}
  /* 会社概要: 11秒で1周（吊り下ろす→据わる→商号が出る→また上がる） */
  .headfig-plate .lifter{opacity:1;animation:lifter 11s cubic-bezier(.4,0,.3,1) .4s infinite;}
  .headfig-plate .plate{opacity:1;animation:plate 11s cubic-bezier(.4,0,.3,1) .4s infinite;}
  .headfig-plate .plate-name{animation:plate-name 11s linear .4s infinite;}
}
@media (prefers-reduced-motion:reduce){
  .page-head .stud,.page-head .dim{stroke-dashoffset:0;}
  .page-head .eyebrow,.page-head h1,.page-head .sub{opacity:1;}
  .fig .dl{stroke-dashoffset:0;}
  /* ★止める設定の人には、積み終わった形／据え付けが終わった形を見せる */
  .headfig-work .brk{opacity:1;}
  .headfig-work .dA{opacity:1;transform:translate(120px,96px);}
  .headfig-work .dB{opacity:1;transform:translate(210px,96px);}
  .headfig-plate .lifter{opacity:1;transform:translate(180px,70px);}
  .headfig-plate .plate{opacity:1;transform:translate(0,144px);}
  .headfig-plate .plate-name{opacity:1;}
}

/* ★置いた下地。★上から下りて収まる */
@keyframes laid{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:none;}}

/* ★1台目 … 奇数番（1,3,5,7,9）を置く。★数字は headfigs.mjs の並びと対応 */
@keyframes layA{
  0%       {opacity:0;transform:translate(60px,60px);}
  5%       {opacity:1;}
  8.6%,12% {transform:translate(97px,186px);}    /* 1 */
  25.7%,29%{transform:translate(213px,186px);}   /* 3 */
  42.9%,46%{transform:translate(126px,166px);}   /* 5 */
  60%,63%  {transform:translate(227px,166px);}   /* 7 */
  77.1%,80%{transform:translate(155px,146px);}   /* 9 */
  100%     {opacity:1;transform:translate(120px,96px);}  /* ★上で待機 */
}
/* ★2台目 … 偶数番（2,4,6,8,10）を置く */
@keyframes layB{
  0%        {opacity:0;transform:translate(300px,60px);}
  5%        {opacity:1;}
  17.1%,20% {transform:translate(155px,186px);}  /* 2 */
  34.3%,37% {transform:translate(82px,166px);}   /* 4 */
  51.4%,54% {transform:translate(184px,166px);}  /* 6 */
  68.6%,71% {transform:translate(97px,146px);}   /* 8 */
  85.7%,88% {transform:translate(213px,146px);}  /* 10 */
  100%      {opacity:1;transform:translate(210px,96px);} /* ★上で待機 */
}

/* ドローンが銘板を吊って降り、柱に据えて、離れる */
@keyframes lifter{
  0%     {transform:translate(180px,-46px);}
  22%,58%{transform:translate(180px,70px);}
  76%    {transform:translate(180px,-10px);}
  100%   {transform:translate(180px,-46px);}
}
@keyframes plate{
  0%     {transform:translate(0,-30px);}
  22%,86%{transform:translate(0,144px);}
  100%   {transform:translate(0,-30px);}
}
@keyframes plate-name{0%,26%{opacity:0;}34%,84%{opacity:1;}90%,100%{opacity:0;}}

@media (prefers-reduced-motion:no-preference){
  /* ★段取り（代表指示 2026-09-09）
       0.3〜1.5s  通り芯が引かれ、材料の帯に切断の印が入る
       1.6〜8.0s  ★ドローンが 真ん中から外へ 1枚ずつ置いていく（8枚）
       8.0s〜     ★左上へ戻って 止まる（★以後は動かない） */
  .hero .drone{animation:build 6.4s cubic-bezier(.4,0,.25,1) 1.6s forwards;}
  .hero .scan{animation:build 6.4s cubic-bezier(.4,0,.25,1) 1.6s forwards, beam 6.4s linear 1.6s forwards;}
  .hero .bob{animation:bob 2.2s ease-in-out .3s 4;transform-box:fill-box;transform-origin:50% 50%;}
  .hero .stud{animation:draw 1.0s ease-out .3s forwards;}
  .hero .stud:nth-of-type(2){animation-delay:.45s;}
  .hero .stud:nth-of-type(3){animation-delay:.6s;}
  .hero .stud:nth-of-type(4){animation-delay:.75s;}
  .hero .stock{animation:draw .8s ease-out .8s forwards;}
  .hero .cuts line{animation:tick .3s ease-out forwards;}
  .hero .board{animation:settle .28s cubic-bezier(.25,.9,.3,1) forwards;}
  .hero .dim{animation:draw 1s ease-out 7.3s forwards;}
  .hero .eyebrow{animation:rise .7s ease-out .2s forwards;}
  .hero h1 .l{animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards;}
  .hero h1 .l:nth-child(1){animation-delay:.35s;}
  .hero h1 .l:nth-child(2){animation-delay:.47s;}
  .hero h1 .l:nth-child(3){animation-delay:.59s;}
  .hero .sub{animation:rise .8s ease-out .78s forwards;}
  .hero .who{animation:rise .8s ease-out .9s forwards;}
}
@media (prefers-reduced-motion:reduce){
  .hero .stud,.hero .dim,.hero .stock{stroke-dashoffset:0;}
  .hero .board,.hero .cuts line,.hero .eyebrow,.hero h1 .l,.hero .sub,.hero .who{opacity:1;}
  /* ★動かさない設定の人には、★組み上がった状態＋ドローンは待機位置（左上）で見せる */
  .hero .drone{opacity:1;transform:translate(140px,214px);}
  .hero .scan{opacity:0;}
  .rise{opacity:1;transform:none;}
}
@keyframes draw{to{stroke-dashoffset:0;}}

/* ★施工の順路。★真ん中から外へ、8枚を1枚ずつ置いてから、左上へ戻って止まる。
   ★各点は「移動 0.45s → 置く間 0.25s」。★板の animation-delay はこの到着時刻に合わせてある
   （build-site.mjs の <rect class="board"> のコメント参照）。 */
@keyframes build{
  0%   {opacity:0; transform:translate(140px,214px);}
  4%   {opacity:1;}
  7.03%{transform:translate(628px,390px);}  10.94%{transform:translate(628px,390px);}   /* ① 下段まん中右 */
  17.97%{transform:translate(484px,298px);} 21.88%{transform:translate(484px,298px);}   /* ② 上段左中 */
  28.91%{transform:translate(772px,298px);} 32.81%{transform:translate(772px,298px);}   /* ③ 上段右中 */
  39.84%{transform:translate(340px,390px);} 43.75%{transform:translate(340px,390px);}   /* ④ 下段左中 */
  50.78%{transform:translate(916px,390px);} 54.69%{transform:translate(916px,390px);}   /* ⑤ 下段右 */
  61.72%{transform:translate(196px,298px);} 65.63%{transform:translate(196px,298px);}   /* ⑥ 上段左端 */
  72.66%{transform:translate(1032px,298px);}76.56%{transform:translate(1032px,298px);}  /* ⑦ 上段右端 */
  83.59%{transform:translate(124px,390px);} 87.50%{transform:translate(124px,390px);}   /* ⑧ 下段左端 */
  100% {opacity:1; transform:translate(140px,214px);}                                   /* ★左上で待機 */
}
/* ★機体の下の光。置いている間だけ点り、終わりに消える（待機中は消えている） */
@keyframes beam{0%{opacity:0;}5%{opacity:1;}88%{opacity:1;}96%,100%{opacity:0;}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
@keyframes tick{from{opacity:0;transform:scaleY(.2);}to{opacity:1;transform:none;}}
/* ★置かれた板。★上から下りて収まる（★遠くから飛んで来る形にはしない。置いた感じにする） */
@keyframes settle{from{opacity:0;transform:translateY(-18px) scaleX(.96);}to{opacity:1;transform:none;}}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ══ 入口・事業・会社概要の 3D アニメーション（2026-09-10・代表判断） ══════════
   ★「文字＋図面」の2段組。★描き方は3ページで揃え、中身を変える。
   ★数と色はアプリの現物から（anim.js の冒頭に出典）。 */
.hero-split{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  align-items:center;min-height:min(94vh,860px);}
.hero-split > .wrap{min-height:0;padding:0 clamp(20px,4vw,64px);
  justify-self:end;max-width:46rem;width:100%;}
.hero-split .sheet{position:relative;align-self:stretch;overflow:hidden;}
.hero-split .sheet svg{position:absolute;inset:0;width:100%;height:100%;}
.hero-split .sheet::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--ww-ink) 0%,rgba(35,40,38,.7) 5%,transparent 20%);}
.hero-split::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:radial-gradient(140% 95% at 24% 50%,transparent 44%,rgba(35,40,38,.5) 100%);}

/* 図面の線（★階層は5段） */
.a-gridline,.a-dim,.a-aux,.a-thin{fill:none;}
.a-gridline{stroke:#E4ECF2;stroke-width:.55;stroke-opacity:.30;stroke-dasharray:20 4 3 4;}
.a-aux{stroke:#E4ECF2;stroke-width:.6;stroke-opacity:.26;}
.a-dim{stroke:#E4ECF2;stroke-width:.8;stroke-opacity:.48;}
.a-thin{stroke:#E4ECF2;stroke-width:.7;stroke-opacity:.38;}
.hero-split text{font-family:var(--ww-font-ui);fill:#E4ECF2;}
.a-dim-t{font-size:11px;fill-opacity:.55;letter-spacing:.03em;}
.a-tag{font-size:11.5px;fill-opacity:.74;letter-spacing:.04em;}

/* ★部材は下から持ち上げる（★天井も壁も、床から上げて付ける） */
@keyframes a-place{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes a-fade{to{opacity:1}}
@keyframes a-rotor{to{transform:scaleX(.15)}}
@keyframes a-hover{50%{transform:translateY(-3px)}}
.a-part,.a-board,.a-fade,.a-drone,.a-plate{opacity:0;}
.a-rotor{transform-box:fill-box;transform-origin:center;}

/* ドローンは画面の下から入り、★終わりに左上で待機（代表指示） */
@keyframes a-flyA{
  0%{opacity:0;transform:translate(170px,700px)}6%{opacity:1}
  17%{transform:translate(300px,470px)}37%{transform:translate(390px,398px)}
  57%{transform:translate(300px,332px)}75%{transform:translate(440px,300px)}
  89%{transform:translate(320px,214px)}100%{opacity:1;transform:translate(150px,88px)}}
@keyframes a-flyB{
  0%{opacity:0;transform:translate(700px,700px)}8%{opacity:1}
  21%{transform:translate(724px,468px)}41%{transform:translate(660px,400px)}
  61%{transform:translate(730px,334px)}79%{transform:translate(640px,282px)}
  91%{transform:translate(500px,180px)}100%{opacity:1;transform:translate(232px,88px)}}
@keyframes a-flyW1{
  0%{opacity:0;transform:translate(240px,720px)}6%{opacity:1}
  20%{transform:translate(280px,480px)}42%{transform:translate(330px,360px)}
  64%{transform:translate(400px,300px)}82%{transform:translate(470px,220px)}
  100%{opacity:1;transform:translate(150px,86px)}}
@keyframes a-flyW2{
  0%{opacity:0;transform:translate(520px,720px)}9%{opacity:1}
  24%{transform:translate(470px,500px)}46%{transform:translate(520px,380px)}
  68%{transform:translate(430px,300px)}86%{transform:translate(520px,190px)}
  100%{opacity:1;transform:translate(232px,86px)}}
@keyframes a-flyP{
  0%{opacity:0;transform:translate(430px,720px)}8%{opacity:1}
  30%{transform:translate(430px,470px)}52%{transform:translate(430px,392px)}
  62%{transform:translate(430px,392px)}80%{transform:translate(360px,300px)}
  100%{opacity:1;transform:translate(150px,86px)}}
/* 銘板は、ドローンが着いてから現れる */
@keyframes a-plate{0%,52%{opacity:0;transform:translateY(24px)}66%,100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:no-preference){
  .a-part{animation:a-place .85s cubic-bezier(.22,.85,.3,1) both;}
  .a-board{animation:a-place 1.05s cubic-bezier(.22,.85,.3,1) both;}
  .a-fade{animation:a-fade .85s ease-out both;}
  .a-rotor{animation:a-rotor .09s linear infinite alternate;}
  .a-flyA{animation:a-flyA 11.4s cubic-bezier(.35,0,.5,1) .3s forwards;}
  .a-flyB{animation:a-flyB 11.4s cubic-bezier(.35,0,.5,1) .3s forwards;}
  .a-flyW1{animation:a-flyW1 11.4s cubic-bezier(.35,0,.5,1) .3s forwards;}
  .a-flyW2{animation:a-flyW2 11.4s cubic-bezier(.35,0,.5,1) .3s forwards;}
  .a-flyP{animation:a-flyP 10.5s cubic-bezier(.35,0,.5,1) .3s forwards;}
  .a-plate{animation:a-plate 10.5s linear .3s forwards;}
}
@media (prefers-reduced-motion:reduce){
  .a-part,.a-board,.a-fade,.a-drone,.a-plate{opacity:1;animation:none;}
  .a-flyA,.a-flyW1,.a-flyP{transform:translate(150px,87px);}
  .a-flyB,.a-flyW2{transform:translate(232px,87px);}
}

/* 狭い画面：図面を背面へ回す */
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;}
  .hero-split > .wrap{max-width:none;justify-self:stretch;
    padding:132px var(--ww-gutter,20px) 88px;}
  .hero-split .sheet{position:absolute;inset:0;opacity:.28;}
  .hero-split .sheet::before{background:linear-gradient(180deg,var(--ww-ink) 0%,transparent 26%,transparent 74%,var(--ww-ink) 100%);}
}

/* ★2段組では 文字の欄が 44% しかない。★入口の 84px は はみ出すので詰める（2026-09-10） */
.hero-split{padding-top:84px;}
.hero-split h1{font-size:clamp(28px,3.5vw,54px);line-height:1.2;margin-bottom:26px;}
.hero-split .sub{font-size:clamp(14px,1.15vw,17px);max-width:none;margin-bottom:16px;}
.hero-split .who{font-size:13px;}
.hero-split .eyebrow{font-size:12px;letter-spacing:.16em;margin-bottom:22px;}
.hero-split .eyebrow::before{width:44px;height:1px;}
@media (max-width:900px){.hero-split{padding-top:0;}}


/* ============================================================================
   ★2026-10-02 追加 — 先進的・未来的な 見え方（fx 層）
   ★色は 役割トークンだけ（--ww-primary / --ww-primary-tint / --ww-ink / --ww-paper）。
     ★新しい色は 1つも 足していません（ブランドコアの 決まりどおり）。
   ★動きは すべて prefers-reduced-motion で 止まります（いちばん下）。
   ★足すだけ。上の書式は 1行も 消していません。
   ============================================================================ */

/* ── 画面の上の 進み具合 ───────────────────────────────── */
#rail{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--ww-primary),var(--ww-primary-tint));
  box-shadow:0 0 10px rgba(228,236,242,.45);}

/* ── 暗い帯（入口・ページの見出し）に かぶせる 効果 ──────────── */
.hero::before,.page-head::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 30% 40%,transparent 40%,rgba(12,16,15,.42) 82%,rgba(12,16,15,.72) 100%),
    repeating-linear-gradient(0deg,rgba(228,236,242,.030) 0 1px,transparent 1px 3px);}
.hero::after,.page-head::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  background-size:160px 160px;}

/* 四隅の 鉤（計測器の 枠） */
.hero .wrap::before,.hero .wrap::after{content:"";position:absolute;width:28px;height:28px;
  border:1px solid rgba(228,236,242,.34);pointer-events:none;}
.hero .wrap::before{top:104px;left:24px;border-right:0;border-bottom:0;}
.hero .wrap::after{bottom:56px;right:24px;border-left:0;border-top:0;}

/* 帯を 一度だけ 光が 横切る（通り芯を 引く 感じ） */
.hero .plan,.page-head .grid{position:absolute;}
.hero > .sweep,.page-head > .sweep{content:"";position:absolute;top:0;bottom:0;width:38%;z-index:1;
  pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(228,236,242,.10),transparent);}
body.js .hero > .sweep,body.js .page-head > .sweep{animation:ww-sweep 2.6s .45s cubic-bezier(.22,.9,.3,1) 1 both;}
@keyframes ww-sweep{0%{opacity:0;transform:translateX(-120%)}18%{opacity:1}100%{opacity:0;transform:translateX(300%)}}

/* ── 図（アイソメ）に ほのかな 光 ─────────────────────── */
.hero .plan,.page-head .grid,.headfig,.fig{filter:drop-shadow(0 0 14px rgba(228,236,242,.14));}

/* ── 見出しの 出かた（下から・ぼけ→くっきり）──────────────
   ★`body.js` が 付いたときだけ 隠します。★JS が 動かなければ 最初から 見えます。 */
body.js .hero h1 .l,body.js .hero .eyebrow,body.js .hero .sub,body.js .hero .who,
body.js .page-head h1,body.js .page-head .eyebrow,body.js .page-head .sub{
  opacity:0;transform:translateY(20px);filter:blur(8px);}
body.js.ready .hero h1 .l,body.js.ready .hero .eyebrow,body.js.ready .hero .sub,body.js.ready .hero .who,
body.js.ready .page-head h1,body.js.ready .page-head .eyebrow,body.js.ready .page-head .sub{
  opacity:1;transform:none;filter:none;
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1),filter .85s ease;}
body.js.ready .hero .eyebrow,body.js.ready .page-head .eyebrow{transition-delay:.08s;}
body.js.ready .hero h1 .l:nth-child(1),body.js.ready .page-head h1{transition-delay:.20s;}
body.js.ready .hero h1 .l:nth-child(2){transition-delay:.31s;}
body.js.ready .hero h1 .l:nth-child(3){transition-delay:.42s;}
body.js.ready .hero .sub,body.js.ready .page-head .sub{transition-delay:.54s;}
body.js.ready .hero .who{transition-delay:.64s;}

/* ── 出てくる 動きを すこし 深く（既にある .rise に ぼけを 足す）───── */
.rise{filter:blur(6px);}
.rise.in{filter:none;transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.7,.3,1),filter .7s ease-out;}

/* ── 3段（測る・作る・組み立てる）の 番号を 立てる ──────────── */
.step .n{position:relative;}
.step .n::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:0;
  background:linear-gradient(180deg,var(--ww-primary),transparent);}
.rise.in .step .n::after{height:52px;transition:height .9s .25s cubic-bezier(.16,1,.3,1);}

/* 状態の 札（いま動いています／開発／目指すところ）を はっきり させる */
.state{position:relative;}
.state.now::before{content:"";position:absolute;left:-14px;top:50%;width:7px;height:7px;margin-top:-3px;
  border-radius:50%;background:var(--ww-primary);box-shadow:0 0 0 0 rgba(28,78,114,.55);}
body.js .state.now::before{animation:ww-pulse 2.6s ease-out infinite;}
@keyframes ww-pulse{0%{box-shadow:0 0 0 0 rgba(28,78,114,.5)}70%{box-shadow:0 0 0 9px rgba(28,78,114,0)}100%{box-shadow:0 0 0 0 rgba(28,78,114,0)}}

/* ── 案内板・リンクの 触り心地 ───────────────────────── */
.guide a,.guide li{transition:background .28s ease,padding-left .28s ease;}
.guide li:hover{background:linear-gradient(90deg,var(--ww-primary-tint),transparent 70%);padding-left:10px;}
.more{transition:color .2s,letter-spacing .25s;}
.more:hover{letter-spacing:.03em;}

/* 承認の 枠を すこし 持ち上げる */
.approval{transition:box-shadow .3s,transform .3s;}
.approval:hover{box-shadow:0 10px 30px rgba(35,40,38,.10);transform:translateY(-1px);}

/* ── 動きを 減らす 設定（★全部 止める）──────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero::before,.page-head::before{background:radial-gradient(120% 90% at 30% 40%,transparent 48%,rgba(12,16,15,.38) 88%);}
  .hero::after,.page-head::after{opacity:.06;}
  body.js .hero > .sweep,body.js .page-head > .sweep{animation:none;opacity:0;}
  body.js .hero h1 .l,body.js .hero .eyebrow,body.js .hero .sub,body.js .hero .who,
  body.js .page-head h1,body.js .page-head .eyebrow,body.js .page-head .sub{
    opacity:1;transform:none;filter:none;transition:none;}
  .rise{filter:none;}
  .rise.in{transition:none;}
  .rise.in .step .n::after{height:52px;transition:none;}
  body.js .state.now::before{animation:none;}
  .guide li:hover{padding-left:0;}
  .approval:hover{transform:none;}
}


/* ── 施工が 組み上がる 立体（hero3d）────────────────────────
   ★canvas は 枠いっぱい。★立体が 動いたら 控えの SVG を 下げる（.has3d）。
   ★three.js や WebGL が 無い ときは .has3d が 付かず、★SVG が そのまま 出ます。 */
.hero-split .sheet canvas.scene3d{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;}
.hero-split .sheet.has3d > svg{opacity:0;visibility:hidden;}
/* 狭い画面では 帯の 地に 敷く。★立体は 線が 細かいので すこし 濃く。
   ★★ただし 会社概要は 白い ボードが 出るので、★字の 後ろを 暗くして 読めるようにする。 */
@media (max-width:900px){
  .hero-split .sheet.has3d{opacity:.34;}
  .hero-split > .wrap{position:relative;}
  .hero-split > .wrap::after{content:"";position:absolute;inset:-24px -24px -40px -24px;z-index:-1;
    background:linear-gradient(180deg,rgba(35,40,38,0) 0%,rgba(35,40,38,.62) 16%,rgba(35,40,38,.86) 42%,rgba(35,40,38,.9) 100%);}
}

/* ── ★2026-10-06（代表指示「会社名をもっと大きく」）────────────────────
   ★D-056 は守る: 正式商号を **通常の書体**で 発行元表示として出す。
     ★太字にしない・ロゴ扱いにしない・「wonder wall」だけにしない。
   ★大きさだけ上げた: 頭の帯 15 → 21px ／ 足元 15 → 20px。
   ★狭い画面では 2行に折れるので、★そこだけ 少し落とす（★読めなくならない範囲）。 */
@media (max-width:520px){
  .brand{font-size:21px;}
  .site-foot h2{font-size:21px;}
}

/* ★figbox 2026-10-06（事業の 3つの 図を 3D に・代表指示）──────────
   ★代表「ここのアニメーションは 上と比べて 品質が低い。文章に 妥当な 動きに 変え、
     次世代・未来感のある 品質で」。
   ★元の .fig（SVG）は **控え**として 残す。★three.js が 動いたときだけ
     figbox に has3d が 付き、★SVG を 隠して canvas を 見せる。
   ★three.js が 読めない端末では has3d が 付かず、★元の 図が そのまま 出る。 */
.figbox{position:relative;width:100%;max-width:260px;justify-self:start;margin-top:6px;}
.figbox canvas.stage3d{display:none;width:100%;height:auto;}
.figbox.has3d canvas.stage3d{display:block;}
.figbox.has3d > svg.fig{display:none;}
.figbox > svg.fig{margin-top:0;max-width:none;width:100%;}
@media (min-width:860px){ .figbox{max-width:230px;justify-self:end;margin-top:0;} }
@media (max-width:620px){ .figbox{max-width:260px;justify-self:start;} }

/* ★★★規約・表記の 3枚（★D-243 追補1・★代表承認済み 2026-10-26）────────────
   ★本文は **40 の 公開版**（legal/*.md）── ★★当方は 1文字も 書いて いません。
   ★★だから ここは **読みやすさだけ**です（★字を 足す 飾りは 置かない）。
   ★色・書体は ブランドコアの トークン（上の :root）を そのまま 使います。 */
.legal{background:var(--ww-paper);padding:96px 0 72px;}
.legal .crumb{font-size:14px;color:var(--ww-muted-ink);margin:0 0 18px;}
.legal .crumb a{color:var(--ww-primary);}
.legal .doc{background:#fff;border:1px solid var(--ww-line);border-radius:10px;
  padding:32px 28px;max-width:860px;}
.legal .doc h1{font-family:var(--ww-font-ui);font-size:28px;line-height:1.4;margin:0 0 22px;}
.legal .doc h2{font-family:var(--ww-font-ui);font-size:19px;line-height:1.5;
  margin:34px 0 10px;padding-top:14px;border-top:1px solid var(--ww-line);}
.legal .doc h2:first-of-type{border-top:0;padding-top:0;}
.legal .doc h3{font-size:16px;margin:20px 0 8px;}
/* ★段落（★字下げの 深さを そのまま 段に する ── ★条文の 号・(a)(b) が 読める ように）。 */
.legal .doc p{font-size:15px;line-height:1.95;margin:0 0 10px;}
.legal .doc p.l1{padding-left:1.6em;}
.legal .doc p.l2{padding-left:3.2em;}
/* ★箇条（★原文は 行頭に - ── ★見た目を「・」に している）。 */
.legal .doc p.b{text-indent:-1em;padding-left:2.6em;}
.legal .doc strong{font-weight:700;}
.legal .doc a{color:var(--ww-primary);}
/* ★表（★狭い 画面でも 横に 流せる ように 箱で 囲む）。 */
.legal .tw{overflow-x:auto;margin:0 0 16px;}
.legal .tw.in{padding-left:1.6em;}
.legal .doc table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px;}
.legal .doc th,.legal .doc td{border:1px solid var(--ww-line);padding:9px 11px;
  text-align:left;vertical-align:top;line-height:1.85;}
.legal .doc th{background:var(--ww-primary-tint);white-space:nowrap;}
.legal .doc td:first-child{white-space:normal;}
/* ★掲載日と 断り。 */
.legal .asof{font-size:14px;color:var(--ww-muted-ink);margin:18px 0 4px;}
.legal .note{font-size:13px;color:var(--ww-muted-ink);margin:0 0 26px;line-height:1.8;}
/* ★目次（★長い 文書を 行き来する ため ── ★本文の あとに 置く）。 */
.legal .toc{border-top:1px solid var(--ww-line);padding-top:18px;max-width:860px;}
.legal .toc h2{font-family:var(--ww-font-ui);font-size:17px;margin:0 0 10px;}
.legal .toc ol{margin:0;padding-left:1.4em;columns:2;column-gap:28px;}
.legal .toc li{font-size:14px;line-height:1.9;break-inside:avoid;}
.legal .toc a{color:var(--ww-primary);}
@media (max-width:620px){
  .legal{padding:84px 0 56px;}
  .legal .doc{padding:22px 16px;border-radius:8px;}
  .legal .doc h1{font-size:23px;}
  .legal .toc ol{columns:1;}
}