/* ============================================================================
   Sieger 日本サイト v5「日本のB2B LP」— site.css
   仕様の正は同ディレクトリの DESIGN.md（14章以降が v5）。値を変えるときは両方直す。
   外部CDNは一切読み込まない。書体は assets/fonts.css（Noto Sans JP をサブセットして
   base64 で埋め込んだ自動生成ファイル）を各ページから読む。
   ========================================================================= */

/* ------------------------------------------------------------- 1. Tokens */
:root{
  /* --- 地：白を基調に、明るい水色の面で章を分ける --- */
  --w:#FFFFFF;
  --sky:#F1F7FC;          /* 章の地（薄） */
  --sky-2:#E2EEF9;        /* ヒーロー・強調パネル */
  --sky-3:#CFE4F6;        /* 図解のチップ・帯 */
  --line:#DCE7F0;         /* 罫 */
  --line-2:#C3D6E5;       /* 強めの罫 */
  /* v11：ロゴウォールのカード枠。カード境界は「13件が13件に見える」ための
     情報であり装飾ではないと解し、WCAG 1.4.11（非テキストのコントラスト 3:1）を
     満たす値まで濃くした。対 --sky 3.14:1／対白 3.39:1。
     （参考にした指定LPの枠は #B5B5B5・対白 2.05:1 で、この基準を満たしていない） */
  --line-3:#6E8FAE;

  /* --- 青：ロゴ実測（#2293D1 / #2A6FB6 / #2E4B9A）から起こした3段 --- */
  --blue:#1E8BCE;         /* 面・アイコン・図解（対白 3.73:1／UI部品として可） */
  --blue-t:#135C90;       /* 白地の上の文字・リンク（対白 7.10:1） */
  --blue-d:#0F4A76;       /* hover */
  --navy:#16294A;         /* 見出し・濃い面（対白 14.5:1） */
  --navy-2:#22406E;       /* 濃い面の副次 */

  /* --- 墨 --- */
  --ink:#2B3947;          /* 本文（対白 11.8:1） */
  --ink-2:#56646F;        /* 補助・キャプション（対白 6.08:1） */
  --on-navy:#EAF1F8;      /* 濃紺面の文字（対 --navy 12.4:1） */
  --on-navy-2:#AFC4DC;    /* 濃紺面の補助（対 --navy 6.6:1） */

  /* --- 差し色：CTA。青の中で唯一の暖色にして、押す場所を1種類に決める --- */
  --amber:#FFB020;
  --amber-d:#F0A005;
  --amber-ink:#14243A;    /* 琥珀の上の文字（対 --amber 8.55:1） */

  /* --- 書体 --- */
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",
         "Yu Gothic Medium","Yu Gothic",Meiryo,system-ui,sans-serif;
  /* フォーム入力値だけはOS標準に逃がす（サブセットに無い漢字を打たれても崩れないため） */
  --font-input:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic Medium",
               "Yu Gothic",Meiryo,system-ui,sans-serif;

  /* --- 級数ラダー（v13）------------------------------------------------
     参考LP 12本＋お手本を1440幅で採寸し、ジャンプ率の中央値に合わせて決めた
     10段（v12 は 18段）。段を減らすこと自体が目的なので、ここに無い級数を
     部品側で新しく作らない。新しい部品はこの中から選ぶ。
     空白帯：26〜36px と 40〜52px には何も置かない。ここが階層を作っている。
     （DESIGN.md 41-2・41-3・41-8 Don'ts 1,2） */
  --fs-d1:clamp(38px,2.4vw + 21.5px,56px);   /* 章の payload となる数字・900 */
  --fs-h1:clamp(29px,2.3vw + 17px,50px);     /* FVキャッチ・900・1ページ1個 */
  --fs-d2:clamp(28px,1.6vw + 17px,40px);     /* 帯・行の数字・900 */
  --fs-h2:clamp(25px,1.5vw + 14.4px,36px);   /* 章見出し・700 */
  --fs-h2s:clamp(21px,0.9vw + 13.1px,26px);    /* 副章見出し・受けの一文・700 */
  --fs-h3:clamp(18px,0.4vw + 14.3px,20px);   /* カード見出し・700 */
  --fs-lead:clamp(16px,0.3vw + 13.7px,18px); /* リード・強調文・主CTA */
  --fs-body:16px;                            /* 本文 */
  --fs-sm:14px;                              /* 副文（カード本文・表のセル） */
  --fs-cap:13px;                             /* 注記・キャプション（下限） */
  --fs-label:13px;                           /* ラベル（色と字送りで分ける） */

  --lh-h:1.52;
  --lh-b:1.95;
  --ls-h:.01em;
  --ls-b:.02em;
  --ls-label:.1em;

  /* --- 角と影：v4 のカクカクを全部やめる --- */
  --r-s:8px;
  --r:14px;
  --r-l:20px;
  --r-pill:999px;
  --sh:0 1px 2px rgba(16,42,72,.04), 0 6px 18px rgba(16,42,72,.07);
  --sh-h:0 4px 10px rgba(16,42,72,.06), 0 16px 32px rgba(16,42,72,.12);
  --sh-cta:0 6px 16px rgba(190,124,0,.30);
  --sh-hdr:0 1px 0 var(--line), 0 4px 14px rgba(16,42,72,.06);

  /* --- 寸法 --- */
  --w-max:1200px;
  /* v11：本文幅を画面の 75% 台に落とす（DESIGN.md 39-4(5)・39-7(D)）。
     1440 で 1200 − 48×2 = 1104（76.7%）。指定LPは 1080（75.0%）。 */
  --pad:clamp(20px,5vw,48px);
  /* v12：章の padding-block。指定LPは連続の縮小ではなく「PC 値 → SP 値」の
     2段階切り替え（PC 100〜125／SP 64、比 0.55）である。v11 は clamp で連続に
     縮めていたため、1440 でも 103.7px までしか出ず章間が 207px に留まっていた。
     v12 は 2段階に改める。PC 118px ＝ 章と章のあいだ 236px で、指定LPの
     「章と章 180〜245px」の帯の中に入る（128 では 256px で帯を超えていた）。
     SP は 118×0.55 ＝ 65px。（DESIGN.md 40-2・40-4(1)、LP制作ナレッジ 7B-3） */
  --sec-y:118px;
  /* v12：.sec-t（前の章と地続きにする章）の上の空き。v11 は 0 だったため、
     地続きの章では章間が --sec-y 片側ぶん（104px）しか無く、規則3の 180〜245px を
     半分しか満たしていなかった。118 + 88 ＝ 206px で帯の中に入れる。 */
  --sec-t-y:88px;
  /* v12：見出し直後の空き。指定LP実測 64〜74（PC）／32〜40（SP）。
     文を削ったぶんをそのままここへ還元する。PC 96 / SP 53（比 0.55）。
     指定LPは h2 の下 64〜74 に加えて章の padding-top 120〜260 を持っており、
     見出しの周りの空きの総量はこちらより大きい。96 はその中間にあたる。
     （DESIGN.md 40-4(1)・39-6・39-8 Don'ts 2） */
  --head-gap:96px;
  /* v12：群の始まりの空き（.mt-l）。カード間 24〜40 の上に一段置く。 */
  --gap-l:56px;
  --gap-s:28px;
  --hdr-h:72px;


  /* --- v8：地の第3段。白／--sky の2値で章が交互するだけの状態を解くため --- */
  --sky-b:#E7F0F9;

  /* --- v8：雲のシルエット（背景の透かし）。塗りの濃度だけを変えた変種を持つ。
         ぼかしは使わない（35章 Don'ts 32）。地に近い色で沈める --- */
  --cw-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cg fill='%23ffffff' fill-opacity='.72'%3E%3Ccircle cx='52' cy='58' r='30'/%3E%3Ccircle cx='97' cy='40' r='39'/%3E%3Ccircle cx='147' cy='51' r='32'/%3E%3Ccircle cx='189' cy='63' r='25'/%3E%3Cellipse cx='118' cy='64' rx='96' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  --cw-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cg fill='%23ffffff' fill-opacity='.54'%3E%3Ccircle cx='52' cy='58' r='30'/%3E%3Ccircle cx='97' cy='40' r='39'/%3E%3Ccircle cx='147' cy='51' r='32'/%3E%3Ccircle cx='189' cy='63' r='25'/%3E%3Cellipse cx='118' cy='64' rx='96' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  --cs-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cg fill='%23DFEBF8' fill-opacity='1'%3E%3Ccircle cx='52' cy='58' r='30'/%3E%3Ccircle cx='97' cy='40' r='39'/%3E%3Ccircle cx='147' cy='51' r='32'/%3E%3Ccircle cx='189' cy='63' r='25'/%3E%3Cellipse cx='118' cy='64' rx='96' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  --cs-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cg fill='%23E6F0FA' fill-opacity='1'%3E%3Ccircle cx='52' cy='58' r='30'/%3E%3Ccircle cx='97' cy='40' r='39'/%3E%3Ccircle cx='147' cy='51' r='32'/%3E%3Ccircle cx='189' cy='63' r='25'/%3E%3Cellipse cx='118' cy='64' rx='96' ry='24'/%3E%3C/g%3E%3C/svg%3E");
  --sg-ribbon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 180'%3E%3Cg fill='none' stroke='%23CFE4F6' stroke-width='26' stroke-linecap='round'%3E%3Cpath d='M-60 150 C 260 150 340 30 640 30 C 940 30 1020 150 1340 150 C 1500 150 1560 110 1660 60'/%3E%3C/g%3E%3Cg fill='none' stroke='%231E8BCE' stroke-width='10' stroke-linecap='round' opacity='.55'%3E%3Cpath d='M-60 150 C 260 150 340 30 640 30 C 940 30 1020 150 1340 150 C 1500 150 1560 110 1660 60'/%3E%3C/g%3E%3C/svg%3E");   /* 章と章をつなぐ帯 */
  --sg-cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 214 1150 696'%3E%3Cg fill='%232B3A87'%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M7165 9974 c-179 -17 -271 -32 -508 -83 -64 -14 -321 -101 -427 -144 -319 -131 -585 -291 -855 -514 -82 -68 -215 -201 -522 -520 l-222 -231 -73 -16 c-40 -10 -93 -22 -118 -27 -62 -14 -151 -36 -235 -58 -22 -6 -67 -17 -100 -25 -310 -76 -620 -209 -890 -382 -283 -181 -534 -434 -719 -724 -67 -105 -198 -377 -234 -485 -129 -386 -174 -649 -174 -1010 0 -254 23 -431 86 -660 19 -68 78 -229 107 -292 10 -24 19 -44 19 -46 0 -12 143 -257 191 -327 159 -233 400 -482 636 -657 320 -238 619 -389 943 -475 446 -118 937 -115 1445 11 37 9 56 14 150 41 19 6 50 14 68 19 79 23 113 34 214 72 390 147 685 301 953 498 30 22 66 48 80 58 14 10 56 42 94 73 37 30 90 71 117 92 121 90 489 440 894 852 736 747 970 959 1335 1208 346 236 762 424 1045 473 50 9 112 20 138 26 63 12 344 12 399 0 24 -6 70 -15 103 -20 153 -27 367 -115 500 -204 105 -71 209 -184 283 -307 33 -56 80 -181 98 -261 20 -90 22 -312 4 -390 -63 -270 -157 -435 -382 -674 -52 -56 -41 -73 35 -51 220 64 413 227 565 477 99 163 152 350 152 537 0 118 -5 160 -37 292 -51 217 -187 446 -370 627 -261 258 -602 419 -983 467 -123 15 -391 16 -525 2 -178 -19 -466 -77 -505 -101 -6 -4 -38 -13 -70 -21 -151 -35 -593 -242 -815 -381 -122 -77 -283 -184 -410 -274 -38 -27 -141 -106 -228 -177 -88 -70 -181 -144 -208 -165 -28 -21 -107 -91 -177 -155 -70 -65 -143 -130 -162 -146 -30 -24 -261 -236 -585 -536 -51 -47 -130 -116 -176 -155 -45 -38 -105 -91 -133 -116 -28 -25 -71 -60 -96 -77 -25 -18 -63 -48 -86 -68 -47 -40 -193 -144 -338 -240 -325 -217 -608 -350 -995 -468 -218 -66 -606 -104 -796 -77 -188 27 -226 34 -340 62 -254 62 -511 183 -709 334 -75 56 -232 212 -307 305 -121 149 -275 441 -321 610 -5 19 -14 51 -19 70 -59 200 -73 563 -29 740 4 19 14 60 20 90 27 124 52 194 164 463 141 337 328 554 632 734 38 23 90 49 115 59 24 9 49 21 54 25 14 10 163 70 200 80 17 4 64 17 105 29 183 51 348 80 649 111 133 14 155 27 201 118 24 48 80 133 165 251 76 104 128 164 279 315 154 153 286 264 498 418 275 200 716 418 1073 531 257 82 500 127 780 146 442 30 840 -34 1195 -192 63 -29 122 -58 131 -65 8 -7 21 -13 28 -13 6 0 95 -41 196 -91 165 -81 231 -103 210 -69 -7 12 -140 124 -264 224 -276 222 -655 414 -1026 521 -151 43 -167 47 -265 64 -331 60 -616 74 -915 45z'/%3E %3C/g%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M10515 8600 c-11 -5 -46 -9 -77 -9 -31 -1 -79 -5 -105 -10 -26 -5 -82 -15 -123 -21 -141 -23 -361 -73 -468 -106 -23 -8 -56 -14 -72 -14 -17 0 -30 -4 -30 -9 0 -5 -28 -19 -62 -31 -208 -76 -291 -110 -443 -183 -93 -45 -217 -108 -274 -139 -57 -32 -105 -58 -106 -58 -7 0 -273 -164 -290 -179 -11 -9 -72 -52 -135 -94 -494 -333 -899 -683 -1755 -1517 -293 -286 -559 -536 -650 -613 -44 -38 -107 -92 -140 -122 -128 -115 -359 -272 -529 -360 -124 -64 -310 -130 -418 -147 -93 -15 -285 -15 -363 -1 -232 43 -467 175 -657 370 -93 95 -139 160 -197 277 -45 90 -57 125 -92 256 -24 90 -37 277 -28 396 14 184 14 187 105 459 59 180 58 207 -7 135 -83 -93 -186 -266 -234 -395 -78 -206 -116 -542 -84 -734 37 -223 73 -341 156 -506 49 -97 84 -149 181 -265 188 -225 553 -437 851 -495 42 -8 101 -20 131 -26 75 -16 358 -15 450 0 395 67 876 307 1320 658 179 142 224 178 337 273 70 58 140 116 157 129 17 14 56 47 87 75 30 28 93 83 139 121 46 39 111 95 145 125 33 30 101 90 150 132 50 42 137 118 195 169 125 109 395 335 575 480 609 493 1244 865 1755 1027 110 35 330 90 410 103 30 5 76 13 101 18 69 15 309 31 439 30 165 -1 345 -21 465 -53 74 -20 266 -86 280 -96 6 -4 26 -13 47 -19 37 -12 201 -108 295 -173 290 -199 543 -524 676 -868 41 -108 36 -92 70 -220 45 -175 60 -307 54 -500 -8 -244 -25 -338 -104 -570 -128 -377 -376 -728 -678 -959 -44 -33 -86 -66 -93 -72 -7 -6 -48 -32 -91 -59 -208 -129 -445 -223 -676 -269 -33 -6 -78 -16 -100 -21 -22 -4 -110 -14 -196 -21 -138 -11 -176 -11 -315 4 -88 10 -181 22 -209 27 -27 5 -72 14 -100 19 -27 5 -88 19 -135 31 -260 66 -290 57 -128 -38 151 -87 328 -164 508 -219 42 -13 198 -47 294 -64 87 -15 524 -16 592 -1 27 6 81 16 119 22 117 18 236 51 415 115 188 68 469 232 660 386 427 344 732 836 842 1359 24 116 60 511 52 578 -3 20 -9 96 -14 167 -5 72 -14 155 -19 185 -5 30 -12 73 -15 95 -20 120 -95 358 -158 504 -48 109 -155 311 -204 385 -114 171 -310 392 -479 541 -224 197 -534 369 -875 488 -101 35 -347 90 -490 109 -98 13 -609 20 -635 8z'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");   /* ロゴのマーク（文字なし・単色） */
  --cn-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 214 1150 696'%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M7165 9974 c-179 -17 -271 -32 -508 -83 -64 -14 -321 -101 -427 -144 -319 -131 -585 -291 -855 -514 -82 -68 -215 -201 -522 -520 l-222 -231 -73 -16 c-40 -10 -93 -22 -118 -27 -62 -14 -151 -36 -235 -58 -22 -6 -67 -17 -100 -25 -310 -76 -620 -209 -890 -382 -283 -181 -534 -434 -719 -724 -67 -105 -198 -377 -234 -485 -129 -386 -174 -649 -174 -1010 0 -254 23 -431 86 -660 19 -68 78 -229 107 -292 10 -24 19 -44 19 -46 0 -12 143 -257 191 -327 159 -233 400 -482 636 -657 320 -238 619 -389 943 -475 446 -118 937 -115 1445 11 37 9 56 14 150 41 19 6 50 14 68 19 79 23 113 34 214 72 390 147 685 301 953 498 30 22 66 48 80 58 14 10 56 42 94 73 37 30 90 71 117 92 121 90 489 440 894 852 736 747 970 959 1335 1208 346 236 762 424 1045 473 50 9 112 20 138 26 63 12 344 12 399 0 24 -6 70 -15 103 -20 153 -27 367 -115 500 -204 105 -71 209 -184 283 -307 33 -56 80 -181 98 -261 20 -90 22 -312 4 -390 -63 -270 -157 -435 -382 -674 -52 -56 -41 -73 35 -51 220 64 413 227 565 477 99 163 152 350 152 537 0 118 -5 160 -37 292 -51 217 -187 446 -370 627 -261 258 -602 419 -983 467 -123 15 -391 16 -525 2 -178 -19 -466 -77 -505 -101 -6 -4 -38 -13 -70 -21 -151 -35 -593 -242 -815 -381 -122 -77 -283 -184 -410 -274 -38 -27 -141 -106 -228 -177 -88 -70 -181 -144 -208 -165 -28 -21 -107 -91 -177 -155 -70 -65 -143 -130 -162 -146 -30 -24 -261 -236 -585 -536 -51 -47 -130 -116 -176 -155 -45 -38 -105 -91 -133 -116 -28 -25 -71 -60 -96 -77 -25 -18 -63 -48 -86 -68 -47 -40 -193 -144 -338 -240 -325 -217 -608 -350 -995 -468 -218 -66 -606 -104 -796 -77 -188 27 -226 34 -340 62 -254 62 -511 183 -709 334 -75 56 -232 212 -307 305 -121 149 -275 441 -321 610 -5 19 -14 51 -19 70 -59 200 -73 563 -29 740 4 19 14 60 20 90 27 124 52 194 164 463 141 337 328 554 632 734 38 23 90 49 115 59 24 9 49 21 54 25 14 10 163 70 200 80 17 4 64 17 105 29 183 51 348 80 649 111 133 14 155 27 201 118 24 48 80 133 165 251 76 104 128 164 279 315 154 153 286 264 498 418 275 200 716 418 1073 531 257 82 500 127 780 146 442 30 840 -34 1195 -192 63 -29 122 -58 131 -65 8 -7 21 -13 28 -13 6 0 95 -41 196 -91 165 -81 231 -103 210 -69 -7 12 -140 124 -264 224 -276 222 -655 414 -1026 521 -151 43 -167 47 -265 64 -331 60 -616 74 -915 45z'/%3E %3C/g%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M10515 8600 c-11 -5 -46 -9 -77 -9 -31 -1 -79 -5 -105 -10 -26 -5 -82 -15 -123 -21 -141 -23 -361 -73 -468 -106 -23 -8 -56 -14 -72 -14 -17 0 -30 -4 -30 -9 0 -5 -28 -19 -62 -31 -208 -76 -291 -110 -443 -183 -93 -45 -217 -108 -274 -139 -57 -32 -105 -58 -106 -58 -7 0 -273 -164 -290 -179 -11 -9 -72 -52 -135 -94 -494 -333 -899 -683 -1755 -1517 -293 -286 -559 -536 -650 -613 -44 -38 -107 -92 -140 -122 -128 -115 -359 -272 -529 -360 -124 -64 -310 -130 -418 -147 -93 -15 -285 -15 -363 -1 -232 43 -467 175 -657 370 -93 95 -139 160 -197 277 -45 90 -57 125 -92 256 -24 90 -37 277 -28 396 14 184 14 187 105 459 59 180 58 207 -7 135 -83 -93 -186 -266 -234 -395 -78 -206 -116 -542 -84 -734 37 -223 73 -341 156 -506 49 -97 84 -149 181 -265 188 -225 553 -437 851 -495 42 -8 101 -20 131 -26 75 -16 358 -15 450 0 395 67 876 307 1320 658 179 142 224 178 337 273 70 58 140 116 157 129 17 14 56 47 87 75 30 28 93 83 139 121 46 39 111 95 145 125 33 30 101 90 150 132 50 42 137 118 195 169 125 109 395 335 575 480 609 493 1244 865 1755 1027 110 35 330 90 410 103 30 5 76 13 101 18 69 15 309 31 439 30 165 -1 345 -21 465 -53 74 -20 266 -86 280 -96 6 -4 26 -13 47 -19 37 -12 201 -108 295 -173 290 -199 543 -524 676 -868 41 -108 36 -92 70 -220 45 -175 60 -307 54 -500 -8 -244 -25 -338 -104 -570 -128 -377 -376 -728 -678 -959 -44 -33 -86 -66 -93 -72 -7 -6 -48 -32 -91 -59 -208 -129 -445 -223 -676 -269 -33 -6 -78 -16 -100 -21 -22 -4 -110 -14 -196 -21 -138 -11 -176 -11 -315 4 -88 10 -181 22 -209 27 -27 5 -72 14 -100 19 -27 5 -88 19 -135 31 -260 66 -290 57 -128 -38 151 -87 328 -164 508 -219 42 -13 198 -47 294 -64 87 -15 524 -16 592 -1 27 6 81 16 119 22 117 18 236 51 415 115 188 68 469 232 660 386 427 344 732 836 842 1359 24 116 60 511 52 578 -3 20 -9 96 -14 167 -5 72 -14 155 -19 185 -5 30 -12 73 -15 95 -20 120 -95 358 -158 504 -48 109 -155 311 -204 385 -114 171 -310 392 -479 541 -224 197 -534 369 -875 488 -101 35 -347 90 -490 109 -98 13 -609 20 -635 8z'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");   /* v26：ロゴの雲マーク */
  --cn-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='200 214 1150 696'%3E%3Cg fill='%23ffffff' fill-opacity='.04'%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M7165 9974 c-179 -17 -271 -32 -508 -83 -64 -14 -321 -101 -427 -144 -319 -131 -585 -291 -855 -514 -82 -68 -215 -201 -522 -520 l-222 -231 -73 -16 c-40 -10 -93 -22 -118 -27 -62 -14 -151 -36 -235 -58 -22 -6 -67 -17 -100 -25 -310 -76 -620 -209 -890 -382 -283 -181 -534 -434 -719 -724 -67 -105 -198 -377 -234 -485 -129 -386 -174 -649 -174 -1010 0 -254 23 -431 86 -660 19 -68 78 -229 107 -292 10 -24 19 -44 19 -46 0 -12 143 -257 191 -327 159 -233 400 -482 636 -657 320 -238 619 -389 943 -475 446 -118 937 -115 1445 11 37 9 56 14 150 41 19 6 50 14 68 19 79 23 113 34 214 72 390 147 685 301 953 498 30 22 66 48 80 58 14 10 56 42 94 73 37 30 90 71 117 92 121 90 489 440 894 852 736 747 970 959 1335 1208 346 236 762 424 1045 473 50 9 112 20 138 26 63 12 344 12 399 0 24 -6 70 -15 103 -20 153 -27 367 -115 500 -204 105 -71 209 -184 283 -307 33 -56 80 -181 98 -261 20 -90 22 -312 4 -390 -63 -270 -157 -435 -382 -674 -52 -56 -41 -73 35 -51 220 64 413 227 565 477 99 163 152 350 152 537 0 118 -5 160 -37 292 -51 217 -187 446 -370 627 -261 258 -602 419 -983 467 -123 15 -391 16 -525 2 -178 -19 -466 -77 -505 -101 -6 -4 -38 -13 -70 -21 -151 -35 -593 -242 -815 -381 -122 -77 -283 -184 -410 -274 -38 -27 -141 -106 -228 -177 -88 -70 -181 -144 -208 -165 -28 -21 -107 -91 -177 -155 -70 -65 -143 -130 -162 -146 -30 -24 -261 -236 -585 -536 -51 -47 -130 -116 -176 -155 -45 -38 -105 -91 -133 -116 -28 -25 -71 -60 -96 -77 -25 -18 -63 -48 -86 -68 -47 -40 -193 -144 -338 -240 -325 -217 -608 -350 -995 -468 -218 -66 -606 -104 -796 -77 -188 27 -226 34 -340 62 -254 62 -511 183 -709 334 -75 56 -232 212 -307 305 -121 149 -275 441 -321 610 -5 19 -14 51 -19 70 -59 200 -73 563 -29 740 4 19 14 60 20 90 27 124 52 194 164 463 141 337 328 554 632 734 38 23 90 49 115 59 24 9 49 21 54 25 14 10 163 70 200 80 17 4 64 17 105 29 183 51 348 80 649 111 133 14 155 27 201 118 24 48 80 133 165 251 76 104 128 164 279 315 154 153 286 264 498 418 275 200 716 418 1073 531 257 82 500 127 780 146 442 30 840 -34 1195 -192 63 -29 122 -58 131 -65 8 -7 21 -13 28 -13 6 0 95 -41 196 -91 165 -81 231 -103 210 -69 -7 12 -140 124 -264 224 -276 222 -655 414 -1026 521 -151 43 -167 47 -265 64 -331 60 -616 74 -915 45z'/%3E %3C/g%3E%3Cg transform='translate(0,1222) scale(0.1,-0.1)' %3E %3Cpath d='M10515 8600 c-11 -5 -46 -9 -77 -9 -31 -1 -79 -5 -105 -10 -26 -5 -82 -15 -123 -21 -141 -23 -361 -73 -468 -106 -23 -8 -56 -14 -72 -14 -17 0 -30 -4 -30 -9 0 -5 -28 -19 -62 -31 -208 -76 -291 -110 -443 -183 -93 -45 -217 -108 -274 -139 -57 -32 -105 -58 -106 -58 -7 0 -273 -164 -290 -179 -11 -9 -72 -52 -135 -94 -494 -333 -899 -683 -1755 -1517 -293 -286 -559 -536 -650 -613 -44 -38 -107 -92 -140 -122 -128 -115 -359 -272 -529 -360 -124 -64 -310 -130 -418 -147 -93 -15 -285 -15 -363 -1 -232 43 -467 175 -657 370 -93 95 -139 160 -197 277 -45 90 -57 125 -92 256 -24 90 -37 277 -28 396 14 184 14 187 105 459 59 180 58 207 -7 135 -83 -93 -186 -266 -234 -395 -78 -206 -116 -542 -84 -734 37 -223 73 -341 156 -506 49 -97 84 -149 181 -265 188 -225 553 -437 851 -495 42 -8 101 -20 131 -26 75 -16 358 -15 450 0 395 67 876 307 1320 658 179 142 224 178 337 273 70 58 140 116 157 129 17 14 56 47 87 75 30 28 93 83 139 121 46 39 111 95 145 125 33 30 101 90 150 132 50 42 137 118 195 169 125 109 395 335 575 480 609 493 1244 865 1755 1027 110 35 330 90 410 103 30 5 76 13 101 18 69 15 309 31 439 30 165 -1 345 -21 465 -53 74 -20 266 -86 280 -96 6 -4 26 -13 47 -19 37 -12 201 -108 295 -173 290 -199 543 -524 676 -868 41 -108 36 -92 70 -220 45 -175 60 -307 54 -500 -8 -244 -25 -338 -104 -570 -128 -377 -376 -728 -678 -959 -44 -33 -86 -66 -93 -72 -7 -6 -48 -32 -91 -59 -208 -129 -445 -223 -676 -269 -33 -6 -78 -16 -100 -21 -22 -4 -110 -14 -196 -21 -138 -11 -176 -11 -315 4 -88 10 -181 22 -209 27 -27 5 -72 14 -100 19 -27 5 -88 19 -135 31 -260 66 -290 57 -128 -38 151 -87 328 -164 508 -219 42 -13 198 -47 294 -64 87 -15 524 -16 592 -1 27 6 81 16 119 22 117 18 236 51 415 115 188 68 469 232 660 386 427 344 732 836 842 1359 24 116 60 511 52 578 -3 20 -9 96 -14 167 -5 72 -14 155 -19 185 -5 30 -12 73 -15 95 -20 120 -95 358 -158 504 -48 109 -155 311 -204 385 -114 171 -310 392 -479 541 -224 197 -534 369 -875 488 -101 35 -347 90 -490 109 -98 13 -609 20 -635 8z'/%3E %3C/g%3E%3C/g%3E%3C/svg%3E");   /* v26：ロゴの雲マーク */
  --dot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231E8BCE' fill-opacity='.15'/%3E%3C/svg%3E");

  /* --- 動き --- */
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.22s;
  --t-rev:.7s;
}

/* v12：距離の2段階切り替え。指定LP（cloud-ace.jp/lp/cs/）は幅に応じて連続に
   縮めるのではなく、PC の値と SP の値を切り替えている。比は約 0.55。
   ここを1か所に集めておくと、章間・見出し直後・群の始まりが常に同じ比で動く。
   （LP制作ナレッジ 7B-3「モバイルの縮率」・DESIGN.md 40-2） */
@media (max-width:900px){
  :root{
    --sec-y:65px;      /* 118 × 0.55 */
    --sec-t-y:48px;    /* 88 × 0.55 */
    --head-gap:53px;   /* 96 × 0.55 */
    --gap-l:32px;      /* 56 × 0.55 */
    --gap-s:18px;
  }
}
/* 900〜1200px は PC 値のままでは版面に対して大きすぎるので、中間の1段を挟む */
@media (min-width:901px) and (max-width:1200px){
  :root{--sec-y:96px;--sec-t-y:72px;--head-gap:76px;--gap-l:44px;--gap-s:24px}
}

/* -------------------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--w);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);font-weight:400;
  line-height:var(--lh-b);letter-spacing:var(--ls-b);
  font-feature-settings:"palt" 1,"kern" 1;
  line-break:strict;word-break:normal;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue-t);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--blue-d)}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:var(--sky-3);color:var(--navy)}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-56px;z-index:100;background:var(--navy);color:#fff;
  padding:12px 18px;border-radius:var(--r-s);font-weight:700;text-decoration:none;transition:top var(--t)}
.skip:focus{top:12px;color:#fff}

/* ------------------------------------------------------------- 3. Layout */
.wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:880px}
.sec{padding-block:var(--sec-y)}
.sec-sky{background:var(--sky)}
/* 前の章と地続きにする（白／水色の機械的な交互を避け、章を「塊」にするため）。
   v11 までは padding-top:0 だったが、それだと章間が前章の下 padding だけになり、
   規則3の「章と章 180〜245px」を半分しか満たさない。地は続けたまま距離だけ与える。 */
.sec-t{padding-top:var(--sec-t-y)}
.sec-b{padding-bottom:clamp(28px,3vw,44px)}
.sec-navy{background:var(--navy);color:var(--on-navy)}
.sec-tint{background:linear-gradient(180deg,var(--sky-2) 0%,var(--sky) 100%)}

/* 章頭：ラベル → 見出し → リード の3点セット。LPの定型どおり中央寄せ */
.head{text-align:center;max-width:840px;margin-inline:auto}
.head .label{margin-bottom:14px}
/* v11：章頭の塊と、その下の中身とのあいだを大きく空ける。
   指定LP（cloud-ace.jp/lp/cs/）の h2 は margin-bottom 64〜74px（PC）／32〜40px（SP）。
   v10 は 18px で、見出しが本文に貼り付いていた。CEO の「しっかりと余白もある」はここ。
   h2 の直後にリードが来る場合はリードの下で受けるため、h2 自身は 18px のままにする。
   （DESIGN.md 39-4(1)・39-7(D)・39-8 Don'ts 2） */
.head h2{margin-bottom:22px}
.head .lead{margin-inline:auto}
/* v12：リードを1文に縮めた結果、2行目に「ん。」だけが落ちる折り返しが出た。
   行の長さを均す（対応しないブラウザでは従来どおりの折り返しに戻るだけ）。 */
.head h2,.head .lead,.answer > p,.cta > .wrap > p{text-wrap:balance}
.head{margin-bottom:var(--head-gap)}
/* 章頭のすぐ下に来る要素が自前で上マージンを持っている場合は二重に空けない */
.head + .mt-l{margin-top:0}
.head-l{text-align:left;margin-inline:0}

.label{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);
  line-height:1.6;color:var(--blue-t)}
.label::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--blue);flex:none}
.sec-navy .label{color:#8FD0F5}
.sec-navy .label::before{background:#8FD0F5}

h1,.h1,h2,.h2,h3,.h3{overflow-wrap:normal;word-break:normal}
/* v13：h1 は 900（Black）。900 を使ってよいのは h1 と特大数字の5セレクタだけで、
   h2・h3・本文・ボタン・ラベルには使わない（DESIGN.md 41-6・41-8 Don'ts 3）。
   サブセットも h1 と表示数字に出る字だけを 900 で持っている。
   h1 の文言を変えたら _pipeline/build_fonts.py を必ず再実行すること。 */
h1,.h1{font-size:var(--fs-h1);font-weight:900;line-height:var(--lh-h);
  letter-spacing:var(--ls-h);color:var(--navy)}
/* v11：字送りを .01em → .03em に広げた。指定LP（cloud-ace.jp/lp/cs/）は .14em だが、
   あちらの h2 は「導入事例」など4〜8字で1行に収まる短文である。Sieger の h2 は
   「こんな状態に、心当たりはありませんか。」のような20字級の文で、.14em では2行目が伸びて
   版面から溢れる。行送り（1.52）も据え置く。指定LPの 1.00 は1行見出し専用の値である。
   （DESIGN.md 39-4(2)・39-7 移植しないもの・39-8 Don'ts 9） */
h2,.h2{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-h);
  letter-spacing:.03em;color:var(--navy)}
h3,.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.7;color:var(--navy)}
.sec-navy h1,.sec-navy h2,.sec-navy h3{color:#fff}
.lead{font-size:var(--fs-lead);line-height:1.95;max-width:44em}
.cap{font-size:var(--fs-cap);line-height:1.75;color:var(--ink-2)}
.sec-navy .cap{color:var(--on-navy-2)}
.sm{font-size:var(--fs-sm)}
.mt{margin-top:var(--gap-s)}
.mt-l{margin-top:var(--gap-l)}
.mark{background:linear-gradient(transparent 62%,#FFE39A 62%);padding-inline:2px}
/* 改行の出し分け。.br-pc は広い幅でだけ、.br-sp は狭い幅でだけ入る */
.br-sp{display:none}
.tc{text-align:center}

/* 濃紺面の中で「白いカード」を1枚だけ置くときに使う */
.panel{background:var(--w);border-radius:var(--r-l);padding:clamp(24px,3vw,40px);
  box-shadow:var(--sh);color:var(--ink)}

/* -------------------------------------------------------------- 4. Icons */
.ic{width:24px;height:24px;flex:none;stroke:currentColor;stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:18px;height:18px}
.ic-l{width:30px;height:30px}
/* アイコンの受け皿。v5 は全部 60px の真円だった（丸が多すぎて図像が単調になる）。
   v6 は角丸の四角にして、ヒーローの「紙」の角Rと揃える。丸はボタンと矢印だけに残す。 */
.icb{width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--sky-2);color:var(--blue-t);flex:none}
.icb .ic{width:26px;height:26px}
.icb-amber{background:#FFF0D0;color:#8A5A00}
.icb-navy{background:var(--navy);color:#8FD0F5}

/* ------------------------------------------------------------ 5. Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:60px;padding:14px 32px;border-radius:var(--r-pill);
  font-size:var(--fs-lead);font-weight:700;letter-spacing:.02em;line-height:1.5;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  background:var(--amber);color:var(--amber-ink);border-color:#E9A312;
  box-shadow:var(--sh-cta);
  transition:background var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.btn .ic{width:20px;height:20px;stroke-width:2.2}
.btn:hover{background:var(--amber-d);color:var(--amber-ink);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(190,124,0,.34)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-cta)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn-2{background:var(--w);color:var(--blue-t);border-color:var(--line-2);box-shadow:var(--sh)}
.btn-2:hover{background:var(--sky);color:var(--blue-d);border-color:var(--blue)}
.btn-3{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-3:hover{background:var(--navy-2);color:#fff}
.btn-sm{min-height:46px;padding:8px 22px;font-size:var(--fs-sm);box-shadow:none}
.btn-sm:hover{box-shadow:none;transform:none;background:var(--amber-d)}
.btn-w{width:100%}

.btns{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.btns-c{justify-content:center}

/* 矢印つきテキストリンク */
.alink{display:inline-flex;align-items:center;gap:8px;font-weight:700;
  color:var(--blue-t);text-decoration:none;line-height:1.7}
.alink .arw{width:24px;height:24px;border-radius:var(--r-pill);background:var(--sky-2);
  display:grid;place-items:center;flex:none;transition:transform var(--t) var(--ease),background var(--t)}
.alink .arw .ic{width:14px;height:14px;stroke-width:2.4}
.alink:hover{color:var(--blue-d);text-decoration:underline}
.alink:hover .arw{background:var(--sky-3);transform:translateX(3px)}
.sec-navy .alink{color:#9FD8F8}
.sec-navy .alink .arw{background:rgba(255,255,255,.14)}

/* ------------------------------------------------------------- 6. Header */
.hdr{position:sticky;top:0;z-index:50;background:var(--w);box-shadow:var(--sh-hdr)}
.hdr-in{max-width:1320px;margin-inline:auto;padding-inline:var(--pad);
  height:var(--hdr-h);display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);flex:none;
  min-height:44px;padding-block:4px}
.brand img{width:104px;height:23px}
.brand span{font-size:var(--fs-cap);font-weight:700;letter-spacing:.12em;color:var(--ink-2);
  padding:3px 9px;border:1px solid var(--line-2);border-radius:var(--r-pill);line-height:1.4}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
/* v13：15px はラダーに無い唯一の級数。ヘッダーは独立した帯で、本文の級数と同じ視界に
   並ばないため階層を濁さない。これ以外に例外を作らない（DESIGN.md 41-3） */
.nav-link{padding:10px 14px;border-radius:var(--r-s);font-size:15px;font-weight:700;
  color:var(--navy);text-decoration:none;transition:background var(--t),color var(--t)}
.nav-link:hover{background:var(--sky);color:var(--blue-t)}
.nav-link[aria-current="page"]{color:var(--blue-t);box-shadow:inset 0 -3px 0 var(--blue)}
.nav .btn{margin-left:10px}
/* v24：グローバルナビが5項目になった。狭い卓上幅（861〜1080px）では字送りは変えず、
   左右の余白と間隔だけを詰めて1行に収める。級数は 15px のまま（DESIGN.md 41-3 の例外を増やさない） */
.nav-link,.nav .btn{white-space:nowrap}
@media (min-width:861px) and (max-width:1080px){
  .nav{gap:0}
  .nav-link{padding-inline:8px}
  .nav .btn{margin-left:6px}
  .nav .btn-sm{padding-inline:16px}
}
.navtog{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--line-2);
  border-radius:var(--r-s);background:var(--w);color:var(--navy);align-items:center;justify-content:center;cursor:pointer}
.navtog .i-close{display:none}
.navtog[aria-expanded="true"] .i-open{display:none}
.navtog[aria-expanded="true"] .i-close{display:block}

/* --------------------------------------------------------------- 7. Hero */
/* v7：ヒーローの地を「空」にする。上を濃く、地平を淡く。粒子もグローも置かない。
   Sieger のロゴ自体が雲のモチーフなので、地の処理としてブランドに整合する。
   最も濃い停止色（#C9DFF3）の上でも本文・補助文字が AA を満たす範囲に収めてある（10章）。 */
.hero{position:relative;overflow:hidden;
  background:
    radial-gradient(104% 62% at 80% 12%, rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(86% 50% at 14% 30%, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#C9DFF3 0%,#DAE9F7 36%,#EAF3FB 72%,#F1F7FC 100%);
  /* v11：実績帯を第1画面に入れるため、内容を削らずに間隔だけを詰めた
     （DESIGN.md 39-10）。46/26 → 30/18 で 24px を回収。 */
  padding-block:clamp(22px,2.1vw,30px) clamp(14px,1.3vw,18px)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(26px,3.2vw,46px);align-items:center}
/* 級数：日本の BtoB LP の実測（キャッチ中央値 56px・最頻 48〜60px）に寄せて上げた。
   ただし本サイトのキャッチは26字と長く、2欄組みなので上限は 46px で止める（25-6）。 */
/* v13：50px にすると1行目「クラウドの契約・請求・運用を」が 633px 必要になる。
   欄が 635px しか無いと字送りぶんで「を」だけが2行目に落ちる（7C-5(a) の型）。
   級数を下げるのではなく、欄を 1.6fr に広げ、キャッチだけ字送りを 0 にして通す。
   .skymap は max-width:452px なので欄が 407px になっても図の構造は変わらない。
   （DESIGN.md 41-7） */
.hero h1{font-size:var(--fs-h1);letter-spacing:0;margin-bottom:16px}
.hero h1 .em{color:var(--blue-t)}
.hero .lead{font-size:var(--fs-lead);color:var(--ink);max-width:26em}
.hero .micro{margin-top:14px;margin-bottom:6px}
.hero .btns{margin-top:18px}
.hero-note{margin-top:12px}
/* 空の面は上ほど濃い。ヒーロー内の補助文字だけ墨を強め、最濃部でも AA を満たす */
.hero .cap,.skymap-lab b{color:#4A5966}

/* 冠：3つのプラットフォーム名を見出しの直上に1本の帯として置く。
   実測25サイトで「見出し直上のバッジ」は最も実装が軽く、視線の最初の一瞬を取る型
   （25-9 型4）。「一目でクラウドの会社と分かるか」への答えの一つ目。 */
.crown{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-bottom:14px;
  background:var(--w);border:1px solid var(--line-2);
  /* 21px＝1行時の帯の高さの半分。1行のときは丸帯、2行に折れたときは角丸の箱になり、
     どちらの幅でも形が破綻しない（--r-pill だと2行で両端が過剰に丸くなる） */
  border-radius:21px;
  padding:8px 18px;box-shadow:0 1px 3px rgba(16,42,72,.06)}
.crown > .ic{width:21px;height:21px;color:var(--blue);stroke-width:1.9}
.crown b{font-size:var(--fs-sm);font-weight:700;color:var(--navy);
  letter-spacing:.03em;line-height:1.6}
.crown i{font-style:normal;width:1px;height:14px;background:var(--line-2);flex:none}
.crown em{font-style:normal;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;
  color:var(--blue-t);line-height:1.6;padding-left:12px;border-left:1px solid var(--line-2)}

/* ------------- 7b. 署名要素：三つの雲が一つの窓口に降りる（.skymap） ------------- */
/* v6 の請求書スタックは「請求をまとめる」しか語れず、クラウドの会社に見えなかった。
   v7 は構成図の共通語彙である雲の輪郭をそのまま使う（Tabler Icons の cloud・MIT）。
   雲の塗りは白→淡青の縦グラデーションで、板ではなく塊に見せる。 */
.skymap{position:relative;max-width:452px;margin-inline:auto;width:100%}
.skymap-lab{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;justify-content:center}
.skymap-lab b{font-size:var(--fs-cap);font-weight:700;letter-spacing:.08em}

.sm-set{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 8px;align-items:start}
.sm-set li{text-align:center;min-width:0}
.sm-cb{height:88px;display:flex;align-items:flex-end;justify-content:center}
.sm-cloud{width:100%;max-width:124px;height:auto;
  filter:drop-shadow(0 5px 10px rgba(16,42,72,.10)) drop-shadow(0 1px 1px rgba(16,42,72,.06))}
.sm-cloud path{fill:url(#g-cloud);stroke:var(--line-2);stroke-width:.34;stroke-linejoin:round}
/* 高さを少しずつずらす。等間隔に並べると図が格子に見えるため */
.sm-set .cl-1 .sm-cb{padding-bottom:0}
.sm-set .cl-2 .sm-cb{padding-bottom:13px}
.sm-set .cl-3 .sm-cb{padding-bottom:5px}
.sm-set b{display:block;margin-top:11px;font-size:var(--fs-sm);font-weight:700;color:var(--navy);
  line-height:1.5;letter-spacing:.01em}

/* 3本が1本に集まる括り。矢じりを使わず罫でまとめる（.hstack-j と同じ作法） */
.skymap-j{display:block;width:100%;height:40px;margin:8px auto -1px;overflow:visible}
.skymap-j path{fill:none;stroke:var(--line-2);stroke-width:1.8;stroke-linecap:round}
.skymap-j .j-main{stroke:var(--blue);stroke-width:2.4}

.hub{background:linear-gradient(158deg,var(--navy) 0%,#1E3A66 100%);border-radius:var(--r);
  box-shadow:0 2px 4px rgba(16,42,72,.10), 0 16px 34px rgba(16,42,72,.20);overflow:hidden}
.hub-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px 13px}
.hub-h img{width:92px;height:20px}
.hub-h span{font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;color:#9FD8F8;line-height:1.6}
.hub-b{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.16)}
.hub-b li{padding:12px 6px 14px;text-align:center;font-size:var(--fs-sm);font-weight:700;color:#fff;line-height:1.6}
.hub-b li + li{border-left:1px solid rgba(255,255,255,.16)}
/* v12：.skymap-out（雲の図の下の要約文）と .hstack-out（請求書の図の下の要約文）は
   直上のリード・カードと同じことを言っていたので HTML から外し、規則もここで削除した。
   使われない規則を残すと、次に触る人が「効かない」と誤解する。 */

/* ------------- 7c. 認定バッジ列（第1画面の直下に置く勲章） ------------- */
/* 実測：日本の BtoB LP 23件で、権益要素は例外なく y=550〜850px に置かれている（25-7）。
   バッジ画像は各社発行の正規物で改変禁止。CSS では枠の寸法だけを与える。
   3枚は縦横比が違う（正方形・縦長・横長）ので、光学的な面積が揃うよう1枚ずつ与える。 */
.creds{background:var(--sky);padding-block:clamp(24px,2.8vw,32px) clamp(34px,4vw,56px)}
.creds-h{text-align:center;max-width:840px;margin-inline:auto;margin-bottom:clamp(16px,1.8vw,20px)}
.creds-h .label{margin-bottom:10px}
.creds-h h2{font-size:var(--fs-h2s)}
.creds-h p{margin-top:12px;font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.creds-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px)}
.creds-row li{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 1px 2px rgba(16,42,72,.05), 0 10px 24px rgba(16,42,72,.09);
  overflow:hidden;text-align:center;display:flex;flex-direction:column;align-items:center}
.creds-in{padding:clamp(18px,2vw,24px) clamp(18px,2vw,24px) clamp(16px,1.8vw,20px);
  display:flex;flex-direction:column;align-items:center;flex:1;width:100%}
.creds-fr{width:100%;max-width:238px;height:120px;border:1px solid var(--line);border-radius:10px;
  background:var(--w);display:grid;place-items:center;padding:10px 14px}
.creds-fr .partner-badge{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;margin:0}
.b-aws .partner-badge{height:102px}
.b-gcp .partner-badge{height:106px}
.b-ms  .partner-badge{width:200px}
.creds-row b{display:block;margin-top:16px;font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.6}
/* バッジ画像を並べるだけでは権威にならない。何を証明しているかを1行で言語化する（25-8） */
.creds-pf{margin-top:9px;font-size:var(--fs-cap);line-height:1.85;color:var(--ink);text-align:left;width:100%}
/* 下辺のリボン。実測（電算システム・G-gen）は提供元の色でグレードを示すが、
   ベンダー色の再現は商標上できないため、Sieger の濃紺で回す。 */
.creds-rb{margin-top:auto;width:100%;background:var(--navy);color:#fff;
  padding:12px 14px;font-size:var(--fs-sm);font-weight:700;line-height:1.6;letter-spacing:.01em}
.creds .cap{margin-top:20px;text-align:center}

/* ------------------------------ 8. 署名要素：請求書スタック（.hstack） */
/* v5 の「角丸の箱＋矢印」はワイヤーフレームに見えた。v6 は、この商売で
   実際にやり取りされる物＝請求書そのものを描く。3枚の明細が斜めに重なり、
   下で1通に束ねられる。数字は書かない（捏造しない）。罫だけで紙に見せる。 */
.hstack{position:relative;padding:4px 0 0}

.hstack-lab{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.hstack-lab b{font-size:var(--fs-cap);font-weight:700;letter-spacing:.08em;color:var(--ink-2)}
.hstack-lab span{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.7}

/* -- 上段：3枚の明細が扇状に重なる -- */
.bills{position:relative;height:196px;margin:0 auto;max-width:400px}
.bill{position:absolute;left:0;right:0;background:var(--w);border:1px solid var(--line);
  border-radius:10px;padding:13px 16px 14px;
  box-shadow:0 1px 2px rgba(16,42,72,.05), 0 10px 22px rgba(16,42,72,.09)}
.bill-1{top:0;   transform:rotate(-2.2deg) translateX(-7px) scale(.955)}
.bill-2{top:52px;transform:rotate(1.3deg)  translateX(6px)   scale(.978)}
.bill-3{top:104px;transform:rotate(-.5deg)}
.bill-k{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.bill-k b{font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.5;letter-spacing:.01em}
.bill-k i{font-style:normal;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:4px;padding:1px 6px;flex:none}
/* 明細の行。文字を置かず罫だけで「紙」に見せる */
.bill-r{display:grid;gap:5px;margin-top:11px}
.bill-r i{display:block;height:3px;border-radius:2px;background:var(--line)}
.bill-r i:nth-child(1){width:74%}
.bill-r i:nth-child(2){width:88%}
.bill-r i:nth-child(3){width:52%;background:var(--line-2)}

/* -- 中段：3本が1本に集まる括り。矢じりではなく罫でまとめる -- */
.hstack-j{display:block;width:100%;max-width:400px;height:32px;margin:0 auto -1px;overflow:visible}
.hstack-j path{fill:none;stroke:var(--line-2);stroke-width:1.8;stroke-linecap:round}
.hstack-j .j-main{stroke:var(--blue);stroke-width:2.4}

/* -- 下段：1通の請求書 -- */
.inv{background:var(--w);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 4px rgba(16,42,72,.06), 0 18px 36px rgba(16,42,72,.14);
  max-width:400px;margin:0 auto}
.inv-h{background:var(--navy);display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:13px 18px}
.inv-h img{width:88px;height:19px}
.inv-h span{font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;color:#9FD8F8;line-height:1.6}
.inv-b{padding:6px 18px 16px}
.inv-b li{display:flex;align-items:baseline;gap:10px;padding:11px 0;
  border-bottom:1px dashed var(--line);font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
.inv-b li:last-child{border-bottom:0}
.inv-b li .ic{width:17px;height:17px;color:var(--blue);stroke-width:2.6;flex:none}
.inv-b li b{font-weight:700;color:var(--navy)}
.inv-f{display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--sky);border-top:2px solid var(--amber)}
.inv-f b{font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.6}
.inv-f span{margin-left:auto;font-size:var(--fs-cap);color:var(--ink-2);line-height:1.6}

/* v12：.hstack-out は削除（→ .skymap-out と同じ理由。この図の結論は .inv-f が持つ） */

/* ------------------------------ 8b. 課題 → 解決（署名の「3 が 1 になる」） */
/* v5 は「3枚の等分カード」を4章連続で並べていた。ここは版面を非対称にして
   章の型そのものを変える。左に主張、右に事実の一覧。カードにはしない。 */
.split{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.5vw,72px);align-items:start}
.split .head{text-align:left;max-width:none;margin-inline:0}
.split .head .lead{margin-inline:0}

/* 課題の一覧。右端に「いくつになるか」を置く。下の解決パネルで同じ位置が 1 になる */
/* 章の末尾に置く「次に何を読むか」の一文。CTAボタンを増やす代わりの誘導 */
.handoff{display:flex;align-items:center;gap:12px;margin-top:clamp(22px,3vw,34px);
  font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.8}
.handoff span{flex:none;width:34px;height:2px;border-radius:2px;background:var(--amber)}

.issues{border-top:1px solid var(--line-2)}
.issues li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;
  align-items:baseline;padding:22px 2px 24px;border-bottom:1px solid var(--line-2)}
.issues b{font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.7}
.issues p{grid-column:1/2;font-size:var(--fs-sm);line-height:1.9;color:var(--ink);margin:0}
/* v13：カードや行の中の数字は「章見出しより下」に置く。--fs-d2（40px）にすると
   章見出し 36px と 1.11 倍になり、41-8 Don'ts 7 の「同寸にしない」に自分で違反する。
   ページの頂点は .answer-3 .n（56px）1か所だけ。ここは 900 の重みで立たせる。 */
.issues .n{grid-row:1/3;grid-column:2/3;align-self:center;text-align:right;
  font-size:var(--fs-h2s);font-weight:900;color:#B0453F;
  line-height:1.2;letter-spacing:.01em;white-space:nowrap;min-width:4.4em}
/* u＝上に置く小さな冠（毎月）／i＝右に置く小さな単位（通・か所・画面） */
.issues .n u{display:block;text-decoration:none;font-size:var(--fs-cap);font-weight:700;
  letter-spacing:.08em;color:var(--ink-2);line-height:1.6;margin-bottom:1px}
.issues .n i{font-style:normal;font-size:var(--fs-sm);font-weight:700;margin-left:3px;color:var(--ink-2)}

/* 解決：濃紺のパネル1枚。ここだけ地が反転するので、章の途中に段差ができる */
.answer{background:linear-gradient(158deg,var(--navy) 0%,#1E3A66 100%);color:var(--on-navy);
  border-radius:var(--r-l);padding:clamp(26px,3.6vw,48px);
  box-shadow:0 8px 20px rgba(16,42,72,.14), 0 24px 48px rgba(16,42,72,.16);
  position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;width:420px;height:420px;right:-150px;top:-190px;
  border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(143,208,245,.13),rgba(143,208,245,0) 70%);
  pointer-events:none}
.answer > *{position:relative}
.answer h2{color:#fff;margin-bottom:14px}
.answer .label{color:#8FD0F5}
.answer .label::before{background:#8FD0F5}
.answer > p{color:var(--on-navy);font-size:var(--fs-lead);line-height:1.9;max-width:46em}
.answer-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,32px);margin-top:clamp(26px,3vw,40px);
  padding-top:clamp(22px,2.6vw,32px);border-top:1px solid rgba(255,255,255,.18)}
.answer-3 li + li{padding-left:clamp(18px,2.4vw,32px);border-left:1px solid rgba(255,255,255,.18)}
.answer-3 .n{display:block;font-size:var(--fs-d1);font-weight:900;color:#fff;
  line-height:1.2;letter-spacing:.01em}
.answer-3 .n u{display:block;text-decoration:none;font-size:var(--fs-cap);font-weight:700;
  letter-spacing:.08em;color:#9FD8F8;line-height:1.6;margin-bottom:2px}
.answer-3 .n i{font-style:normal;font-size:var(--fs-lead);font-weight:700;margin-left:4px;color:#9FD8F8}
.answer-3 b{display:block;margin-top:12px;font-size:var(--fs-body);font-weight:700;color:#fff;line-height:1.75}
.answer-3 p{margin-top:7px;font-size:var(--fs-sm);line-height:1.9;color:var(--on-navy-2)}

/* ------------------------------------------------------------- 9. 実績帯 */
.stats{background:var(--navy);color:var(--on-navy);padding-block:clamp(28px,3vw,40px)}
.stats ul{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
/* index の実績帯は v7 で3項目になった（3クラウドは直上の認定バッジ列と重複するため外した）。
   company の実績帯は4項目のままなので、列数は修飾クラスで分ける。 */
.stats-3 ul{grid-template-columns:repeat(3,1fr)}
.stats li{text-align:center;padding-inline:8px;position:relative}
/* 認定バッジ列と同じ琥珀の罫を数字の上に置く。2つの権威の帯を韻で結ぶための device */
.stats li::before{content:"";display:block;width:26px;height:2px;border-radius:2px;
  background:var(--amber);margin:0 auto 12px}
.stats li + li{border-left:1px solid rgba(255,255,255,.16)}
.stats b{display:block;font-size:var(--fs-d2);font-weight:900;
  line-height:1.3;color:#fff;letter-spacing:.01em}
.stats b i{font-style:normal;font-size:.56em;margin-left:2px}
.stats span{display:block;font-size:var(--fs-cap);color:var(--on-navy-2);line-height:1.7;margin-top:4px}
.stats .cap{margin-top:18px;text-align:center;color:var(--on-navy-2)}

/* ------------------------------------------------------- 10. カードの並び */
.cards{display:grid;gap:clamp(20px,2.4vw,32px)}
.c-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;gap:14px;
  box-shadow:var(--sh);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.card h3{margin:0}
.card p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.card .alink{margin-top:auto;padding-top:4px}
a.card{text-decoration:none;color:inherit}
a.card:hover,.card-hov:hover{transform:translateY(-4px);box-shadow:var(--sh-h);border-color:var(--line-2)}

/* 番号つきカード（選ばれる理由） */
.card .no{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--r-pill);background:var(--blue-t);color:#fff;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:0;flex:none}

/* --------------------------- 10b. 主従のあるカード配置（等分グリッドを崩す） */
/* v5 は 3枚・3枚・4枚・6枚の等分グリッドを4章連続で並べていた。
   参考LPは必ずどこかで「1枚だけ大きい」を作って、目の止まる場所を指定している。 */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.bento .wide{grid-column:span 2}
.bento .full{grid-column:1/-1}
.bento .tall{grid-row:span 2}

/* 1枚だけ大きい「主」カード。中で左右に割る */
.lead-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(22px,3vw,40px);align-items:center;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3vw,40px);box-shadow:var(--sh)}
.lead-card h3{font-size:var(--fs-h2s);margin-bottom:12px}
.lead-card > div > p{font-size:var(--fs-body);line-height:1.95}
.lead-card .alink{margin-top:16px}

/* 認定バッジ3点を主カードの右半分に入れる。画像は改変せず、枠だけ CSS で与える */
.badge-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.badge-row li{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:8px;background:var(--sky);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 10px 14px;text-align:center}
.badge-row .partner-badge{height:56px;width:auto;max-width:100%;object-fit:contain;margin:0}
.badge-row b{font-size:var(--fs-cap);font-weight:700;color:var(--navy);line-height:1.65}
.badge-row span{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.6}

.bento .card{gap:12px}
.bento .card h3{display:flex;align-items:center;gap:14px}
.bento .card h3 .icb{width:46px;height:46px;flex:none}
.bento .card h3 .icb .ic{width:23px;height:23px}

/* 主カード（bento の中で1枚だけ大きいもの） */
.card-lead h3{font-size:var(--fs-h3)}
.card-lead h3 .icb{width:54px !important;height:54px !important}
.card-lead h3 .icb .ic{width:27px !important;height:27px !important}
.card-lead > p{font-size:var(--fs-body);line-height:1.95}
/* 主カードにだけ入れる工程の札。他のカードには付けない（差をつけるための要素） */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chips li{background:var(--sky);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 13px;font-size:var(--fs-cap);font-weight:700;color:var(--blue-t);line-height:1.7}
.card-lead:hover .chips li{border-color:var(--line-2)}

/* 認定の中身。バッジ画像は第1画面直下に出したので、ここは名称だけを罫で組む */
.certs{border-top:1px solid var(--line-2)}
.certs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;
  padding:14px 2px 15px;border-bottom:1px solid var(--line-2)}
.certs b{font-size:var(--fs-body);font-weight:700;color:var(--navy);line-height:1.7;min-width:8.2em}
.certs span{font-size:var(--fs-sm);font-weight:700;color:var(--blue-t);line-height:1.8}

/* サービスの一覧で「詳細ページへ渡す」ためだけの横長カード */
.navrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 28px;background:var(--sky);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:22px clamp(20px,2.4vw,32px);text-decoration:none;color:inherit;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.navrow-t{display:flex;align-items:center;gap:16px;min-width:0}
.navrow-t .icb{width:48px;height:48px;background:var(--w);flex:none}
.navrow-t .icb .ic{width:24px;height:24px}
.navrow h3{margin-bottom:3px}
.navrow p{font-size:var(--fs-sm);line-height:1.85;color:var(--ink);margin:0}
.navrow:hover{background:var(--sky-2);border-color:var(--blue);transform:translateY(-2px);
  box-shadow:var(--sh-h)}
.navrow:hover .alink{color:var(--blue-d);text-decoration:underline}
.navrow:hover .alink .arw{background:var(--sky-3);transform:translateX(3px)}
.navrow:active{transform:translateY(0);box-shadow:var(--sh)}

/* --------------------------------------------- 11. 導入の流れ（.tline） */
/* v5 は「4枚の箱＋くの字の矢印」だった。段階は箱ではなく1本の線で示す。
   罫は丸の後ろを通り、丸には章の地の色で縁取りを付けて重なりを作る。 */
.tline{--tl-gap:clamp(20px,2.8vw,40px);
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--tl-gap);padding-top:58px}
.tline > li{position:relative;min-width:0}
/* 罫は「丸から次の丸まで」だけ引く。最後の段の右には伸ばさない */
.tline > li:not(:last-child)::after{content:"";position:absolute;top:-38px;left:46px;
  right:calc(var(--tl-gap) * -1 - 46px);height:2px;background:var(--line-2);border-radius:2px}
.tline > li > b{position:absolute;z-index:1;top:-58px;left:0;display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--r-pill);background:var(--blue-t);color:#fff;
  font-size:var(--fs-h3);font-weight:700;line-height:1;letter-spacing:.02em;
  box-shadow:0 0 0 7px var(--w), 0 2px 6px rgba(16,42,72,.18)}
.sec-sky .tline > li > b{box-shadow:0 0 0 7px var(--sky), 0 2px 6px rgba(16,42,72,.18)}
.tline-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tline h3{font-size:var(--fs-h3);margin-bottom:9px}
.tline p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.tline .k{display:block;font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;
  color:var(--ink-2);line-height:1.7;margin-bottom:2px}

/* ------------------------------------------------------- 13. クラウド3枚 */
.cloud{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column}
.cloud-h{background:var(--sky);padding:18px 24px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px}
/* ヒーローの図と同じ雲の輪郭を使い、ページをまたいで語彙を揃える */
.cloud-h .ic{width:34px;height:34px;flex:none;color:var(--blue);stroke-width:1.5}
.cloud-h > div{min-width:0}
.cloud-h b{display:block;font-size:var(--fs-h3);font-weight:700;color:var(--navy);line-height:1.5}
.cloud-h span{display:block;font-size:var(--fs-cap);color:var(--ink-2);line-height:1.7}
.cloud-b{padding:22px 24px 24px;display:flex;flex-direction:column;gap:16px;flex:1}
/* 2列だと「アベイラビリティゾーン」が1字だけ折り返すため、1列の対照表にした */
.cstats{display:grid;grid-template-columns:1fr;gap:8px}
.cstats div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:var(--sky);border-radius:var(--r-s);padding:10px 15px}
.cstats dt{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.6;overflow-wrap:normal}
.cstats dd{margin:0;font-size:var(--fs-h3);font-weight:700;color:var(--blue-t);line-height:1.35;
  white-space:nowrap}
.cloud-b p{font-size:var(--fs-sm);line-height:1.9}

/* --------------------------------------------------- 14. パートナーバッジ */
/* バッジ画像は各社発行の正規物。改変禁止のため CSS では寸法だけを与える。
   v7 で .badges/.badge/.badge-row の3系統を .creds-row（7c）に一本化した。
   .partner-badge は index の認定バッジ列と company のパートナー資格で共用する。 */
.partner-badge{height:72px;width:auto;max-width:100%;object-fit:contain;margin:0}

/* -------------------------------------------------------- 15. 社名の一覧 */
/* v5 は13個の同じ札を並べていた。13は割り切れないので最終行に1個だけ残り、
   同型の反復だけが目に残る。v6 は札をやめ、1枚の面の中に社名を組む。 */
.namewall{--nw-gap:clamp(20px,2.6vw,38px);
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh);padding:clamp(24px,3vw,38px) clamp(20px,3vw,44px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:clamp(12px,1.6vw,20px) var(--nw-gap)}
.namewall li{font-size:var(--fs-lead);font-weight:700;color:var(--navy);
  line-height:1.9;letter-spacing:.01em;white-space:nowrap}

/* --------------------------------- 15b. 取引実績の帯（v11・第1画面の直下） */
/* 指定LP（cloud-ace.jp/lp/cs/）の .lp-trust をそのまま踏襲する。
   あちらはヒーローの </section> の直後、他のどの章よりも前に置き、地色もヒーローと
   同じ白で地続きにしている（実測 y=584／画面高 900、ページ全長の 6.6%）。
   構成は「見出し1行 → カードの列」の2段だけで、説明文もリードも無い。
   ここでは地色をヒーローの勾配の終端色 --sky に合わせ、罫も影も置かない。
   （DESIGN.md 39-3・39-7(A)） */
.trust{background:var(--sky);padding-block:clamp(24px,2vw,26px) clamp(26px,2.4vw,34px);
  text-align:center}
/* 見出しと注記は本文幅に収め、ロゴウォールだけがこれを破って広く出る（39-4(5)） */
.trust-in{max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad)}
/* 見出し：級数と明度の2つだけで数字を立てる。囲み・下線・月桂樹は置かない
   （38-5 Don'ts 2 が引き続き有効）。指定LPは 24px の中に 40px の数字を混植していた。 */
.trust-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:0 8px;margin:0;
  font-size:var(--fs-h2s);font-weight:700;color:var(--navy);
  line-height:1.5;letter-spacing:.02em}
/* --blue #1E8BCE の対白は 3.73:1。この級数（29px 以上・700）は WCAG の「大きな文字」に
   あたり AA の要求は 3:1 なので満たす。小さくするときは --blue-t に替えること。 */
.trust-n{font-size:var(--fs-d2);font-weight:900;color:var(--blue);
  line-height:1.1;letter-spacing:0}
.trust-sub{margin:0;font-size:var(--fs-cap);line-height:1.8;color:var(--ink-2)}
.trust .cap{margin-top:clamp(12px,1.3vw,16px);max-width:70em;margin-inline:auto}

/* ロゴウォール風の格子。各社ロゴの画像は許諾が無いため使えない。
   指定LPの壁を成立させているのは「ロゴ」ではなく「同寸のカードの格子」だったので
   （39-3 読み取り2）、格子だけを借りて中身を社名テキストに差し替える。
   自動送りは付けない。13枚は静止で全部見せる（39-8 Don'ts 8）。
   社名は省略も改行もしない。収まらないならカードを広げる（39-8 Don'ts 3）。 */
.logowall{--lw-gap:10px;--lw-cols:7;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--lw-gap);margin:clamp(12px,1.3vw,16px) auto 0;
  /* 指定LPは負のマージンで本文幅（1080）を破って画面全幅（1440）へ出していた。
     負のマージンは狭い幅で横スクロールを生むため、ここでは --w-max を超える
     1320px までの正の最大幅で同じ効果を作る（39-4(5)）。 */
  /* .wrap の外に置くため左右の余白は自分で持つ（company.html でも同じ器で使う） */
  max-width:calc(1320px + var(--pad) * 2);padding-inline:var(--pad);list-style:none}
/* 13 は素数に近く、1行あたりの枚数が 7 か 5 のときだけ最終行が2枚以上になる
   （7→7+6、5→5+5+3）。3枚組・2枚組では最終行が1枚だけ残るので、
   その1枚は行いっぱいに伸ばして「余り」ではなく「区切り」に見せる。 */
.logowall li{flex:0 0 calc((100% - (var(--lw-cols) - 1) * var(--lw-gap)) / var(--lw-cols));
  display:grid;place-items:center;
  min-height:58px;padding:9px 12px;
  background:var(--w);border:1px solid var(--line-3);border-radius:var(--r-s);
  font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.45;
  letter-spacing:.01em;text-align:center;overflow-wrap:normal;
  /* 実在ロゴの色数のばらつきを消して壁の均質さを作るのが指定LPの狙い。
     こちらは元から単色なので、面の陰影だけを最小限に置く。 */
  box-shadow:0 1px 2px rgba(16,42,72,.05)}
@media (max-width:1199px){.logowall{--lw-cols:5}}
/* 3枚組では 3・3・3・3・1 になる。最後の1枚は行いっぱいに伸ばし、
   「余り」ではなく「締め」に見せる。 */
@media (max-width:900px){.logowall{--lw-cols:3;--lw-gap:8px}
  .logowall li{min-height:58px;padding:9px 8px;font-size:var(--fs-sm)}
  .logowall li:last-child{flex-basis:100%}}
/* 狭い幅でも2枚組には落とさない。2枚組は 7 行になり、帯が 700px を超えて
   ヒーローの直後に置く意味が消える。3枚組のまま級数と高さだけを詰める。 */
@media (max-width:560px){.logowall{--lw-gap:6px}
  .logowall li{min-height:52px;padding:7px 5px;font-size:var(--fs-cap);line-height:1.4;
    letter-spacing:0}}

/* ---------------------------------------------------------- 16. FAQ（<details>） */
.faq{display:grid;gap:16px;max-width:900px;margin-inline:auto}
.faq details{background:var(--w);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden}
.faq summary{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;cursor:pointer;
  font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.7;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--sky-2);color:var(--blue-t);font-size:var(--fs-sm);margin-top:1px}
.faq summary .ic{margin-left:auto;flex:none;color:var(--blue-t);transition:transform var(--t) var(--ease)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq summary:hover{background:var(--sky)}
.faq .a{display:flex;gap:14px;padding:0 22px 22px 22px;font-size:var(--fs-sm);line-height:1.95}
.faq-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;
  max-width:900px;margin-inline:auto;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.9}
.faq .a .q{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);
  background:var(--sky);color:var(--ink-2);font-size:var(--fs-sm);font-weight:700}

/* ----------------------------------------------------------- 17. CTA帯 */
.cta{background:linear-gradient(160deg,var(--navy) 0%,#1D3763 100%);color:var(--on-navy);
  padding-block:clamp(48px,5.5vw,80px);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-200px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(30,139,206,.34),rgba(30,139,206,0) 68%);pointer-events:none}
.cta .wrap{position:relative;text-align:center}
.cta h1,.cta h2,.cta h3{color:#fff}
.cta .label{color:#8FD0F5}
.cta .label::before{background:#8FD0F5}
.cta h2{margin-bottom:16px}
.cta p{max-width:44em;margin-inline:auto;color:var(--on-navy)}
/* 押す直前に置く安心材料。ここだけは箇条書きにしないと読み飛ばされる */
.cta-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:26px}
.cta-assure li{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-sm);
  font-weight:700;color:#fff;line-height:1.8}
.cta-assure .ic{width:18px;height:18px;color:#8FD0F5;stroke-width:2.6;flex:none}
/* 最終CTA：ボタンの上に「押すと何が起きるか」を一行で置く。
   実測した国内B2B LP 11サイトのうち5サイトが同じ形（SmartHR・Sansan・kintone ほか）。 */
.cta-picks{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:20px 28px;margin-top:30px}
.cta-picks > p{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:12px;flex:0 1 340px;max-width:340px}
.cta-picks span{font-size:var(--fs-cap);line-height:1.8;color:var(--on-navy-2);text-align:center}
.cta-picks .btn{width:100%}
.cta .btns{margin-top:30px}

/* CTAボタンの真上に置く短い一行（ヒーロー・中間CTA用） */
.micro{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-cap);font-weight:700;
  color:var(--blue-t);line-height:1.8;margin-bottom:10px}
.micro .ic{width:15px;height:15px;stroke-width:2.6;color:var(--blue)}
.cta .btn-2{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
.cta .btn-2:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* 中間CTA：白地の上の琥珀ボタン1つ。押す場所を思い出させるためだけの帯 */
.cta-mid{background:var(--sky-2);border-radius:var(--r-l);padding:clamp(24px,3vw,36px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 28px}
.cta-mid > div{flex:1 1 340px;min-width:0}
.cta-mid .btn{flex:0 0 auto}
.cta-mid p{font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.7;margin:0}
.cta-mid .cap{font-weight:400;color:var(--ink-2);margin-top:4px}

/* ------------------------------------------------- 18. 下層ページの見出し */
.phead{background:linear-gradient(168deg,var(--sky-2) 0%,#F0F7FC 62%,var(--w) 100%);
  padding-block:clamp(24px,3vw,36px) clamp(40px,5vw,64px);position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;width:520px;height:520px;right:-190px;top:-250px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(30,139,206,.15),rgba(30,139,206,0) 70%);pointer-events:none}
.phead .wrap{position:relative}
.phead h1{margin-top:20px;max-width:20em}
.phead .lead{margin-top:18px}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-cap);color:var(--ink-2);line-height:1.8}
.crumb a{color:var(--ink-2)}
.crumb li[aria-current]{color:var(--navy);font-weight:700}

/* 目次（下層ページのアンカー） */
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.toc a{display:inline-flex;align-items:center;gap:8px;background:var(--w);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 18px;font-size:var(--fs-sm);font-weight:700;
  color:var(--navy);text-decoration:none;box-shadow:0 1px 3px rgba(16,42,72,.05);transition:all var(--t)}
.toc a:hover{background:var(--sky);border-color:var(--blue);color:var(--blue-t)}
.toc .ic{width:15px;height:15px;color:var(--blue);stroke-width:2.4}

/* ------------------------------------------------- 19. サービス詳細ブロック */
.svcbox{background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(24px,3vw,40px);box-shadow:var(--sh);scroll-margin-top:calc(var(--hdr-h) + 24px)}
.svcbox + .svcbox{margin-top:clamp(20px,2.4vw,28px)}
.svcbox-h{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.svcbox-h .no{font-size:var(--fs-cap);font-weight:700;letter-spacing:.1em;color:var(--blue-t)}
.svcbox-b{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);margin-top:22px;align-items:center}
.svcbox-b > p{font-size:var(--fs-body);line-height:1.95}
.scope{background:var(--sky);border-radius:var(--r);padding:20px 22px}
.scope-t{font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;color:var(--navy);margin-bottom:12px}
.scope ul{display:grid;gap:10px}
.scope li{display:flex;gap:10px;font-size:var(--fs-sm);line-height:1.85}
.scope li .ic{width:19px;height:19px;color:var(--blue);stroke-width:2.6;margin-top:5px}

/* ---------------------------------------------------------- 20. 定義リスト */
.dlist{display:grid;gap:0;background:var(--w);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh)}
.dlist > div{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0}
.dlist > div + div{border-top:1px solid var(--line)}
.dlist dt{background:var(--sky);padding:18px 22px;font-size:var(--fs-sm);font-weight:700;
  color:var(--navy);line-height:1.8}
.dlist dd{margin:0;padding:18px 22px;font-size:var(--fs-sm);line-height:1.9}
.dlist dd strong{display:block;font-size:var(--fs-body);font-weight:700;color:var(--navy);line-height:1.8}
.pending{display:inline-flex;align-items:center;gap:7px;background:var(--sky-2);color:var(--navy);
  border-radius:var(--r-pill);padding:5px 14px;font-size:var(--fs-cap);font-weight:700;line-height:1.7}

/* 注意書き（法定表示・準備中の告知） */
.notice{background:#FFF8E8;border:1px solid #F2D89B;border-left:5px solid var(--amber);
  border-radius:var(--r);padding:18px 22px;font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.notice strong{color:var(--navy)}
.notice-b{background:var(--sky);border-color:var(--line-2);border-left-color:var(--blue)}

/* --------------------------------------------------------------- 21. 表 */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-l);background:var(--w);
  box-shadow:var(--sh);-webkit-overflow-scrolling:touch}
.spec{width:100%;min-width:760px;font-size:var(--fs-sm)}
.spec th,.spec td{padding:15px 18px;text-align:left;line-height:1.85;vertical-align:top;
  border-bottom:1px solid var(--line)}
.spec thead th{background:var(--navy);color:#fff;font-weight:700;font-size:var(--fs-cap);
  letter-spacing:.04em;white-space:nowrap;border-bottom:0}
.spec tbody th{background:var(--sky);color:var(--navy);font-weight:700;white-space:nowrap;width:150px}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.thint{margin-top:10px}

/* ------------------------------------------------------------ 22. フォーム */
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field-wide,.consent,.fnote,.fbtn{grid-column:1/-1}
.field label{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700;color:var(--navy)}
.field-req,.field-opt{font-size:var(--fs-cap);font-weight:700;letter-spacing:.04em;border-radius:5px;
  padding:2px 9px;line-height:1.6}
.field-req{background:#FBE7E7;color:#96302F}
.field-opt{background:var(--sky);color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:var(--font-input);font-size:var(--fs-body);line-height:1.7;color:var(--ink);
  background:var(--w);border:1px solid var(--line-2);border-radius:var(--r-s);
  padding:13px 15px;width:100%;min-height:52px;transition:border-color var(--t),box-shadow var(--t)}
.field textarea{min-height:160px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23135C90' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,139,206,.18);outline:none}
.field-help{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.8}
.consent{display:flex;align-items:flex-start;gap:12px;background:var(--sky);
  border-radius:var(--r);padding:18px 20px}
.consent input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--blue-t);flex:none}
.consent label{font-size:var(--fs-sm);line-height:1.85}
.fbtn{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.fbtn .btn{width:100%;max-width:400px}
/* 送信ボタンの真下。押す直前の不安に答える場所なので、ここだけ幅を絞って中央に置く */
.fbtn-note{max-width:46em;text-align:center;font-size:var(--fs-cap);line-height:1.9;color:var(--ink-2)}
.fbtn-note a{color:var(--blue-t)}
/* フォームの本体は読み幅に寄せる（1200px 幅いっぱいの入力欄は打ちにくい） */
.wrap-form{max-width:900px}
.field input::placeholder,.field textarea::placeholder{color:#94A3AE;opacity:1}
.fnote{background:#FBE7E7;border:1px solid #E9BFBF;border-radius:var(--r);padding:16px 20px;
  font-size:var(--fs-sm);line-height:1.9;color:#7A2726}

/* --- v24：ヒアリング用チェックボックス群 -------------------------------------
   1問＝1グループ。選択肢はチップ状のラベルで、文字ではなく面を押させる。
   fieldset/legend はグリッド内で折り返しが壊れる環境があるため role="group" を使う。 */
.chkset{grid-column:1/-1;display:flex;flex-direction:column;gap:10px}
.chk-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.6}
.chk-help{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.8}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px}
.chk{display:flex;align-items:center;gap:10px;background:var(--w);
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:12px 14px;min-height:52px;
  font-size:var(--fs-sm);font-weight:400;color:var(--ink);line-height:1.6;cursor:pointer;
  transition:border-color var(--t),background-color var(--t)}
.chk input{width:20px;height:20px;margin:0;accent-color:var(--blue-t);flex:none}
.chk:hover{border-color:var(--blue)}
.chk:has(input:checked){border-color:var(--blue);background:var(--sky)}
.chk:has(input:focus-visible){border-color:var(--blue);box-shadow:0 0 0 3px rgba(30,139,206,.18)}
/* 請求書のお願い。送信ボタンの手前に置き、次の一手を先に見せる */
.fask{grid-column:1/-1;display:flex;gap:14px;align-items:flex-start;
  background:var(--sky);border-radius:var(--r);padding:18px 20px}
.fask .ic{flex:none;color:var(--blue-t);margin-top:2px}
.fask p{font-size:var(--fs-sm);line-height:1.85;color:var(--ink)}
.fask b{color:var(--navy)}
@media (max-width:560px){.chk-grid{grid-template-columns:minmax(0,1fr)}}

/* --- v24：製品カードの「向いている場面」。カード下端に罫で区切って置く ---------- */
.card-use{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);
  font-size:var(--fs-cap);line-height:1.9;color:var(--ink-2)}
.card-use b{display:block;font-size:var(--fs-cap);font-weight:700;color:var(--navy);
  letter-spacing:.04em;margin-bottom:2px}

/* --- v24：見えない側のリスト（.list-check の否定形） --------------------------- */
.list-no{display:grid;gap:12px;margin-top:8px}
.list-no li{display:flex;gap:12px;font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2)}
.list-no li .ic{width:20px;height:20px;color:#96302F;stroke-width:2.6;margin-top:5px;flex:none}
/* --- v24：本文中の説明図。.tw と同じ器に入れて、狭い画面では横スクロールさせる --- */
.figwrap{padding:clamp(18px,2.4vw,28px)}
.figsec{display:block;width:100%;min-width:760px;height:auto}

/* --- v26：用件から入るカード（参考＝cloud-ace.jp トップの相談入口4枚） ------------
   ヒーローの直後に置き、「何を相談したいか」から問い合わせへ直行させる。
   遷移先は contact.html?topic=… で、該当のチェックが入った状態で着地する。 */
.entry{background:var(--w);padding-block:clamp(26px,3vw,40px) clamp(8px,1.2vw,16px)}
.entry-grid{list-style:none;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.entry-c{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  height:100%;background:var(--w);border:1px solid var(--line-2);border-radius:var(--r);
  padding:18px 18px 18px 20px;text-decoration:none;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.entry-t{grid-column:1;font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.6;
  min-height:3.2em;word-break:keep-all}
.entry-d{grid-column:1;font-size:var(--fs-cap);color:var(--ink-2);line-height:1.75}
.entry-arw{grid-column:2;grid-row:1/3;width:22px;height:22px;color:var(--blue);
  stroke-width:2.4;transition:transform var(--t)}
.entry-c:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(16,42,72,.10);transform:translateY(-2px)}
.entry-c:hover .entry-arw{transform:translateX(3px)}

/* --- v26：導入事例カード（参考＝cloud-ace.jp 導入事例）------------------------------
   業種ラベル → 見出し → 要約 → タグ の順。社名は出さない（具名の書面確認が未了のため）。 */
.cases{list-style:none;display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:680px){.cases{grid-template-columns:minmax(0,1fr)}}
.case{display:flex;flex-direction:column;gap:10px;height:100%;
  background:var(--w);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(20px,2.2vw,26px)}
.case-cat{font-size:var(--fs-cap);font-weight:700;color:var(--ink-2);letter-spacing:.06em}
.case h3{font-size:var(--fs-h3);line-height:1.55;color:var(--navy)}
.case p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.case-tags{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.case-tags span{font-size:var(--fs-cap);line-height:1.6;padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--ink-2);background:var(--w)}
.case-tags .t-th{border-color:var(--blue);color:var(--blue-t);background:var(--sky)}

/* --- v26：セクション末の「◯◯へ →」（参考＝cloud-ace.jp の全セクション共通の導線） --- */
.sec-more{margin-top:clamp(18px,2vw,26px);text-align:right}

/* --- v26：トップページのニュース（news.css は index では読まないので簡易版を持つ） --- */
.tnews{list-style:none;display:grid;background:var(--w);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.tnews > li + li{border-top:1px solid var(--line)}
.tnews a{display:flex;align-items:center;gap:14px 18px;padding:16px clamp(16px,2vw,22px);
  text-decoration:none;transition:background var(--t)}
.tnews a:hover{background:var(--sky)}
.tnews time{flex:none;width:96px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.tnews .tn-cat{flex:none;min-width:104px;text-align:center;font-size:var(--fs-cap);font-weight:700;
  color:var(--blue-t);background:var(--sky);border-radius:var(--r-pill);padding:3px 12px;line-height:1.6}
.tnews .tn-t{flex:1 1 auto;min-width:0;font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.7}
.tnews .arw{flex:none;width:22px;height:22px;color:var(--blue);stroke-width:2.4}
@media (max-width:680px){
  .tnews a{flex-wrap:wrap;gap:8px 12px}
  .tnews time{width:auto}
  .tnews .tn-t{flex:1 1 100%}
  .tnews .arw{display:none}
}

/* ------------------------------------------------------------ 23. 本文組 */
.read{max-width:760px}
.read h2{margin-bottom:18px}
.read h3{margin:32px 0 12px}
.read p{margin-bottom:16px;line-height:1.95}
.list-check{display:grid;gap:12px;margin-top:8px}
.list-check li{display:flex;gap:12px;font-size:var(--fs-sm);line-height:1.9}
.list-check li .ic{width:20px;height:20px;color:var(--blue);stroke-width:2.6;margin-top:5px;flex:none}

/* --------------------------------------------------------- 23b. 写真 */
/* v4 の写真15点を補助役として使い回す。藍寄りの色調のままだと LP の明るさに
   合わないため、表示側で少しだけ明度と彩度を起こす（元ファイルは無加工のまま）。 */
.photo{width:100%;border-radius:var(--r-l);box-shadow:var(--sh);
  filter:brightness(1.13) saturate(1.1) contrast(.96)}
figure .cap{text-align:right}

/* PC でだけ入れる改行 */
.br-pc{display:none}
@media (min-width:861px){.br-pc{display:inline}}

/* ------------------------------------------------------------ 24. Footer */
.ftr{background:var(--navy);color:var(--on-navy-2);padding-block:clamp(44px,5vw,64px) 28px;
  font-size:var(--fs-sm)}
.ftr a{color:var(--on-navy-2);text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.5fr);
  gap:clamp(28px,4vw,56px);padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.15)}
.ftr-brand img{width:124px;height:28px;margin-bottom:16px}
.ftr-desc{line-height:1.9;max-width:34em}
.ftr-navs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.ftr-navs h2{font-size:var(--fs-cap);font-weight:700;letter-spacing:.08em;color:#fff;margin-bottom:14px}
.ftr-navs ul{display:grid;gap:10px}
.ftr-bot{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:24px;font-size:var(--fs-cap);line-height:1.8}

/* -------------------------------------------------- 24b. ページトップへ */
.totop{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:44;
  width:52px;height:52px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--w);color:var(--blue-t);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(16,42,72,.10), 0 10px 24px rgba(16,42,72,.14);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),
             visibility var(--t),background var(--t),border-color var(--t)}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop .ic{width:22px;height:22px}
.totop:hover{background:var(--sky);border-color:var(--blue);color:var(--blue-d)}
.totop:active{transform:translateY(2px);box-shadow:0 1px 3px rgba(16,42,72,.14)}

/* ----------------------------------------------------------- 25. 追従CTA */
/* 参考4サイトのうち3サイトが持つ「下部固定の相談バー」。モバイルのみ出す */
.stickycta{display:none}

/* ------------------------------------------------------------- 26. 動き */
/* JS が動かない環境で本文が消えないよう、隠すのは html.js が付いたときだけにする
   （v4 で踏んだ「JSが落ちると全文が消える」不具合への恒久対策） */
.js [data-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-rev) var(--ease),transform var(--t-rev) var(--ease);
  transition-delay:calc(var(--reveal-index,0) * 70ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-reveal]{opacity:1;transform:none}
}

/* -------------------------------------------------------- 27. Responsive */
@media (max-width:1080px){
  /* 4項目（company）は2列に折る */
  .stats ul{grid-template-columns:repeat(2,1fr);gap:20px}
  .stats li + li{border-left:1px solid rgba(255,255,255,.16)}
  .stats li:nth-child(odd){border-left:0}
  /* 3項目（index）は2列に割ると最終行に1個だけ残るので3列のまま詰める */
  .stats-3 ul{grid-template-columns:repeat(3,1fr);gap:16px}
  .stats-3 li:nth-child(odd){border-left:1px solid rgba(255,255,255,.16)}
  .stats-3 li:first-child{border-left:0}
  .c-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 2列に折り返したら横の罫は意味を失うので消す（右端の段からはみ出すのも防ぐ） */
  .tline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px;padding-top:0}
  .tline > li:not(:last-child)::after{display:none}
  .tline > li > b{position:static;margin-bottom:12px;box-shadow:0 2px 6px rgba(16,42,72,.18)}
  .answer-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .svcbox-b{grid-template-columns:1fr}
}
@media (max-width:940px){
  .ftr-navs{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .hero-in{grid-template-columns:minmax(0,1fr)}
  .hero .lead{max-width:none}
  .skymap{margin-top:8px}
  .hstack{margin-top:12px}
  .ftr-top{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--hdr-h:64px}
  .navtog{display:flex}
  .nav{position:fixed;inset:var(--hdr-h) 0 auto 0;background:var(--w);flex-direction:column;
    align-items:stretch;gap:4px;padding:16px var(--pad) 28px;margin:0;
    box-shadow:0 14px 24px rgba(16,42,72,.14);border-top:1px solid var(--line);
    max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
    transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform var(--t) var(--ease),opacity var(--t) var(--ease),visibility var(--t)}
  .nav.is-open{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .nav-link{padding:15px 12px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-link[aria-current="page"]{box-shadow:none;background:var(--sky)}
  .nav .btn{margin:16px 0 0;width:100%}
  .c-3,.c-2,.cards.c-3{grid-template-columns:1fr}
  .creds-row{grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .creds-fr{max-width:none}
  .answer-3{grid-template-columns:1fr;gap:0}
  .answer-3 li + li{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.18);
    margin-top:20px;padding-top:20px}
  .lead-card{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento .wide{grid-column:span 2}
  .cloudgrid{grid-template-columns:1fr}
  .cta-mid{flex-direction:column;align-items:flex-start}
  .cta-mid .btn{width:100%}
}
@media (max-width:680px){
  .bento,.bento .wide{grid-template-columns:1fr;grid-column:auto}
  .navrow{flex-direction:column;align-items:flex-start}
  .issues li{grid-template-columns:minmax(0,1fr)}
  .issues .n{grid-row:auto;grid-column:1/-1;text-align:left;min-width:0;margin-top:4px}
  .issues .n u{display:inline;margin-right:4px}
  .cta-picks > p{flex:1 1 100%;max-width:none}
  .tline{grid-template-columns:1fr;row-gap:0;padding-top:0}
  .tline > li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:0 16px;
    padding:0 0 26px 0;position:relative}
  .tline > li:last-child{padding-bottom:0}
  /* 縦組みでは線を左に立てる */
  .tline > li:not(:last-child)::after{content:"";display:block;position:absolute;
    left:20px;right:auto;top:46px;bottom:-4px;width:2px;height:auto;background:var(--line-2)}
  .tline > li > b{grid-row:1/99;grid-column:1/2;margin:0;box-shadow:0 2px 6px rgba(16,42,72,.18)}
  .tline > li > *:not(b){grid-column:2/3}
  .dlist > div{grid-template-columns:1fr}
  .dlist dt{padding-bottom:0;background:var(--w)}
  .dlist dd{padding-top:8px}
  .dlist > div{background:var(--w)}
  .dlist dt{border-bottom:0}
  .fgrid{grid-template-columns:1fr}
  .ftr-navs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-bot{flex-direction:column;gap:6px}
  /* モバイルは下部にCTAを固定する（参考4サイトの共通挙動） */
  .stickycta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px rgba(16,42,72,.10)}
  .stickycta .btn{width:100%;min-height:54px;font-size:var(--fs-lead)}
  .stickycta .cap{margin-top:6px;text-align:center;font-size:var(--fs-cap)}
  /* 追従バーを持つページだけ下に余白を作る（contact / privacy には出さないため） */
  body[data-stickycta]{padding-bottom:114px}
  /* 追従バーと重ならない位置へ逃がす */
  .totop{bottom:110px;width:46px;height:46px}
}
@media (max-width:640px){
  /* 折り返すと帯の丸みが崩れるので、狭い幅では地と枠を外して素の行に戻す */
  .crown{display:flex;background:none;border:0;box-shadow:none;padding:0}
  .crown em{padding-left:0;border-left:0}
  .crown > .ic{width:19px;height:19px}
}
@media (max-width:560px){
  .br-sp{display:inline}
}
@media (max-width:520px){
  /* 補助の級数は 13px を下限にする（DESIGN.md 27章 Don'ts 21）。
     雲の名札は 13px のまま収めたいので、代わりに段間を詰める。 */
  .sm-set{gap:0 4px}
  .sm-set b{font-size:var(--fs-cap);letter-spacing:0}
  .sm-cb{height:66px}
  .sm-set .cl-2 .sm-cb{padding-bottom:9px}
  .sm-set .cl-3 .sm-cb{padding-bottom:3px}
  .crown{gap:5px 10px}
  .crown b{font-size:var(--fs-cap)}
  .hub-b li{font-size:var(--fs-sm)}
}
@media (max-width:420px){
  .stats ul{grid-template-columns:1fr}
  .stats li + li{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
}


/* ============================================================================
   29. v8「にぎやかだが、整っている」— 視覚の肉付け（2026-08-28）
   ----------------------------------------------------------------------------
   参考15サイトのスクリーンショットを画像として1枚ずつ見て作った装飾の層。
   根拠と採否の理由は DESIGN.md 32〜35章。構成・文言・導線には一切触れていない。
   足すのは「地・面・部品・文字」の4つの層だけ。
   ========================================================================== */

/* --------------------------------------------------- 29a. 地の層：雲の透かし */
/* サーバーワークス（ヒーロー）／freee（淡青の帯）／cloudpack（全ページ）が
   実証している唯一の「業種と一致した背景」。背景画像はボックスに自動でクリップ
   されるので overflow:hidden は要らない（横スクロールの危険が無い）。 */

.hero{
  background-image:
    var(--cw-1), var(--cw-2), var(--cs-1),
    radial-gradient(110% 58% at 82% 10%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#BBD8F0 0%,#CBE0F4 26%,#DCEAF7 62%,#DCEAF7 100%);
  background-position:
    -246px -62px,             /* 左上・大きく、左端と上端から出す */
    calc(100% + 176px) -40px, /* 右上・右端から出す */
    -150px calc(100% + 46px), /* 左下・地が淡い側なので青い雲にする */
    0 0, 0 0;
  background-size:
    640px auto, 500px auto, 420px auto,
    auto, auto;
  background-repeat:no-repeat;
}

/* 認定バッジ列：地を1段濃くし、上端を巨大な弧で切る。
   弧は radial-gradient の1層で作る（擬似要素を版面の外へ出さないので横溢れが起きない）。
   意味（空と地平）が説明できる場所なので、ページ内でここ1箇所だけに使う（35章 Don'ts 33）。*/
.creds{background-color:var(--sky-b);
  background-image:radial-gradient(148% 132px at 50% 0, var(--w) 0 99.2%, rgba(255,255,255,0) 100%);
  background-repeat:no-repeat}

/* 淡青の章に雲を1〜2個。地に近い青で沈めるので、文字のコントラストは実質変わらない */
.sec-sky{
  background-image:var(--cs-1), var(--cs-2);
  background-position:calc(100% + 160px) 26px, -190px calc(100% - 20px);
  background-size:480px auto, 400px auto;
  background-repeat:no-repeat;
}
/* 前の章と地続きにする .sec-t では、雲を二重に描かない */
.sec-sky.sec-t{background-image:none}

/* 第3の地色。取引実績＋FAQ の対に使い、前半の淡青の帯と区別する */
.sec-sky2{background-color:var(--sky-b);
  background-image:var(--cs-2);
  background-position:-190px 24px;
  background-size:440px auto;background-repeat:no-repeat}
.sec-sky2.sec-t{background-image:none}

/* 濃紺の面：白をごく薄く置く。白文字のコントラストが落ちないよう 5% 程度に留める */
.cta{
  background-image:
    var(--cn-1), var(--cn-2),
    linear-gradient(160deg,var(--navy) 0%,#1D3763 100%);
  background-position:-170px -46px, calc(100% + 130px) calc(100% + 40px), 0 0;
  background-size:560px auto, 460px auto, auto;
  background-repeat:no-repeat;
}
.stats{
  background-image:var(--cn-2), linear-gradient(180deg,var(--navy),var(--navy));
  background-position:calc(100% + 90px) -56px, 0 0;
  background-size:420px auto, auto;background-repeat:no-repeat;
}
/* 下層ページの見出し帯 */
.phead{
  background-image:
    var(--cw-2), var(--cs-1),
    linear-gradient(168deg,var(--sky-2) 0%,#F0F7FC 62%,var(--w) 100%);
  background-position:calc(100% + 130px) -46px, -170px 70%, 0 0;
  background-size:520px auto, 400px auto, auto;background-repeat:no-repeat;
}

/* 課題の章だけドットの地を敷いて、隣の章と質を変える（G-gen 型・1箇所限定） */
.dotfield{background-image:var(--dot);background-size:22px 22px;background-repeat:repeat}

/* --------------------------------------------- 29b. 見出しのあしらい */
/* 楽楽精算・ジンジャー・マネーフォワードの3件が同じ形を持っていた最頻の装飾。
   左1/3を琥珀にして、CTAの暖色と本文の寒色が同じ部品の中で1回だけ触れる。 */
.head h2::after,.creds-h h2::after{
  content:"";display:block;width:56px;height:3px;border-radius:3px;
  margin:16px auto 0;background:linear-gradient(90deg,var(--amber) 0 34%,var(--blue) 34% 100%)}
.head-l h2::after,.split .head h2::after{margin-inline:0}

/* 章のラベル。v10 は 13px → 15px に上げていたが、v13 で 13px へ戻す。
   ラベルは見出しに視線を渡すための小さな標識で、見出しと級数を争ってはいけない。
   お手本の章ラベルは 11.2px/700/.1em。級数を下げたぶんを字送り .14em と色で補う。
   （DESIGN.md 41-3・41-4「4軸を重ねる」） */
.label{font-size:var(--fs-label);letter-spacing:.14em}
.label::before{width:26px}

/* 見出しの直前に置く塗りラベル（HRBrain の「お悩み1」型） */
.tag-h{display:inline-block;background:var(--navy);color:#fff;border-radius:6px;
  padding:4px 11px;font-size:var(--fs-cap);font-weight:700;letter-spacing:.06em;line-height:1.6;
  margin-right:11px;vertical-align:.12em}

/* ------------------------------------------------- 29c. 面の層：奥行きと入れ子 */
/* 白地の上のカードは罫を残し、影を1段強める。淡色地の上では罫を消して影だけで浮かせる
   （サーバーワークス／HRBrain の型）。v7 のカードは白地に白カードでほぼ消えていた。 */
.card,.svcbox,.namewall,.cloud{
  box-shadow:0 1px 2px rgba(16,42,72,.05), 0 4px 10px rgba(16,42,72,.06),
             0 16px 34px rgba(16,42,72,.09)}
.sec-sky .card,.sec-sky2 .card,.sec-sky .cloud,.sec-sky2 .cloud{
  border-color:transparent;
  box-shadow:0 2px 4px rgba(16,42,72,.06), 0 10px 22px rgba(16,42,72,.09),
             0 24px 48px rgba(16,42,72,.10)}
a.card:hover,.card-hov:hover{
  box-shadow:0 4px 8px rgba(16,42,72,.08), 0 14px 28px rgba(16,42,72,.12),
             0 30px 60px rgba(16,42,72,.14)}

/* 3層の入れ子：地 →（淡色パネル ＋ 塗りの見出し帯）→ 白いカード。
   ジンジャー／HRBrain が持っていて v7 に完全に欠けていた層。 */
.nest{background:var(--sky-b);border-radius:var(--r-l);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.sec-sky .nest{background:var(--sky-b);box-shadow:none}
.sec-sky2 .nest{background:var(--w);box-shadow:inset 0 0 0 1px var(--line)}
.nest-b{padding:clamp(20px,2.6vw,32px)}
.nest-b > .cards .card{border-color:var(--line);
  box-shadow:0 1px 2px rgba(16,42,72,.05), 0 6px 16px rgba(16,42,72,.07)}

/* -------------------------------------------- 29d. 部品の層：番号・丸ボタン・色面 */
/* カードの左上角から半分はみ出す丸（HRBrain の POINT 01 型）。
   ただし中身は番号ではなくアイコンにした。「選ばれる理由」の3枚は順序を持たないので、
   01/02/03 と振ると順位や手順という嘘の情報を足すことになる（.tline は本当に順序なので数字のまま）。
   丸の中身をアイコンにすると、造形の強さは同じまま、各カードが何の話かを示せる。 */
.pn{position:relative;overflow:visible}
.pn > .pnum{position:absolute;top:-17px;left:-12px;z-index:2;
  width:60px;height:60px;border-radius:var(--r-pill);
  background:linear-gradient(158deg,var(--blue) 0%,var(--blue-t) 100%);color:#fff;
  display:grid;place-items:center;
  box-shadow:0 0 0 5px var(--w), 0 3px 7px rgba(16,42,72,.18), 0 10px 22px rgba(16,42,72,.16)}
.sec-sky .pn > .pnum,.sec-sky2 .pn > .pnum{box-shadow:0 0 0 5px var(--sky),
  0 3px 7px rgba(16,42,72,.18), 0 10px 22px rgba(16,42,72,.16)}
.pnum .ic{width:28px;height:28px;stroke-width:1.7}
.pn > h3{padding-left:56px;min-height:46px;display:flex;align-items:center}

/* 丸シェブロン。実測15サイト中5サイトが持っていた最頻の部品。
   新しい部品を足すのではなく、既に全ページにある .alink の矢印（淡い受け皿＋細い矢）を
   参考サイトと同じ「塗りの円＋白い矢」に上げる。1箇所の変更でサイト全体に効く。
   白い矢 on --blue は 3.73:1（図形の下限 3:1）を満たす。 */
.alink .arw{width:30px;height:30px;background:var(--blue);color:#fff;
  box-shadow:0 1px 3px rgba(16,42,72,.14)}
.alink .arw .ic{width:15px;height:15px;stroke-width:2.6}
.alink:hover .arw{background:var(--blue-d)}
.sec-navy .alink .arw,.cta .alink .arw,.answer .alink .arw{background:#8FD0F5;color:var(--navy)}

/* アイコンの受け皿を、淡い角丸から彩度のある面へ（マネーフォワード／HRBrain 型）。
   2トーンは「線を白・地を青」で作る。全面のベタ塗りにはしない。 */
.icb{background:var(--blue);color:#fff;
  box-shadow:0 2px 5px rgba(16,42,72,.13), 0 6px 14px rgba(30,139,206,.20)}
.icb .ic{stroke-width:1.85}
.icb-amber{background:#FFF0D0;color:#8A5A00;box-shadow:0 2px 5px rgba(16,42,72,.08)}
.icb-navy{background:var(--navy);color:#8FD0F5;box-shadow:0 2px 5px rgba(16,42,72,.16)}
/* 白い面の中では地を淡くして、カードのほうを主役に残す */
.navrow-t .icb{background:var(--w);color:var(--blue-t);box-shadow:0 1px 3px rgba(16,42,72,.10)}
.navrow:hover .navrow-t .icb{background:var(--blue);color:#fff}

/* cloudpack 型：カードの左辺いっぱいの色面に、白の線アイコンを抜く。
   本サイトで最も彩度が上がる箇所。サービスの3枚にだけ使う。 */
.fcard{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:stretch;
  overflow:hidden;padding:0;gap:0}
.fcard > .fc-i{background:var(--blue);display:grid;place-items:center;
  background-image:var(--cn-2);background-size:200px auto;
  background-position:-40px calc(100% + 30px);background-repeat:no-repeat}
.fcard > .fc-i .ic{width:42px;height:42px;color:#fff;stroke-width:1.5}
.fcard .fc-i-2{background-color:var(--navy)}
.fcard .fc-i-3{background-color:var(--navy-2)}
.fcard > .fc-b{padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px;min-width:0}
.fcard .fc-b > .alink{margin-top:auto;padding-top:4px}

/* ------------------------------------------------- 29e. 文字の層 */
/* 本文中の色つき太字。楽楽精算・SmartHR・BeeX が段落あたり1〜2箇所で使っていた。
   --blue-t は対白 7.10:1 なので AA を余裕で満たす。1段落に1箇所まで（35章 Don'ts 36）。 */
.hl{font-weight:700;color:var(--blue-t)}
.sec-navy .hl,.answer .hl,.cta .hl,.stats .hl{color:#9FD8F8}

/* リンクの下線を太らせる（NHNテコラス型）。文字から離して読みを妨げない */
.alink:hover{text-decoration-thickness:2px;text-underline-offset:4px}

/* ------------------------------------------------- 29f. 既存部品の増強 */
/* 実績帯：級数を上げ、琥珀の罫を太く長くする。数字そのものは白のまま
   （琥珀を CTA 以外の文字に使わない・35章 Don'ts 38）。 */
.stats li::before{width:40px;height:3px;margin-bottom:14px}
/* v13：50px は .answer-3 の頂点（56px）と競合していた。帯の数字の段（40px）へ下げる。
   級数は --fs-d2 に一本化したので、ここでの上書きはやめる（41-5） */
.stats b i{color:#9FD8F8}

/* 導入の流れ：番号を大きくし、進行が見えるよう罫を太くする */
.tline{padding-top:66px}
/* v13：級数を 20px 固定 → --fs-h3 に寄せた結果、SP〜1140px で 18〜18.3px になり
   WCAG の「大きな文字」（18.66px 以上かつ 700）を下回った。#1E8BCE の対白抜きは
   3.72:1 なので、大きな文字なら 3:1 で通るが、通常文字では 4.5:1 に届かない。
   級数を戻すのではなく、丸の地を --blue-t（7.10:1）以降まで濃くして、
   どの級数でも AA を満たす状態にする。（LP制作ナレッジ 7-4 の閾値） */
.tline > li > b{width:50px;height:50px;top:-66px;font-size:var(--fs-h3);
  background:linear-gradient(160deg,var(--blue-t) 0%,var(--blue-d) 100%)}
.tline > li:not(:last-child)::after{top:-44px;left:54px;
  right:calc(var(--tl-gap) * -1 - 54px);height:3px;background:var(--sky-3)}
.sec-sky .tline > li > b{box-shadow:0 0 0 7px var(--sky), 0 3px 8px rgba(16,42,72,.22)}
.tline .k{color:var(--blue-t)}

/* 課題の一覧：数字の背後に淡い受け皿を敷いて、行の右端に重さを作る */
.issues li{position:relative}
.issues .n{background:#FBEEEC;border-radius:var(--r-s);padding:8px 14px 9px;min-width:5em}

/* 取扱クラウドのカード：見出し帯を塗りにする（電算システム／ジンジャー型） */
.cloud-h{background:var(--navy);border-bottom:none;padding:16px 22px 17px}
.cloud-h .ic{color:#8FD0F5}
.cloud-h b{color:#fff}
.cloud-h span{color:#9FD8F8}

/* 認定バッジ列のカード：下辺のリボンに琥珀の細い上罫を足して、勲章の縁にする */
.creds-rb{box-shadow:inset 0 3px 0 var(--amber)}

/* 章の頭の余白が空きすぎていた（v7 は1章あたり約280pxを消費して大半が空白）。
   リードと本体の間を詰める。 */
.head .lead{margin-top:0}
/* v12：ここにあった 2つめの .mt-l 定義（clamp(24,3vw,40)）を削除した。
   同じ詳細度で後から上書きしていたため、:root の --gap-l を上げても
   群の始まりの空きは 40px で頭打ちになっていた。決定権は変数1つに集める
   （LP制作ナレッジ 7B-5(c)・7-7「詳細度の落とし穴」）。 */

/* 入れ子の中では、段の丸を囲む輪の色をパネルの地に合わせる（外すと輪が浮いて見える） */
.sec-sky .nest .tline > li > b{box-shadow:0 0 0 7px var(--sky-b), 0 3px 8px rgba(16,42,72,.22)}
.sec-sky .nest .tline > li:not(:last-child)::after{background:#CFE0EF}
.nest-b > .tline{padding-top:66px}
@media (max-width:640px){.nest-b > .tline{padding-top:0}}

/* --------------------------------------- 29h. .offer（v7 からの積み残しの修正） */
/* v7 で最終CTAに「ご相談のあとにお出しするもの」3点を足したが、CSS を書き忘れていて
   チェックが左端に落ち、文だけが中央に残る壊れ方をしていた（v7 の QA が取り逃していた）。
   構成・文言は変えず、面として組み直す。 */
.offer{max-width:660px;margin:28px auto 0;text-align:left;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-l);padding:22px clamp(20px,2.4vw,30px) 24px}
.offer > b{display:block;font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;
  color:#9FD8F8;line-height:1.7;padding-bottom:13px;margin-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.2)}
.offer ul{display:grid;gap:12px}
.offer li{display:flex;align-items:flex-start;gap:12px;
  font-size:var(--fs-sm);line-height:1.85;color:#fff}
.offer li .ic{width:19px;height:19px;flex:none;margin-top:.34em;
  color:var(--amber);stroke-width:2.8}
.offer li span{min-width:0}

/* -------------------------------------------- 29g. v8 の レスポンシブ補正 */
@media (max-width:900px){
  /* 雲は狭い幅では版面を圧迫するので小さくする。消しはしない（業種の表示なので） */
  .hero{background-size:420px auto,330px auto,280px auto,auto,auto;
        background-position:-130px -26px,calc(100% + 96px) -14px,-90px calc(100% + 24px),0 0,0 0}
  .sec-sky,.phead{background-size:320px auto,270px auto,auto}
  .sec-sky2{background-size:300px auto}
  .fcard{grid-template-columns:88px minmax(0,1fr)}
  .fcard > .fc-i .ic{width:34px;height:34px}
}
@media (max-width:640px){
  .head h2::after,.creds-h h2::after{width:46px;margin-top:14px}
  .pn > .pnum{width:52px;height:52px;top:-15px;left:-10px}
  .pnum .ic{width:25px;height:25px}
  .pn > h3{padding-left:48px}
  /* 色面のカードは縦積みにして、色面を上辺の帯に変える */
  .fcard{grid-template-columns:1fr}
  .fcard > .fc-i{height:72px}
  .tline{padding-top:0}
  .tline > li > b{position:static;margin-bottom:12px}
  .tline > li:not(:last-child)::after{display:none}
}

/* --------------------------------------------------------------- 28. 印刷 */
@media print{
  .hdr,.stickycta,.skip,.totop,.cta .btns,.btns{display:none}
  body{background:#fff;color:#000;padding-bottom:0}
  .card,.svcbox,.dlist,.tw{box-shadow:none;border:1px solid #999}
  .cta,.sec-navy,.stats,.ftr{background:#fff !important;color:#000 !important}
  .cta h2,.sec-navy h2,.stats b{color:#000 !important}
}


/* ============================================================================
   30. v10「広告から来た人を、1ページで説得する」— LP の説得部品（2026-08-28）
   ----------------------------------------------------------------------------
   日本の B2B 広告 LP 32件・202枚のスクリーンショットを画像として読んで抽出した
   部品だけを足す層。根拠と採否は DESIGN.md 38章。
   v8（29章）までの規則は原文のまま残し、ここから後ろで上書きする。
   琥珀は CTA 専用のまま動かさない（23章 Don'ts 5／35章 Don'ts 38）。
   ========================================================================= */

/* ------------------------------------------------ 30a. ＼ ／ のあしらい */
/* 実測：SI&C（セクションラベル）・クロジカ／バクラク（ボタン上のマイクロコピー）。
   斜線は擬似要素の 2px の棒を傾けて作る。画像もフォントも増やさない。
   置いてよいのは要所3箇所まで（38-5 Don'ts 6）。 */
.slash{display:inline-flex;align-items:center;gap:12px}
.slash::before,.slash::after{content:"";width:2px;height:17px;border-radius:2px;
  background:var(--blue);flex:none}
.slash::before{transform:rotate(-19deg)}
.slash::after{transform:rotate(19deg)}
/* .label は罫（::before）を持っているので、＼／ を重ねるときは罫を消す */
.label.slash::before{width:2px;height:17px;border-radius:2px;background:var(--blue);
  transform:rotate(-19deg)}
.sec-navy .slash::before,.sec-navy .slash::after,
.cta .slash::before,.cta .slash::after{background:#8FD0F5}

/* ------------------------------------------------------- 30b. マーカー */
/* 実測の日本の LP は黄色を使うが、このサイトの琥珀は CTA 専用色なので使えない
   （38-5 Don'ts 1）。淡い空色の帯にする。1章に1箇所まで。 */
.mk,.mark{background:linear-gradient(transparent 58%,var(--sky-3) 58%);
  padding-inline:3px;font-weight:700;color:var(--navy)}
.sec-navy .mk,.cta .mk,.answer .mk{background:linear-gradient(transparent 58%,rgba(143,208,245,.34) 58%);
  color:#fff}

/* ------------------------------- 30c. ファーストビューの証拠3項目（✓） */
/* 実測11件中7件が FV に置いている。機能の列挙ではなく「あなたのケースでも
   受けられる」の提示にする（Cloud Assist / NHNテコラス / クラウドエース型）。 */
.proof{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:15px}
.proof li{display:inline-flex;align-items:flex-start;gap:8px;
  font-size:var(--fs-sm);font-weight:700;color:var(--navy);line-height:1.7}
.proof .ic{width:17px;height:17px;stroke-width:2.8;color:var(--blue-t);flex:none;margin-top:.28em}
.hero .proof{margin-top:22px}
.hero .btns{margin-top:14px}
.hero .micro{margin-top:22px;margin-bottom:10px;color:var(--blue-t)}

/* --------------------------------------------- 30d. アンカーナビ（目次） */
/* 実測22件中12件。ページ内リンクだけを置く。外へ出す導線は入れない（Don'ts 7）。 */
.jump{border-bottom:1px solid var(--line)}
.jump .wrap{padding-block:clamp(14px,1.6vw,20px)}
.jump ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px clamp(6px,1vw,14px)}
.jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;
  border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:700;
  color:var(--navy);text-decoration:none;line-height:1.6;
  transition:background var(--t),color var(--t)}
.jump a .ic{width:14px;height:14px;stroke-width:2.6;color:var(--blue);
  transition:transform var(--t) var(--ease)}
.jump a:hover{background:var(--sky);color:var(--blue-t)}
.jump a:hover .ic{transform:translateY(2px)}

/* ----------------------------------- 30e. お悩みチェックリスト（吹き出し） */
/* 実測：クロジカ（吹き出し＋話し言葉＋「…」）。頭に☑を置いて「チェックリスト」
   として読ませる。数字（毎月3通／3か所／3画面）は v8 の .issues .n の役割を引き継ぐ。 */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,32px);align-items:start}
.pains > li{position:relative;background:var(--w);border:1px solid var(--line);
  border-radius:var(--r-l);padding:clamp(20px,2.2vw,26px);
  box-shadow:var(--sh);display:grid;gap:12px}
/* 吹き出しのしっぽ。罫のある面なので、外枠と塗りの三角を2枚重ねる */
.pains > li::before,.pains > li::after{content:"";position:absolute;top:100%;left:38px;
  width:0;height:0;border-style:solid}
.pains > li::before{border-width:15px 13px 0 13px;
  border-color:var(--line) transparent transparent transparent}
.pains > li::after{border-width:13px 11px 0 11px;margin-left:2px;
  border-color:var(--w) transparent transparent transparent}
.pains .pt{display:flex;align-items:flex-start;gap:12px;
  font-size:var(--fs-lead);font-weight:700;color:var(--navy);line-height:1.78}
.pains .pt .ic{width:24px;height:24px;stroke-width:1.9;color:var(--blue);flex:none;margin-top:.2em}
.pains p{font-size:var(--fs-sm);line-height:1.9;color:var(--ink)}
.pains .n{margin-top:2px;display:flex;align-items:baseline;justify-content:flex-end;gap:6px;
  font-size:var(--fs-h2s);font-weight:900;color:var(--navy);line-height:1.2}
.pains .n u{text-decoration:none;font-size:var(--fs-cap);font-weight:700;color:var(--ink-2);
  letter-spacing:.06em;align-self:center}
.pains .n i{font-style:normal;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}

/* 悩み → 解決 を結ぶ下向きの矢印（クロジカ型）。受けの一文まで1つの塊にする */
.drop{display:grid;justify-items:center;gap:14px;
  margin-top:clamp(34px,4vw,52px);text-align:center}
.drop span{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff}
.drop span .ic{width:26px;height:26px;stroke-width:2.2}
.drop b{display:block;font-size:var(--fs-h2s);font-weight:700;
  color:var(--navy);line-height:1.7}

/* ------------------------------------------------------ 30f. 比較表（.vs） */
/* 実測 SI&C の6要素（吹き出し→項目列→他の選択肢列→矢印→自社列→直下の注記）を
   Sieger の色で組み直したもの。比べるのは「直接契約という構造」であって
   他社リセラーの品質ではない（38-5 Don'ts 3）。 */
.bub{position:relative;max-width:760px;margin:0 auto clamp(30px,3.4vw,44px);
  background:var(--navy);color:#fff;border-radius:var(--r);
  padding:clamp(16px,1.8vw,22px) clamp(20px,2.4vw,30px);text-align:center;
  font-size:var(--fs-lead);font-weight:700;line-height:1.75}
.bub::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  width:0;height:0;border-style:solid;border-width:14px 13px 0 13px;
  border-color:var(--navy) transparent transparent transparent}

.vs{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vs table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0}
.vs caption{caption-side:top;text-align:left;font-size:var(--fs-cap);color:var(--ink-2);
  line-height:1.85;padding-bottom:12px}
.vs th,.vs td{padding:16px clamp(12px,1.4vw,20px);vertical-align:top;text-align:left;
  font-size:var(--fs-sm);line-height:1.85}
.vs thead th{font-size:var(--fs-body);font-weight:700;line-height:1.6;text-align:center;
  vertical-align:middle;padding-block:18px}
.vs thead .h-k{background:transparent;border:0}
.vs thead .h-a{background:var(--line);color:var(--ink);
  border-radius:var(--r-s) var(--r-s) 0 0}
.vs thead .h-b{background:var(--navy);color:#fff;border-radius:var(--r-s) var(--r-s) 0 0}
.vs tbody th{width:29%;font-weight:700;color:var(--navy);background:var(--sky-2);
  border-bottom:1px solid var(--w)}
.vs tbody .c-a{width:33%;color:var(--ink-2);background:#EDF1F5;
  border-bottom:1px solid var(--w)}
.vs tbody .c-b{width:38%;color:var(--ink);background:var(--w);
  border-bottom:1px solid var(--line);
  border-left:2px solid var(--navy);border-right:2px solid var(--navy)}
.vs tbody tr:last-child .c-b{border-bottom:2px solid var(--navy);
  border-radius:0 0 var(--r-s) var(--r-s)}
.vs tbody tr:last-child th{border-radius:0 0 0 var(--r-s)}
.vs tbody tr:last-child .c-a{border-radius:0 0 var(--r-s) 0}
.vs .c-b b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--navy);
  line-height:1.75;margin-bottom:3px}
.vs .c-a .no{display:inline-flex;align-items:center;gap:7px}
.vs .c-a .no::before{content:"";width:13px;height:2px;border-radius:2px;
  background:var(--line-2);flex:none}
.vs .cap{margin-top:16px}
/* 広い幅では列見出し（thead）が担うので、セル内の見出しは出さない */
.vs-l{display:none}

/* ----------------------------------------- 30g. 見出しの中の数字（型D） */
/* 実測クラウドサイン「選ばれる 3 つの理由」。数字だけ約1.8倍・色つき。
   連番として使ってはいけない（38-5 Don'ts 8）。 */
.numx{font-size:1.7em;font-weight:900;color:var(--blue-t);line-height:1;
  letter-spacing:0;padding-inline:.06em}

/* ------------------------------------------------- 30h. v10 レスポンシブ */
@media (max-width:900px){
  .pains{grid-template-columns:1fr;gap:26px}
  /* 641〜900px は横スクロールなしで収まる下限（641px 時の版面内幅 577px より小さくする） */
  .vs table{min-width:0}
  .vs th,.vs td{padding:14px 13px}
  .vs thead th{font-size:var(--fs-sm)}
  .proof{gap:8px 18px}
}
@media (max-width:640px){
  .jump a{padding:8px 11px;font-size:var(--fs-cap)}
  .bub{font-size:var(--fs-lead)}
  .drop span{width:46px;height:46px}

  /* 狭い幅では表を横スクロールさせない。横スクロールにすると
     「Sieger にまとめた場合」の列が画面の外に出てしまい、比較表として機能しない。
     行を1枚のカードに組み替え、列の見出しは各セルの .vs-l が担う。 */
  .vs{overflow-x:visible}
  .vs table{display:block;min-width:0;width:100%}
  .vs thead{display:none}
  .vs tbody{display:grid;gap:16px}
  .vs tbody tr{display:block;border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;background:var(--w);box-shadow:var(--sh)}
  /* 基底の .vs tbody .c-a / .c-b は幅を % で持っている（詳細度 0,2,1）。
     ここで打ち消すには同じかそれ以上の詳細度が要る（0,1,2 では負ける） */
  .vs tbody th,.vs tbody .c-a,.vs tbody .c-b{display:block;width:auto;padding:14px 16px}
  .vs tbody th{background:var(--navy);color:#fff;font-size:var(--fs-body);
    border:0;border-radius:0}
  .vs tbody .c-a{background:#EDF1F5;border:0;border-radius:0}
  .vs tbody .c-b{background:var(--w);border:0;border-top:2px solid var(--navy);border-radius:0}
  .vs tbody tr:last-child th,.vs tbody tr:last-child .c-a,
  .vs tbody tr:last-child .c-b{border-radius:0}
  .vs tbody tr:last-child .c-b{border-bottom:0}
  .vs-l{display:block;margin-bottom:6px;font-size:var(--fs-cap);font-weight:700;
    letter-spacing:.06em;color:var(--ink-2)}
  .vs .c-b .vs-l{color:var(--blue-t)}
}

/* =====================================================================
   v18（2026-09-04）：CTA は「お問い合わせはこちら＋資料ダウンロード」の
   2 点セットに統一する。単独ボタンだった箇所は .pair-btns で束ねる。
   ===================================================================== */
.pair-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.cta-mid .btns.pair-btns{flex:0 0 auto}
.cta-mid .pair-btns .btn{width:auto}
@media (max-width:680px){
  .cta-mid .btns.pair-btns{width:100%}
  .cta-mid .pair-btns .btn{flex:1 1 100%;width:100%}
}
/* 追従バー：2 つを横並びにして高さは 1 行のまま保つ */
.stickycta .btns.sticky-btns{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;margin:0}
.stickycta .sticky-btns .btn{flex:1 1 0;width:auto;min-width:0;padding-inline:8px;
  font-size:var(--fs-sm);white-space:nowrap;gap:0}
.stickycta .sticky-btns .btn .ic{display:none}
@media (max-width:360px){
  .stickycta .sticky-btns{gap:6px}
  .stickycta .sticky-btns .btn{font-size:13px;padding-inline:4px}
}

/* =====================================================================
   v19（2026-09-04）仕上げ：日本語組版・アンカー位置・光学バランス
   ===================================================================== */

/* --- 1. 日本語の改行を文節（ぶんせつ）単位にする -----------------------
   従来は word-break:normal のため「書面」「請求」「体制」のような語の
   途中で行が割れていた。auto-phrase は行末を文節の切れ目に寄せる。
   非対応ブラウザ（Firefox）は従来どおりの折返しに戻るだけで崩れない。 */
body,h1,.h1,h2,.h2,h3,.h3,h4,p,li,dt,dd,th,td,figcaption,summary,label,
.lead,.cap,.plaque-d,.step p,.why-c p,.offers li span,.pn-say,.cta-picks span{
  word-break:auto-phrase;
}
/* 行内で溢れる恐れがあるのは長いURL・メールアドレスだけなので、
   既定は break-word に下げて英単語の不自然な分断を止める。 */
body{overflow-wrap:break-word}
.brk-any,address,.field-note code,a[href^="mailto:"],a[href^="http"]:not(.btn):not(.alink){
  overflow-wrap:anywhere;
}
/* 段落の泣き別れ（最終行1文字）を避ける。balance は見出しだけに残す。 */
p,li,dd{text-wrap:pretty}

/* --- 2. ページ内リンクの着地点が固定ヘッダーに潜らないようにする -------
   ヘッダーは PC 72px・SP 64px。見出しが隠れて「リンクが効いていない」
   ように見えるのを防ぐ。 */
[id]{scroll-margin-top:96px}
@media (max-width:860px){[id]{scroll-margin-top:88px}}

/* --- 3. フォーカスリング：暗い面では白く抜く ------------------------- */
.sec-navy :focus-visible,.cta :focus-visible,.ftr :focus-visible,
.cta-band :focus-visible,.trust-nv :focus-visible{outline-color:#fff}

/* --- 4. サービスカード：左の説明文が上下中央に浮いて、右の「対応範囲」と
   行頭がそろっていなかった。読み始めの位置を左右でそろえる。 --- */
.svcbox-b{align-items:start}

/* --- 5. 「横にスクロールできます」は表が実際にはみ出す幅でだけ出す。
   PC では表は収まっているのに常時出ていて、事実と違う案内になっていた。
   表が溢れ始めるのは 850px 未満（実測）。 --- */
.thint-x{display:none}
@media (max-width:844px){.thint-x{display:inline}}


/* ------------------------------------------------------- v20：会社情報の未受領行
   company.html の会社概要は、登記事項が届くまで値を空欄で置いておく（DESIGN.md 48-2）。
   <dd> が空だと行が潰れて表が壊れて見えるので、1 行ぶんの高さだけ確保する。 */
.dlist dd:empty{min-height:calc(var(--fs-body) * 1.9)}

/* --- 6. 日本語の改行を、ブラウザに依存せず文節で止める（v21）------------------
   v19 で入れた `word-break:auto-phrase` は Chromium だけの機能だと判明した
   （W3C WebDX Baseline API 実測：Chrome/Edge のみ、Safari・Firefox は未実装）。
   実際に WebKit 26 で確認したところ「クラウド」「お客様」「事業者」「制度」が
   語の途中で割れていた。iPhone の Safari は日本の法人利用で主要ブラウザなので放置できない。
   そこで、行が割れると困る短い文には `word-break:keep-all`（全ブラウザ対応）を当て、
   HTML 側の文節の切れ目に <wbr> を置いて改行位置を明示した。auto-phrase は
   長い本文向けに残す（対応ブラウザだけの上乗せ）。 --- */
.step p,.plaque-d,.why-c p,.pn-say,.ai-pts p,.acct p{word-break:keep-all;overflow-wrap:break-word}

/* 送信結果の表示（成功／失敗）。v21 でフォームを実送信に切り替えたときに追加。 */
.fnote{margin-top:14px;padding:12px 16px;border-radius:var(--r);font-size:var(--fs-sm);line-height:1.8}
.fnote.is-ok{background:var(--sky);border:1px solid var(--blue);color:var(--navy)}
.fnote.is-ng{background:#FFF8E8;border:1px solid #F2D89B;color:var(--navy)}

/* =====================================================================
   v22（2026-09-04）：品質監査で出た実害の修正
   ===================================================================== */

/* --- 7. 書体の入れ替わりで起きるレイアウトのずれを止める ------------------
   services を 360px で見たとき CLS 0.1211（不合格）を実測。原因は Webフォントの
   swap で、フォールバックの Hiragino Sans が Noto Sans JP より 4.1% 幅広いため、
   h1 が余分に折り返し、Noto の到着で 50px 詰まっていた。
   フォールバックの寸法を Noto 側に合わせて、入れ替わっても行が動かないようにする。 --- */
@font-face{
  font-family:"NotoJP fallback";
  src:local("Hiragino Sans"),local("HiraginoSans-W3"),local("Hiragino Kaku Gothic ProN"),
      local("Yu Gothic"),local("YuGothic"),local("Meiryo");
  size-adjust:95.9%;
  ascent-override:88%;descent-override:12%;line-gap-override:0%;
  font-display:swap;
}
:root{
  --font:"Noto Sans JP","NotoJP fallback","Hiragino Sans","Hiragino Kaku Gothic ProN",
    "Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
}

/* --- 8. 下部の固定 CTA が、フォーカスした要素を覆っていた ------------------
   WCAG 2.2 の 2.4.11（フォーカスの非隠蔽）。company / services を 360px で見ると
   フッターのリンクが 100% 隠れる。追従バーの高さぶん、着地位置を上げる。 --- */
html{scroll-padding-bottom:96px}
@media (min-width:681px){html{scroll-padding-bottom:24px}}

/* --- 9. 自動で流れるロゴ帯に、止める手段を用意する ------------------------
   WCAG 2.2.2（レベルA）。5秒を超えて自動で動くものには停止手段が要る。
   帯の中にフォーカスできる要素が1つも無かったため :focus-within が発火せず、
   キーボードだけの利用者には止める方法が無かった。 --- */
.lg-pause{position:absolute;right:8px;top:8px;z-index:2;display:inline-flex;align-items:center;
  gap:6px;min-height:32px;padding:0 12px;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--line-2);color:var(--blue-t);
  font-size:12px;font-weight:700;line-height:1;font-family:inherit}
.lg-pause:hover{background:#fff;border-color:var(--blue)}
.sec-navy .lg-pause,.trust-nv .lg-pause{background:rgba(16,42,72,.72);border-color:rgba(255,255,255,.5);color:#fff}
@media (prefers-reduced-motion:reduce){.lg-pause{display:none}}