/* ============================================================
   davie.jp トップページ専用のスタイル
   ------------------------------------------------------------
   このファイルは template-davie-home.php を使うページでだけ
   読み込まれます（functions.php で制御）。ほかのページには
   影響しません。

   保守するときの注意（いずれも見た目が壊れるため変更しないこと）

   1) .figure .imgscroll img
      後続の .figure img{width:100%} に負けないよう、意図的に
      詳細度を上げてあります。弱めると図が縮んで小さい画面で
      読めなくなります。

   2) td, th, li, figcaption, p { word-break: auto-phrase; }
      日本語を文節単位で折り返す指定です。外すと表のセル内で
      1〜2文字だけが最終行に落ちます。
      有効なのは Chrome / Edge 119 以降。未対応のブラウザでは
      通常の折り返しに戻るだけで、崩れません。

   3) nav.sect a.btn { color:#fff; }
      ヘッダーのボタンは赤地です。この指定が無いと文字が紺に
      なり、コントラスト比が基準（4.5:1）を下回ります。

   4) .davie-cycle .card:last-child::after { display:none; }
      display:none を外すと、既定の content:"→" が復活して
      4枚目のカードの右に行き先のない矢印が出ます。

   5) .nobr は display:inline-block です。
      white-space:nowrap に変えると、文節が枠に収まらないときに
      逃げ場がなく、見出しが横にはみ出します。
   ============================================================ */

  :root{
    --navy:#06004C; --red:#E50120; --bg:#FFFFFF;
    --gray-bg:#F5F5F7; --text:#1a1a2e; --muted:#555; --line:#DDD;
    --navy-2:#1b1466; --navy-pale:#eceaf5; --on-navy:#d8d6f0;
    --maxw:1080px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Meiryo","メイリオ",system-ui,sans-serif;
       color:var(--text);background:var(--bg);line-height:1.8;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* a11y */
  .skiplink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;padding:12px 20px;text-decoration:none;font-weight:bold;}
  .skiplink:focus{left:0;}
  .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;}
  a:focus-visible,.tablewrap:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
  .hero a:focus-visible,.cta a:focus-visible{outline:3px solid #fff;outline-offset:3px;}

  /* ヘッダー：白地＋ロゴ（FLTブランド規定＝白ベース） */
  header.site{background:#fff;border-bottom:1px solid var(--line);padding:14px 0;}
  header.site .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:14px;}
  .brand img{height:30px;width:auto;display:block;}  /* DAVIEロゴ（縦横比5.59:1）→ 幅168px */
  .btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:14px 28px;border-radius:6px;font-weight:bold;}
  .btn:hover{opacity:.9;}
  .btn.sm{padding:10px 18px;font-size:.95rem;}

  /* ヘッダーのセクションナビ。長い1枚ものの回遊用。主CTAと競合させないため赤ボタンにしない */
  nav.sect{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  nav.sect a{color:var(--navy);text-decoration:none;font-size:.9rem;font-weight:bold;
             border-bottom:2px solid transparent;padding:2px 0;}
  nav.sect a:hover{border-bottom-color:var(--red);}
  /* nav.sect a(0,1,2) が .btn(0,1,0) に勝ち、赤背景に紺文字でAA未達(3.92)だった */
  nav.sect a.btn{color:#fff;}
  @media(max-width:900px){
    nav.sect{gap:14px;}
    nav.sect a{font-size:.85rem;}
  }
  nav.sect .sect-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  /* スマホ：目次は横スクロールの1行にまとめ、CTAボタンは行を分けて全幅に置く
     （折り返すとリンクが1つだけ取り残され、ヘッダーが3行に伸びるため） */
  @media(max-width:600px){
    nav.sect{width:100%;gap:12px;}
    nav.sect .sect-links{flex-wrap:nowrap;overflow-x:auto;gap:18px;
      width:100%;padding-bottom:6px;-webkit-overflow-scrolling:touch;}
    nav.sect .sect-links a{white-space:nowrap;font-size:.85rem;}
    nav.sect .btn.sm{flex:0 0 100%;text-align:center;}
  }

  section{padding:64px 0;border-bottom:1px solid var(--line);}
  section.alt{background:var(--gray-bg);}
  h1{font-size:2.2rem;line-height:1.4;color:var(--navy);margin:.2em 0;}
  h2{font-size:1.6rem;color:var(--navy);border-left:6px solid var(--red);padding-left:14px;margin-top:0;}
  h3{color:var(--navy);margin-top:0;}
  .lead{font-size:1.2rem;color:var(--muted);}
  .note{color:var(--muted);font-size:.9rem;}
  .em{color:var(--red);font-weight:bold;}
  /* .closing は 1.2rem（19.2px）＝太字large text。内側の .em の赤がコントラスト基準3.0を満たす前提サイズ */
  .closing{font-size:1.2rem;color:var(--navy);font-weight:bold;}
  /* kicker は紺。赤は h2 左罫・CTA・.em に限定し「差し色」に留める（薄グレー地で赤13.6pxは4.43でコントラスト不足） */
  .kicker{color:var(--navy);font-weight:bold;font-size:.85rem;letter-spacing:.12em;margin:0 0 6px;}

  .hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;border-bottom:0;}
  .hero h1{color:#fff;} .hero .lead{color:var(--on-navy);}
  .hero .eyebrow{color:var(--on-navy);font-size:.95rem;letter-spacing:.08em;margin:0;}
  .hero .mission{color:var(--on-navy);font-size:.9rem;margin-top:36px;padding-top:16px;border-top:1px solid rgba(255,255,255,.25);}
  /* 要点3行：本文の手前に置く要約。紺地なので枠線は白の透過、強調は白太字で3.0以上を確保 */
  .hero .points{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
  /* FV：h1 の右隣に要点3行を置く */
  .hero-grid{display:grid;gap:28px;margin-top:10px;}
  .hero-grid h1{margin-top:0;}
  @media(min-width:880px){
    .hero-grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;}
    .hero .points{gap:16px;}
  }
  .hero .points li{border-left:3px solid rgba(255,255,255,.55);padding:2px 0 2px 16px;
                   color:var(--on-navy);font-size:1rem;line-height:1.75;}
  .hero .points li b{color:#fff;}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;}
  .grid.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
  .grid.g5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));}
  .grid.g6{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
  .card{border:1px solid var(--line);border-radius:8px;padding:24px;background:#fff;}
  .card.on{border:2px solid var(--red);}
  .card.flat{border:0;background:var(--gray-bg);}
  .card .step{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;border-radius:50%;background:var(--navy);color:#fff;font-weight:bold;font-size:.9rem;}
  .card.on .step{background:var(--red);}
  .card .en{color:var(--muted);font-size:.85rem;font-weight:bold;letter-spacing:.02em;}
  .card.on .en{color:var(--red);}
  /* 見出しの不自然な改行対策 */
  h1,h2,h3,h4,figcaption,caption,.declare,.closing{text-wrap:balance;}
  p,li,td,th,dd,dt{text-wrap:pretty;}
  /* 文節を割らずに改行させる。`white-space:nowrap` は使わない。
     nowrap だと「文節が入る枠より広い」ときにはみ出し、FVでは h1 が右カラムへ食い込んでいた
     （1440pxで108px・1280pxで14px・940pxで55px）。inline-block なら
       ・文節が収まる → 文節単位で改行（狙いどおり）
       ・文節が収まらない → 文節の内部で折り返す（はみ出さない）
     と、破綻したときの挙動だけが安全になる。900px以下での解除も不要になった。 */
  .nobr{display:inline-block;}
  /* ②の「いまの状況」ラベル */
  .card .stage-state{margin-top:auto;padding-top:12px;font-size:.85rem;font-weight:bold;color:var(--muted);}
  .card .stage-state.on{color:var(--red);}
  /* ④の「意思決定の負債」チェックリスト */
  .debt-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
  .debt-list li{position:relative;padding:12px 16px 12px 40px;border:1px solid var(--line);background:#fff;font-weight:bold;color:var(--navy);}
  .debt-list li::before{content:"";position:absolute;left:16px;top:50%;width:10px;height:10px;margin-top:-5px;background:var(--red);}
  @media(min-width:720px){.debt-list{grid-template-columns:1fr 1fr;}}

  .flag{color:var(--red);font-weight:bold;font-size:.8rem;border:1px solid var(--red);border-radius:4px;padding:0 6px;margin-left:6px;white-space:nowrap;}
  .flagline .flag{margin-left:0;margin-right:8px;}

  .figure{margin:0;}
  .placeholder{background:var(--navy-pale);border:1px dashed var(--navy);color:var(--navy);text-align:center;padding:44px 16px;border-radius:8px;}
  .placeholder .note{display:block;margin-top:12px;}
  .figure figcaption{margin-top:8px;}

  /* 宣言文（②のリード）。常体で残す4箇所のうちの1つ */
  .declare{font-size:1.35rem;font-weight:bold;color:var(--navy);
           border-left:6px solid var(--navy);padding-left:14px;margin:20px 0 24px;line-height:1.6;}
  @media(max-width:600px){ .declare{font-size:1.15rem;} }


  /* 図解（インラインSVG）。表と同じく、はみ出しはコンテナ内に閉じる */
  .svgfig{margin:0;}
  .figscroll{overflow-x:auto;}
  /* ラスター図2点（全体像・業界別適用イメージ）が狭い画面で判読不能だった。
     図の中の文字は元画像1280px幅の設計なので、縮めると潰れる。
     そこで表・SVG図と同じ「枠内で横スクロール」の型に揃え、デスクトップと同じ表示幅を保つ。
     JSは使わない（JS無効でも本文が読める方針を維持）。 */
  .imgscroll{overflow-x:auto;}
  .imgscroll img{display:block;max-width:100%;height:auto;}
  @media(max-width:1100px){
    /* 後段の `.figure img{width:100%}` に負けないよう詳細度を上げる（同点だと後勝ちのため） */
    .figure .imgscroll img{width:1100px;max-width:none;}
    .imgscroll{border:1px solid var(--line);}
  }
  .figscroll svg{min-width:680px;width:100%;height:auto;display:block;}
  .figscroll:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

  .tablewrap{overflow-x:auto;}
  table{border-collapse:collapse;width:100%;min-width:600px;background:#fff;}
  th,td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;font-size:.95rem;}
  thead th{background:var(--navy);color:#fff;}
  tbody th{background:var(--gray-bg);color:var(--navy);white-space:nowrap;}
  td.davie{color:var(--navy);font-weight:bold;}
  /* 現在地の行は淡赤の背景で示す。文字は紺（赤15.2pxでは淡赤地で4.19となり基準未達のため） */
  tr.now th,tr.now td{background:#fdeaed;}
  tr.now th{color:var(--navy);}

  .chain{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-top:8px;}
  .chain div{flex:1 1 150px;border:1px solid var(--line);border-radius:8px;padding:14px;background:#fff;}
  .chain div b{display:block;color:var(--navy);}
  .chain div span{color:var(--muted);font-size:.85rem;}
  .chain .arrow{flex:0 0 auto;border:0;background:none;display:flex;align-items:center;color:var(--navy);font-weight:bold;padding:0 2px;}

  .tag{display:inline-block;background:var(--navy);color:#fff;border-radius:4px;padding:6px 14px;margin:4px 6px 4px 0;font-size:.95rem;}
  .tag.out{background:#fff;color:var(--red);border:1px solid var(--red);}

  .layers{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;}
  .layers div{padding:14px 18px;border-top:1px solid var(--line);}
  .layers div:first-child{border-top:0;}
  .layers div b{color:var(--navy);}
  .layers div.base{background:var(--navy);color:#fff;}
  .layers div.base b{color:#fff;}
  .layers div.base span{color:var(--on-navy);}
  .layers span{color:var(--muted);font-size:.9rem;}

  /* 関連ページ（PdMへの相互リンク）。主CTAと競合しないよう赤ボタンにはしない */
  .related-label{font-size:.85rem;font-weight:bold;color:var(--navy);letter-spacing:.08em;margin:0 0 10px;}
  .related-link{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    border:1px solid var(--navy);border-radius:8px;padding:18px 22px;background:#fff;
    text-decoration:none;}
  .related-link:hover{background:var(--gray-bg);}
  /* 提供中のファミリーが2件以上になったので、リンク同士の間隔を入れる */
  .related-link + .related-link{margin-top:12px;}
  /* 2枚のカードで製品名の幅が違い（220px と 193px）、説明の開始位置が27pxずれていた。
     製品名に最小幅を与えて、2枚の「製品名」「説明」の列を揃える。
     640px 未満は要素が折り返して縦積みになるので、この指定は効かせない。 */
  @media(min-width:560px){
    .rl-name{min-width:232px;}
  }
  .rl-name{font-weight:bold;color:var(--navy);font-size:1.05rem;white-space:nowrap;}
  .rl-desc{color:var(--muted);font-size:.9rem;flex:1 1 260px;}
  .rl-go{color:var(--red);font-weight:bold;font-size:1.1rem;}

  .cta{background:var(--navy);color:#fff;text-align:center;}
  .cta h2{color:#fff;border:0;padding-left:0;}
  /* ⑩の kicker が紺地に紺文字で不可視だった（コントラスト比1.00）。他8節の kicker は見えている */
  .cta .kicker{color:var(--on-navy);}
  .cta .lead,.cta .sub,.cta .note{color:var(--on-navy);}
  /* 紺地では赤のフラグ表示が2.92でコントラスト不足になるため白抜きにする */
  .cta .flag{color:#fff;border-color:rgba(255,255,255,.75);}

  /* フッターを子(製品ページ)と同じ形に揃える＝左にロゴ／右に会社情報／その下に目次を中央揃えで横並び */
  footer{padding:44px 0 36px;color:var(--muted);font-size:.85rem;}
  footer p{margin:.35em 0;}
  .foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;}
  .foot-logo img{height:56px;width:auto;display:block;margin-bottom:0;}
  .foot-info{text-align:right;}
  .foot-info .foot-name{color:var(--navy);font-weight:bold;font-size:.95rem;}
  .foot-info a{color:var(--muted);}
  .foot-info a:hover{color:var(--navy);}
  .foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);}
  .foot-links a{color:var(--navy);text-decoration:none;font-weight:bold;font-size:.9rem;
       border-bottom:2px solid transparent;padding:2px 0;}
  .foot-links a:hover{border-bottom-color:var(--red);}
  .foot-copy{margin-top:24px;}
  @media(max-width:700px){
    .foot-top{flex-direction:column;gap:18px;}
    .foot-info{text-align:left;}
  }
  img{max-width:100%;height:auto;}
  .mt24{margin-top:24px;} .mt32{margin-top:32px;}
  @media(max-width:600px){
    h1{font-size:1.7rem;} h2{font-size:1.35rem;} section{padding:48px 0;}
  }
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

  /* ================================================================
     DAVIE トップページのデザイン
     copy, Meiryo, images, SVGs and color palette are preserved.
     ================================================================ */
  html{scroll-behavior:smooth;scroll-padding-top:86px;}
  body{letter-spacing:.01em;}
  body::before{content:"";position:fixed;right:18px;top:108px;bottom:38px;width:2px;z-index:30;pointer-events:none;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 34%,var(--red) 34%,var(--red) 42%,var(--line) 42%,var(--line) 100%);}
  .wrap{max-width:1180px;}
  header.site{position:sticky;top:0;z-index:40;padding:10px 0;border-bottom:3px solid var(--navy);box-shadow:none;}
  .brand img{height:28px;}
  nav.sect a{letter-spacing:.07em;border-bottom-width:3px;}
  .btn{border-radius:0;clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));letter-spacing:.045em;transition:transform .18s ease,opacity .18s ease;}
  .btn:hover{transform:translateY(-2px);}

  section{padding:98px 0;position:relative;overflow:hidden;border-bottom:1px solid var(--navy);}
  section.alt{background-color:var(--gray-bg);background-image:linear-gradient(rgba(6,0,76,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(6,0,76,.035) 1px,transparent 1px);background-size:32px 32px;}
  section:not(.hero):not(.cta) > .wrap{position:relative;}
  section:not(.hero):not(.cta) > .wrap::before,
  section:not(.hero):not(.cta) > .wrap::after{content:"";position:absolute;width:24px;height:24px;pointer-events:none;}
  section:not(.hero):not(.cta) > .wrap::before{left:0;top:-52px;border-left:1px solid var(--navy);border-top:1px solid var(--navy);}
  section:not(.hero):not(.cta) > .wrap::after{right:0;bottom:-52px;border-right:1px solid var(--navy);border-bottom:1px solid var(--navy);}
  h2{font-size:clamp(1.5rem,2.7vw,2.35rem);line-height:1.48;letter-spacing:.02em;border-left:0;border-bottom:1px solid var(--navy);padding:0 0 20px;margin-bottom:32px;position:relative;max-width:980px;}
  h2::after{content:"";position:absolute;left:0;bottom:-2px;width:108px;border-bottom:4px solid var(--red);}
  h3{line-height:1.55;}
  .kicker{display:flex;align-items:center;gap:13px;font-size:.78rem;letter-spacing:.22em;}
  .kicker::before{content:"";width:44px;height:3px;background:var(--red);}
  .lead{line-height:1.95;max-width:920px;}
  .declare{border-left:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);padding:19px 24px;background:var(--navy-pale);}

  /* Core sections become system surfaces, not ordinary content bands. */
  section.tech-dark{background:var(--navy);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;color:#fff;}
  section.tech-dark h2,section.tech-dark h3,section.tech-dark .lead,section.tech-dark .closing{color:#fff;}
  section.tech-dark h2{border-bottom-color:rgba(255,255,255,.38);}
  section.tech-dark .kicker,section.tech-dark .note,section.tech-dark .en{color:var(--on-navy);}
  section.tech-dark:not(.hero):not(.cta) > .wrap::before,
  section.tech-dark:not(.hero):not(.cta) > .wrap::after{border-color:rgba(255,255,255,.46);}
  section.tech-dark .card{background:var(--navy-2);color:#fff;border-color:rgba(255,255,255,.42);}
  section.tech-dark .card h3{color:#fff;}
  section.tech-dark .card.on{border-color:var(--red);}

  /* First view: asymmetric command surface. */
  .hero{min-height:calc(100vh - 70px);display:flex;align-items:center;padding:106px 0 68px;background:linear-gradient(110deg,var(--navy) 0%,var(--navy) 64%,var(--navy-2) 64%,var(--navy-2) 100%);position:relative;}
  .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:40px 40px;mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.92));pointer-events:none;}
  /* FV右の層状フレーム（.hero::after）を削除。
     要点3行のボックスが既に白1px枠＋上辺4pxの赤＋右下の赤いカギ括弧を持っており、枠が二重になって
     視線が分散していたため。狭い画面では元から display:none にしており、無くても成立する装飾だった。
     ※ 残す装飾：.hero::before（方眼グリッド）／.hero-main::before（h1左の赤バー）／
       .hero-points::before（要点ボックス右下の赤カギ括弧）／背景の斜め分割 */
  .hero > .wrap{position:relative;z-index:1;}
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr)!important;gap:76px!important;align-items:center!important;}
  .hero-main{position:relative;padding:30px 0 30px 34px;border-left:1px solid rgba(255,255,255,.44);}
  .hero-main::before{content:"";position:absolute;left:-4px;top:30px;width:7px;height:88px;background:var(--red);}
  /* 上限を 5.25rem → 3.9rem。左カラムは最大696pxで頭打ちなのに、5.8vw のフォントは
     画面幅とともに伸び続けるため、「会社の資産に変える。」（10文字）が文節のまま収まらず
     3行に割れていた（1440pxで84px×10文字＝840px > 643px）。3.9rem＝62.4pxなら 624px で収まり、
     どの画面幅でも「現場の意思決定を、／会社の資産に変える。」の2行に揃う。実測で 4.1rem は3行・3.9rem は2行。 */
  .hero h1{font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1.15;letter-spacing:.012em;max-width:800px;}
  .hero .eyebrow{letter-spacing:.15em;}
  .hero-points{position:relative;border:1px solid rgba(255,255,255,.45);border-top:4px solid var(--red);background:rgba(6,0,76,.52);padding:32px 28px;}
  .hero-points::before{content:"";position:absolute;right:-1px;bottom:-1px;width:30px;height:30px;border-right:5px solid var(--red);border-bottom:5px solid var(--red);}
  .hero .points li{position:relative;border-left:1px solid rgba(255,255,255,.34);padding:0 0 25px 27px;}
  .hero .points li:last-child{padding-bottom:0;}
  .hero .points li::before{content:"";position:absolute;left:-5px;top:.56em;width:9px;height:9px;background:var(--red);box-shadow:0 0 0 5px rgba(229,1,32,.15);animation:signal-pulse 2.9s ease-in-out infinite;}
  .hero .points li:nth-child(2)::before{animation-delay:.45s;}
  .hero .points li:nth-child(3)::before{animation-delay:.9s;}
  .hero .mission{letter-spacing:.055em;border-top-color:rgba(255,255,255,.36);}

  /* Shared industrial module grammar. */
  .grid{gap:16px;}
  .card{position:relative;border-radius:0;border-color:var(--navy);box-shadow:none;transition:transform .18s ease,border-color .18s ease,background-color .18s ease;}
  .card:hover{transform:translateY(-4px);border-color:var(--red);}
  .card.on{border-width:1px;border-left:5px solid var(--red);box-shadow:none;}
  .card.flat{border:1px solid var(--navy);}
  .card .step{border-radius:0;}
  .tablewrap{border:1px solid var(--navy);box-shadow:none;background:#fff;}
  th,td{padding:15px 16px;}
  tbody tr:nth-child(even) td{background:var(--gray-bg);}
  .related-link,.layers,.placeholder{border-radius:0;}
  .layers{box-shadow:none;}
  .tag{border-radius:0;}

  /* Existing SVGs become active system displays. */
  .svgfig{position:relative;margin-top:38px!important;padding:12px;background:var(--navy);border:1px solid var(--navy);}
  .svgfig::before,.svgfig::after{content:"";position:absolute;z-index:3;width:30px;height:30px;pointer-events:none;}
  .svgfig::before{left:-1px;top:-1px;border-left:5px solid var(--red);border-top:5px solid var(--red);}
  .svgfig::after{right:-1px;bottom:-1px;border-right:5px solid var(--red);border-bottom:5px solid var(--red);}
  .figscroll{position:relative;background:#fff;padding:18px;}
  .svgfig figcaption{color:var(--on-navy);padding:10px 6px 0;margin:0;}
  .figure{position:relative;border:1px solid var(--navy);box-shadow:none;background:#fff;}
  .figure::before{content:"";position:absolute;left:-1px;top:-1px;width:50px;border-top:5px solid var(--red);z-index:2;}
  .figure img{display:block;width:100%;}

  /* Worldview: unequal modules emphasize the current competitive layer. */
  .grid.evolution-flow{grid-template-columns:1fr 1fr 1.24fr .9fr;gap:10px;margin-top:34px;}
  .evolution-flow .card{min-width:0;padding:62px 22px 25px;border-top:4px solid var(--navy);}
  .evolution-flow .card .step{position:absolute;left:22px;top:18px;}
  .evolution-flow .card::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);z-index:3;width:31px;height:31px;line-height:31px;text-align:center;background:var(--navy);color:#fff;font-weight:bold;}
  .evolution-flow .card:last-child::after{display:none;}
  .evolution-flow .card.on{background:var(--navy);color:#fff;border:1px solid var(--red);border-top:6px solid var(--red);transform:translateY(-14px);}
  .evolution-flow .card.on h3{color:#fff;}
  .evolution-flow .card.on::after{background:var(--red);}

  /* Issues connect to one broken decision bus. */
  .grid.issue-map{grid-template-columns:repeat(3,1fr);position:relative;padding-top:26px;}
  .issue-map::before{content:"";position:absolute;left:16.67%;right:16.67%;top:9px;border-top:2px solid var(--navy);}
  .issue-map .card{border-top:4px solid var(--navy);}
  .issue-map .card::before{content:"";position:absolute;left:50%;top:-19px;height:19px;border-left:2px solid var(--navy);}
  .issue-map .card::after{content:"";position:absolute;left:calc(50% - 5px);top:-26px;width:10px;height:10px;background:var(--red);}
  .issue-map .card:nth-child(2){margin-top:24px;}

  /* System of Decision is physically placed above retained systems. */
  .grid.system-stack{grid-template-columns:1fr!important;gap:0;max-width:980px;margin-left:auto;margin-right:auto;}
  .system-stack .card{border-radius:0;padding:28px 34px;}
  .system-stack .card.on{order:1;margin:0 76px;background:var(--navy-2);z-index:2;}
  .system-stack .card.on::after{content:"↓";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);width:38px;height:38px;line-height:38px;text-align:center;background:var(--red);color:#fff;font-weight:bold;z-index:4;animation:route-pulse 2.9s ease-in-out infinite;}
  .system-stack .card.flat{order:2;padding-top:38px;background:var(--navy);border-color:rgba(255,255,255,.52);}

  /* DAVIE engine, decision chain and reusable package. */
  .grid.davie-cycle{grid-template-columns:repeat(5,1fr);gap:10px;margin-top:34px;}
  .davie-cycle .card{min-width:0;border-top:4px solid var(--navy);padding-top:35px;}
  .davie-cycle .card::before{content:"";position:absolute;left:23px;top:18px;width:38px;border-top:3px solid var(--navy);}
  .davie-cycle .card::after{content:"→";position:absolute;right:-16px;top:50%;transform:translateY(-50%);z-index:3;width:31px;height:31px;line-height:31px;text-align:center;background:#fff;border:1px solid var(--navy);color:var(--navy);font-weight:bold;animation:route-pulse 2.8s ease-in-out infinite;}
  .davie-cycle .card:last-child::after{display:none;} /* ↻を削除。単純削除だと基底の content:"→" が復活し、行き止まりの矢印になる */
  .davie-cycle .card.on{background:var(--navy);color:#fff;border-color:var(--red);}
  .davie-cycle .card.on h3{color:#fff;}
  .decision-chain{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:7px;margin:30px 0;align-items:center;}
  .decision-chain div:not(.arrow){min-height:128px;border-radius:0;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,0 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:2px solid var(--navy);background:#fff;}
  .decision-chain div:not(.arrow):last-child{border-color:var(--red);}
  .decision-chain .arrow{font-size:1.4rem;color:var(--red);animation:route-pulse 2.8s ease-in-out infinite;}
  .grid.package-map{grid-template-columns:repeat(3,1fr);grid-template-rows:auto 52px auto;gap:14px 24px;position:relative;isolation:isolate;}
  .package-map::before{content:"";grid-column:2;grid-row:2;align-self:center;justify-self:center;width:38px;height:38px;background:var(--red);box-shadow:0 0 0 12px var(--navy-pale);z-index:2;}
  .package-map::after{content:"";position:absolute;left:16.67%;right:16.67%;top:50%;border-top:2px solid var(--navy);z-index:-1;}
  .package-map .card{border:1px solid var(--navy);background:#fff;text-align:center;min-width:0;}
  .package-map .card:nth-child(-n+3){grid-row:1;}
  .package-map .card:nth-child(n+4){grid-row:3;}

  /* Decision Package を設計定義の14要素に合わせて 6 → 11 要素へ拡張。
     6枚固定の菱形コネクタ（.package-map）は要素数が変わったため使用をやめ、
     「前提 → 中身 → 結果と学習」の3つのまとまりに分けて示す。 */
  .pkg-group{font-size:1rem;font-weight:bold;color:var(--navy);margin:24px 0 12px;padding-left:16px;position:relative;}
  .pkg-group::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;background:var(--red);}
  .pkg-grid .card{border:1px solid var(--navy);background:#fff;text-align:center;min-width:0;}
  .pkg-grid .icon-box{margin-left:auto;margin-right:auto;}

  /* Governance, family architecture and customer value. */
  .grid.principles-grid{grid-template-columns:1fr 1fr 1.28fr;gap:12px;}
  .principles-grid .card{border-top:4px solid var(--navy);}
  .principles-grid .card.on{background:var(--navy);color:#fff;border-color:var(--red);}
  .principles-grid .card.on h3{color:#fff;}
  .grid.family-map{grid-template-columns:repeat(5,1fr);gap:10px;padding-top:34px;position:relative;}
  .family-map::before{content:"";position:absolute;left:10%;right:10%;top:16px;border-top:2px solid rgba(255,255,255,.56);}
  .family-map .card{min-width:0;padding:23px 18px;border-top:4px solid #fff;}
  .family-map .card::before{content:"";position:absolute;left:50%;top:-21px;height:21px;border-left:2px solid rgba(255,255,255,.56);}
  .family-map .card:nth-child(3){background:var(--navy);border-color:var(--red);transform:translateY(-13px);}
  .family-section .related-label{color:#fff;}
  .family-section .layers{border-color:rgba(255,255,255,.45);background:var(--navy-2);}
  .family-section .layers div{border-color:rgba(255,255,255,.26);display:grid;grid-template-columns:minmax(230px,.42fr) 1fr;gap:24px;padding:18px 24px;}
  .family-section .layers div:not(.base){background:var(--navy-2);}
  .family-section .layers div b{color:#fff;}
  .family-section .layers div span{color:var(--on-navy);}
  .grid.io-map{grid-template-columns:1fr 1fr;gap:78px;position:relative;}
  .io-map::after{content:"→";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px;line-height:46px;text-align:center;background:var(--red);color:#fff;font-weight:bold;font-size:1.25rem;animation:route-pulse 2.8s ease-in-out infinite;}
  .io-map .card{border-top:4px solid var(--navy);background:#fff;}
  .grid.value-map{grid-template-columns:repeat(3,1fr);}
  .value-map .card{padding-left:56px;border-left:4px solid var(--navy);}
  .value-map .card::before{content:"";position:absolute;left:24px;top:32px;width:12px;height:12px;background:var(--red);box-shadow:0 0 0 5px var(--navy-pale);}
  .grid.role-map{grid-template-columns:1fr 1.18fr 1fr;margin-top:28px;}
  .role-map .card{border-top:4px solid var(--navy);}
  .role-map .card:nth-child(2){background:var(--navy);color:#fff;border-color:var(--red);transform:translateY(-10px);}
  .role-map .card:nth-child(2) h3{color:#fff;}

  .cta{padding:106px 0;background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:32px 32px;}
  /* 見出し2のサイズを1本化するため、CTAの特大指定は使わない（下の一括指定に従う） */
  footer{border-top:4px solid var(--red);}

  @keyframes signal-pulse{0%,100%{opacity:.58;transform:scale(.84);}45%{opacity:1;transform:scale(1);}}
  @keyframes route-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}

  @media(max-width:900px){
    body::before{display:none;}
    .hero{min-height:auto;background:linear-gradient(180deg,var(--navy) 0%,var(--navy) 67%,var(--navy-2) 67%,var(--navy-2) 100%);}
    .hero-grid{grid-template-columns:1fr!important;gap:48px!important;}
    .grid.evolution-flow,.grid.davie-cycle{grid-template-columns:1fr 1fr;}
    .evolution-flow .card:nth-child(2)::after,.davie-cycle .card:nth-child(2)::after{display:none;}
  /* ⑥が5枚になったため、2列時は4枚目も行末になる */
  .davie-cycle .card:nth-child(4)::after{display:none;}
    .decision-chain{grid-template-columns:1fr;justify-items:center;gap:0;}
    .decision-chain div:not(.arrow){width:min(300px,74vw);min-height:110px;}
    .decision-chain .arrow{transform:rotate(90deg);padding:4px;}
    .grid.family-map{grid-template-columns:repeat(2,1fr);padding-top:0;}
    .family-map::before,.family-map .card::before{display:none;}
    .family-map .card:nth-child(3){transform:none;}
    .family-map .card:nth-child(5){grid-column:1/-1;}
  }
  @media(max-width:600px){
    html{scroll-padding-top:16px;}
    header.site{position:relative;}
    section{padding:62px 0;}
    section:not(.hero):not(.cta) > .wrap::before,
    section:not(.hero):not(.cta) > .wrap::after{display:none;}
    .hero{padding:70px 0 54px;}
    .hero-main{padding-left:23px;}
    /* .hero-main の左パディング23pxぶんを差し引いても
       「会社の資産に変える。」10字が1行に収まるサイズにする（320px でも割れない）。 */
    .hero h1{font-size:clamp(1.45rem,7.4vw,2.6rem);}
    .hero-points{padding:26px 21px;}
    .grid.evolution-flow,.grid.issue-map,.grid.davie-cycle,.grid.principles-grid,.grid.family-map,.grid.io-map,.grid.value-map,.grid.role-map{grid-template-columns:1fr;}
    .evolution-flow .card.on,.role-map .card:nth-child(2){transform:none;}
    .evolution-flow .card::after,.davie-cycle .card::after{content:"↓";right:auto;left:50%;top:auto;bottom:-16px;transform:translateX(-50%);}
    .evolution-flow .card:nth-child(2)::after,.davie-cycle .card:nth-child(2)::after{display:block;}
  .davie-cycle .card:nth-child(4)::after{display:block;}
    .evolution-flow .card:last-child::after{display:none;}
    .davie-cycle .card:last-child::after{display:none;} /* モバイルでも同様に非表示 */
    .issue-map{padding-top:0!important;}
    .issue-map::before,.issue-map .card::before,.issue-map .card::after{display:none;}
    .issue-map .card:nth-child(2){margin-top:0;}
    .system-stack .card.on{margin:0 14px;}
    .grid.package-map{grid-template-columns:1fr;grid-template-rows:auto;}
    /* 1カラムになると、赤い正方形と縦線は「2段の区切り」という意味を失い、
       カードの間に赤い四角が浮いているようにしか見えない。狭い画面では出さない。 */
    .package-map::before,.package-map::after{display:none;}
    .package-map .card:nth-child(n){grid-column:1;grid-row:auto;z-index:1;}
    .family-map .card:nth-child(5){grid-column:auto;}
    .family-section .layers div{grid-template-columns:1fr;gap:5px;}
    .io-map{gap:66px!important;}
    .io-map::after{content:"↓";}
    .svgfig{padding:7px;}
    .figscroll{padding:10px;}
    .card:hover{transform:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .hero .points li::before,.system-stack .card.on::after,.davie-cycle .card::after,.decision-chain .arrow,.io-map::after{animation:none;}
    .card,.btn{transition:none;}
  }

  /* Embedded icon system: one visual vocabulary across every major diagram. */
  .icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
  .icon-box{position:relative;width:50px;height:50px;display:grid;place-items:center;margin:0 0 18px;color:var(--navy);background:var(--navy-pale);border:1px solid var(--navy);flex:0 0 auto;}
  .icon-box::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;background:var(--red);}
  .icon-box svg{width:26px;height:26px;display:block;overflow:visible;}
  .card.on .icon-box{color:#fff;background:var(--red);border-color:var(--red);}
  .card.on .icon-box::after{background:#fff;}
  section.tech-dark .icon-box{color:#fff;background:var(--navy);border-color:rgba(255,255,255,.55);}
  section.tech-dark .icon-box::after{background:var(--red);}
  section.tech-dark .card.on .icon-box{background:var(--red);border-color:var(--red);}
  .evolution-flow .icon-box{margin-top:4px;}
  .system-stack .icon-box{float:left;margin:1px 22px 8px 0;}
  .system-stack .card::after{clear:both;}
  .davie-cycle .icon-box{margin-top:5px;}
  .decision-chain .icon-box{width:39px;height:39px;margin:0 0 9px;background:var(--navy);color:#fff;border-color:var(--navy);}
  .decision-chain .icon-box::after{width:8px;height:8px;}
  .decision-chain .icon-box svg{width:21px;height:21px;}
  .package-map .icon-box{margin-left:auto;margin-right:auto;}
  .principles-grid .icon-box,.family-map .icon-box{width:46px;height:46px;}
  .family-map .icon-box{background:var(--navy);}

  /* ==================== ⑧ Family カード：ラインナップをモーダルで出す ====================
     dialog 要素の showModal() を使う。
     ・top layer に描かれるため、節の overflow:hidden に切り落とされない
     ・Esc で閉じる／背面の要素にフォーカスが移らない／閉じたら開いたボタンへ戻す
     ・背面（backdrop）のクリックでも閉じる
     いまは Solution（5枚目）だけ。他の4枚も同じ構造で足せる。 */
  /* 5枚は説明文の長さが違うため、そのままだとボタンの高さが揃わない。
     カードを縦のフレックスにして、ボタンだけ下端に寄せる。
     icon-box は幅・高さを持っているので stretch の影響を受けない。 */
  .family-map .card{display:flex;flex-direction:column;}
  .family-map .fam-more{margin-top:auto;align-self:flex-start;}
  .fam-more{display:inline-block;margin-top:12px;font:inherit;font-size:.85rem;font-weight:bold;
            color:#fff;background:none;border:0;border-bottom:2px solid var(--red);
            padding:0 0 2px;cursor:pointer;}
  .fam-more::after{content:"＋";margin-left:7px;}
  .fam-more:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

  /* dialog を知らないブラウザでは未知要素＝display:inline になり、開いていない中身が
     本文として露出する。対応ブラウザではUAスタイルと同じ挙動なので見た目は変わらない。 */
  .fam-modal:not([open]){display:none;}
  .fam-modal[open]{display:block;}
  .fam-modal{border:0;padding:0;background:transparent;width:min(560px,92vw);max-width:none;}
  .fam-modal::backdrop{background:rgba(6,0,76,.62);}
  .fam-modal-in{background:#fff;color:var(--text);text-align:left;
                border:1px solid var(--navy);border-top:5px solid var(--red);
                padding:28px 30px 24px;box-shadow:0 18px 50px rgba(0,0,0,.40);}
  .fam-modal-kicker{margin:0 0 6px;font-size:.85rem;font-weight:bold;color:var(--red);letter-spacing:.06em;}
  .fam-modal-t{margin:0 0 18px;font-size:1.35rem;font-weight:bold;color:var(--navy);line-height:1.5;}
  .fam-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;}
  .fam-list li{font-size:1rem;color:var(--text);padding-left:18px;position:relative;line-height:1.6;}
  .fam-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--red);}
  .fam-modal-close{margin-top:24px;font:inherit;font-size:1rem;font-weight:bold;color:#fff;
                   background:var(--navy);border:1px solid var(--navy);padding:10px 26px;cursor:pointer;}
  .fam-modal-close:hover{background:var(--red);border-color:var(--red);}
  .fam-modal-close:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
  .io-map .icon-box{width:56px;height:56px;}
  .value-map .icon-box,.role-map .icon-box{width:44px;height:44px;}
  .value-map .icon-box svg,.role-map .icon-box svg{width:23px;height:23px;}
  .value-map .card{padding-left:24px;}
  .value-map .card::before{display:none;}
  /* All five Family modules share one resting state; hover reveals the active state. */
  /* Decision だけ上罫が白100%で他4枚（白42%）と違っていたため揃える */
  .family-map .card:nth-child(3){background:var(--navy-2);border-color:rgba(255,255,255,.42);transform:none;}
  .family-map .card,.family-map .icon-box{transition:background-color .24s ease,border-color .24s ease,transform .24s ease;}
  @media(hover:hover){
    .family-map .card:hover{background:var(--navy);border-color:var(--red);transform:translateY(-13px);z-index:2;}
    .family-map .card:hover .icon-box{background:var(--red);border-color:var(--red);transform:translateY(-2px);}
  }
  @media(max-width:600px){
    .system-stack .icon-box{float:none;margin-right:0;}
    .icon-box{width:46px;height:46px;}
  }

  /* Large, image-led industry panels. */
  .industry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0 18px;}
  .industry-card{position:relative;aspect-ratio:16/10;min-height:330px;overflow:hidden;background:var(--navy);border:1px solid var(--navy);isolation:isolate;transition:border-color .25s ease,transform .25s ease;}
  /* aspect-ratio と min-height の併用で、列幅より広い幅を要求してカードが画面外へ出ていた
     （768pxで+153px・900pxで+87px・1024pxで+25px・375pxで+22px）。
     列が 330px×16/10＝528px に満たない幅では aspect-ratio を外し、高さで伸ばす。 */
  @media(max-width:1200px){ .industry-card{aspect-ratio:auto;} }
  .industry-card::before{content:"";position:absolute;right:-1px;top:-1px;width:42px;height:42px;border-right:6px solid var(--red);border-top:6px solid var(--red);z-index:4;}
  .industry-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,0,76,0) 36%,rgba(6,0,76,.26) 58%,rgba(6,0,76,.94) 100%);z-index:1;pointer-events:none;}
  .industry-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease,filter .3s ease;}
  .industry-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px;}
  .industry-card h4{display:inline-block;margin:0;color:#fff;background:rgba(6,0,76,.9);border-left:5px solid var(--red);padding:10px 18px;font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.35;letter-spacing:.055em;}
  @media(hover:hover){
    .industry-card:hover{border-color:var(--red);transform:translateY(-5px);}
    .industry-card:hover img{transform:scale(1.045);filter:contrast(1.04);}
  }
  @media(max-width:700px){
    .industry-grid{grid-template-columns:1fr;}
    /* 4/3 と min-height:280px の併用で 375px でも +22px はみ出していたため aspect-ratio を外す */
    .industry-card{aspect-ratio:auto;min-height:280px;}
    .industry-card-body{padding:20px;}
  }
  @media(prefers-reduced-motion:reduce){
    .industry-card,.industry-card img{transition:none;}
  }

  /* 「表セル内で1〜2文字だけ最終行に落ちる」の是正。
     日本語を文節単位で折り返す。1280/1024/768px の実測で 6/3/7件 → 0/0/1件。
     word-break:auto-phrase は Chrome・Edge 119+ で有効。未対応ブラウザは従来の折り返しに戻るだけで劣化しない。
     見出し(h1〜h3)には掛けない：.nobr（inline-block）で解決済みのため、そちらを乱さない。 */
  td,th,li,figcaption,p{word-break:auto-phrase;}

  /* ======== 内容改訂にともなって追加した規則 ========
     既存の規則は1つも消していない（正規表現で消して隣の規則と結合した事故があるため）。
     ②の .stage-state ／⑤の .system-stack ／⑧の .layers は、要素が無くなったため
     効かなくなるだけで、規則自体は残してある。 */

  /* ⑥：ループを小見出しとして立てたため、その配下が h4 になった。
     h4 はこれまで未使用でブラウザ既定のままだったので、見た目を与える。 */
  h4{color:var(--navy);margin-top:0;line-height:1.55;font-size:1.05rem;}
  section.tech-dark h4{color:#fff;}

  /* ⑥：ループの小見出しは「ここから下がひと続きの仕組み」であることを示す。 */
  /* .loop-head の上罫は、見出し3が枠付きになったため不要（下の一括指定に従う） */
  .loop-head .loop-sub{display:block;margin-top:5px;font-size:.85rem;font-weight:normal;
                       color:var(--muted);letter-spacing:.02em;}


  /* ⑧：PdMカードに「Solution Family」の冠を付ける。
     .related-link は background:#fff のままなので、赤は白地で 5.9＝AA を満たす。 */
  /* 語の途中で切れると読みにくい短い語句を、素の nowrap で1かたまりにする。
     inline-block（.nobr）は箱の直後に改行機会を作るため、文中ではこちらを使う。 */
  .keep{white-space:nowrap;}

  .rl-crown{display:block;width:100%;margin:0 0 -6px;font-size:.78rem;font-weight:bold;
            letter-spacing:.14em;color:var(--red);}

  @media(min-width:1024px){
    /* ==================== 文字サイズの統一 ====================
       かつては h2 が3サイズ（33.6／34.56／40.96px）、h4 が2サイズ（16.8／28.16px）、
       .lead が2サイズ（19.2／17.6px）に割れていた。役割ごとに1サイズへ揃える。 */

    /* 見出し2：#s2/#s4 の個別指定と .cta h2 の特大指定をやめ、全節で同じ大きさにする。
       ②④を1行に保つために、代わりに h2 の最大幅を 980 → 1100px に広げる
       （1440px で最も長い④が 1074px。文字を小さくせずに1行が成立する）。 */
    h2{max-width:1100px;}

    /* 本文リード：⑩だけ 17.6px だったのを 19.2px に戻して統一。
       1行に収まらなくなるため、文の切れ目で明示的に改行させる（＝指定した位置以外では折り返さない）。 */
    .cta .cta-line{max-width:1120px;margin-left:auto;margin-right:auto;}

    /* ⑦：リードを1行に収める。 */
    section[aria-labelledby="s7"] .lead{max-width:1000px;}
  }

  /* ---- 見出しは「指定した位置以外で改行しない」 ----
     h1・h2 は .nobr（inline-block）で改行位置を指定している。
     そこへ text-wrap:balance が掛かると、行の長さを揃えようとして
     指定した文節を無視し、語の途中で折り返す（①h1 が「会社の資産／に変える。」と割れていた）。
     指定を優先させるため、この2つだけ balance を外す。figcaption などは従来どおり。 */
  h1,h2{text-wrap:wrap;}
  .cta h2{font-size:clamp(1.5rem,2.7vw,2.35rem);}  /* 他の h2 と同じ */

  /* ---- 見出しの基準サイズ ---- */
  h3{font-size:1.25rem;}          /* カードのタイトル 20px（節の見出し3は下で上書き） */
  /* 業種パネルの見出しだけは「画像の上に載るラベル」で役割が違うため別スケール（既存のまま） */

  /* ==================== 見出し3を「宣言文と同じ扱い」にする ====================
     リード（19.2px）と 20px では差が小さく、強弱が出ていなかった。
     ②の宣言文（.declare）と同じ大きさ・同じ枠に揃えて、節の区切りをはっきりさせる。
     対象は「節の見出し3」だけ。カードのタイトルは部品の文字なので 20px のまま。 */
  main > section > .wrap > h3{
    font-size:1.35rem;font-weight:bold;color:var(--navy);line-height:1.6;
    border-left:6px solid var(--navy);padding-left:14px;margin:36px 0 20px;
  }
  @media(max-width:600px){ main > section > .wrap > h3{font-size:1.15rem;} }
  @media(min-width:1024px){
    main > section > .wrap > h3{
      border-left:0;border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);
      padding:19px 24px;background:var(--navy-pale);
    }
  }
  /* 紺地の節（⑤⑧）に節の見出し3が入った場合に備える */
  section.tech-dark > .wrap > h3{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.08);}

  /* ==================== 見出し4：本文と同じ大きさにし、先頭に■を置く ====================
     ■は文字ではなく CSS で描く四角（読み上げに「くろしかく」と入らないようにするため）。
     色は差し色の赤。ページ内の他のマーカー（④の負債タグ）と同じ流儀。 */
  h4{font-size:1.2rem;}
  main > section > .wrap > h4::before{
    content:"";display:inline-block;width:13px;height:13px;margin-right:11px;
    background:var(--red);vertical-align:middle;
  }

  /* ---- 表の文字（かつては15.2px で本文より小さかった） ---- */
  th,td{font-size:1rem;}

  /* ==================== 本文を、リード・締めと同じサイズに統一 ====================
     節の本文の段落を 16px → 1.2rem（19.2px）＝ .lead / .closing と同じにする。
     除外するのは役割の違うもの：ラベル(kicker)・リード・締め・宣言文・注記・CTAボタンの器。
     カードの説明文・表のセル・注記は今回の対象外（別の階層として据え置き）。 */
  main > section > .wrap > p:not(.kicker):not(.lead):not(.closing):not(.note):not(.declare):not(.eyebrow):not(.btnwrap):not(.pkg-group){
    font-size:1.2rem;
  }

  /* ==================== ②：3枚目のカードが浮き上がるのをやめる ====================
     他のカードと段差がつく理由が読者に無い。色（紺地・赤枠・赤い番号）だけで強調する。 */
  .evolution-flow .card.on{transform:none;}
  /* ②の3枚目（.on）だけ hover で持ち上がらなかった。上の transform:none が
     .card:hover（詳細度が低い）に勝っていたため。他の3枚と同じ挙動に揃える。 */
  .evolution-flow .card.on:hover{transform:translateY(-4px);}

  /* ==================== ④：7つの「意思決定の負債」を業種の表にプロットする ==================== */
  .debt-cell{min-width:230px;}
  .debt-tag{display:inline-block;margin:0 6px 6px 0;padding:4px 10px;
            border:1px solid var(--navy);background:#fff;color:var(--navy);
            font-size:.82rem;font-weight:bold;line-height:1.5;}
  .debt-tag::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;
                    background:var(--red);vertical-align:middle;}
  tbody tr:nth-child(even) .debt-tag{background:#fff;}

  /* ==================== ⑥：ループ見出しの英語表記 ==================== */
  .loop-head .loop-en{display:block;margin-top:5px;font-size:.85rem;font-weight:normal;
                      color:var(--muted);letter-spacing:.04em;}

  /* ==================== ⑨：立場別カードをホバーで白 → 紺にする ====================
     3枚とも同じ挙動にするため、2枚目の常時ハイライト（紺地・浮き上がり）は外す。 */
  /* 2枚目だけ枠が #ddd で他2枚（紺）と揃っていなかったため紺に合わせる */
  .role-map .card:nth-child(2){background:#fff;color:inherit;border-color:var(--navy);transform:none;}
  .role-map .card:nth-child(2) h3{color:var(--navy);}
  @media(hover:hover){
    .role-map .card:hover,.principles-grid .card:hover{background:var(--navy);border-color:var(--red);color:#fff;}
    .role-map .card:hover h3,.role-map .card:hover strong,
    .principles-grid .card:hover h3,.principles-grid .card:hover .en,.principles-grid .card:hover p{color:#fff;}
    .role-map .card:hover .icon-box,.principles-grid .card:hover .icon-box{background:var(--red);border-color:var(--red);color:#fff;}
    /* ⑥のカード（4ステップ・Decision Package の11枚）もホバーで紺に。
       ⑦設計3原則・⑨立場別と同じ扱いに揃える。 */
    .davie-cycle .card:hover,.pkg-grid .card:hover{background:var(--navy);border-color:var(--red);color:#fff;}
    .davie-cycle .card:hover h3,.pkg-grid .card:hover h3,
    .davie-cycle .card:hover p,.pkg-grid .card:hover p{color:#fff;}
    .davie-cycle .card:hover .en,.davie-cycle .card:hover .note,
    .pkg-grid .card:hover .note{color:var(--on-navy);}
    .davie-cycle .card:hover .icon-box,.pkg-grid .card:hover .icon-box{background:var(--red);border-color:var(--red);color:#fff;}
  }

  /* ==================== フッター：© を中央に置く ==================== */
  .foot-copy{text-align:center;}

  /* ==================== ⑥「進化する」のカードの英字ラベルを読める色にする ====================
     紺地(#06004C)に赤(#E50120)で 3.92 となり、WCAG AA（4.5:1）に届いていなかった。
     他の3枚は白地に #555 で 7.46。紺地での対応色は --on-navy なので、それに揃える（11.05）。
     カードの赤（アイコンの地・上罫）は残るので、強調は失われない。
     ※ ヘッダーのボタンで同じ 3.92 を直したときと同じ考え方。 */
  .davie-cycle .card.on .en{color:var(--on-navy);}
/* 図のキャプションを中央に置く */
.figcap-center{text-align:center;}

/* 9 入力 → 意思決定になるまで → 現場での活用 → 御社に貯まる（ 案A・4枚とも同じ大きさ） */
.grid.io-flow{grid-template-columns:repeat(4,1fr);gap:14px;}
.io-flow .card{border-top:4px solid var(--navy);background:#fff;}
.io-flow .icon-box{width:44px;height:44px;}
.io-flow .icon-box svg{width:23px;height:23px;}
.io-flow .step{margin-bottom:2px;}
/* 4枚目は中身が1行で、白いままだと下が大きく空いて見える。
   蓄積＝この節の結論にあたるため、紺地にして重みを持たせる。 */
.io-flow .io-last{background:var(--navy);border-top-color:var(--red);}
.io-flow .io-last h3{color:#fff;}
.io-flow .io-last .note{color:var(--on-navy);}
.io-flow .io-last .step{background:#fff;color:var(--navy);}
@media(max-width:1039px){.grid.io-flow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:639px){.grid.io-flow{grid-template-columns:1fr;}}

/* 本文の折り返しを文節単位にする
   もとは文字単位で折り返しており、「一巡する／たびに」のように語の途中で割れていた。
   強制改行は入れない。ページ幅に合わせて、文節の切れ目で自然に折り返す。
   auto-phrase に対応しないブラウザでは、これまでどおりの折り返しになる（見た目が壊れることはない）。 */
main p, main li, .lead{word-break:auto-phrase;}

/* カード内の本文で、小書き仮名が行頭に来ないようにする
   「アンビエントインテリジェンス」のような長いカタカナ語がカード幅で割れると、
   既定の line-break:auto では「ェ」「ッ」が行頭に来てしまう。
   strict にすると日本語の禁則が強くなり、この割れ方をしなくなる。
   行数は変わらないため、カードの高さや他のカードの折り返しには影響しない。 */
.fam-card p{line-break:strict;}

/* FV：表示に対して広すぎたため、中身に見合う高さにする
   もとは min-height:calc(100vh - 70px) で、中身515pxでも画面いっぱいまで伸びていた。
   600px 以下の余白は既存の指定をそのまま使う。 */
.hero{min-height:auto;}
@media(min-width:601px){.hero{padding:72px 0 56px;}}

/* ログイン中に表示される管理バーには、このページのスタイルを効かせない */
#wpadminbar, #wpadminbar *{word-break:normal;}