/* =============================================================
   article.css  —  SEO記事 共通デザインテンプレート（単一ソース）
   このファイルを変更すると、読み込む全記事のデザインに反映されます。
   配置: HTMLと同一フォルダを想定（各記事は
   <link rel="stylesheet" href="./article.css"> で参照）
   ============================================================= */

  :root{
    --paper:#E9EDF0;
    --paper-2:#F3F5F7;
    --ink:#13202B;
    --ink-soft:#3A4D5C;
    --steel:#6B7C89;
    --line:#C5CED4;
    --line-strong:#A7B4BD;
    --brand:#1477C7;
    --brand-deep:#0F5A9A;
    --brand-tint:#DCEAF7;
    --signal:#D8641E;
    --white:#FCFDFD;
    --shadow:18px 18px 0 rgba(19,32,43,.06);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Noto Sans JP",system-ui,sans-serif;
    font-weight:400;
    line-height:1.95;
    -webkit-font-smoothing:antialiased;
    background-image:
      linear-gradient(rgba(112,130,142,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(112,130,142,.06) 1px, transparent 1px);
    background-size:28px 28px;
  }
  h1,h2,h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;line-height:1.35;letter-spacing:.01em;margin:0;}
  p{margin:0;}
  a{color:inherit;}

  .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
  /* narrow reading column for body prose */
  .measure{max-width:720px;margin:0 auto;padding:0 24px;}

  /* ---- shared section label ---- */
  .eyebrow{
    font-family:"Space Mono",monospace;
    font-weight:700;
    font-size:.72rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--brand);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:26px;height:1px;background:var(--brand);display:inline-block;
  }

  /* ---- buttons ---- */
  .cta{
    display:inline-flex;align-items:center;gap:12px;
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    background:var(--signal);color:var(--white);
    text-decoration:none;
    padding:17px 34px;
    font-size:1.02rem;
    border:2px solid var(--signal);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    box-shadow:6px 6px 0 rgba(19,32,43,.18);
  }
  .cta:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 rgba(19,32,43,.22);}
  .cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(19,32,43,.18);}
  .cta .arw{font-family:"Space Mono",monospace;font-weight:700;}

  a:focus-visible,.cta:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}

  /* ================= TOPBAR ================= */
  .topbar{
    display:flex;justify-content:space-between;align-items:center;
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .brandmark{font-family:"Space Mono",monospace;font-weight:700;letter-spacing:.04em;font-size:.92rem;}
  .brandmark b{color:var(--brand);}
  .topbar nav{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.16em;color:var(--steel);text-transform:uppercase;}

  /* ================= ARTICLE HERO ================= */
  header.hero{
    position:relative;overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(120% 90% at 88% -10%, rgba(15,90,154,.10), transparent 60%),
      var(--paper);
  }
  .breadcrumb{
    font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.1em;
    color:var(--steel);text-transform:uppercase;margin:30px 0 0;
  }
  .breadcrumb a{color:var(--steel);text-decoration:none;}
  .breadcrumb a:hover{color:var(--brand);}
  .art-head{max-width:820px;padding:26px 0 20px;}
  .art-head .kicker{margin-bottom:22px;}
  .art-head h1{
    font-size:clamp(1.7rem,4.4vw,2.5rem);
    letter-spacing:.005em;margin:0;
  }
  .art-head h1 .hl{color:var(--brand);position:relative;}
  .art-head h1 .hl::after{
    content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.18em;
    background:rgba(216,100,30,.22);z-index:-1;
  }
  .art-deck{
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    font-size:1.1rem;color:var(--ink-soft);margin-top:20px;line-height:1.6;
  }
  .art-meta{
    display:flex;gap:10px;flex-wrap:wrap;align-items:center;
    margin-top:26px;padding-bottom:34px;
  }
  .meta-tag{
    font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em;
    color:var(--brand-deep);background:var(--brand-tint);
    border:1px solid #BBD4EE;padding:6px 12px;text-transform:uppercase;
  }
  .meta-tag.plain{background:transparent;border-color:var(--line-strong);color:var(--steel);}

  /* ---- featured growth figure ---- */
  .figure-growth{
    background:var(--paper-2);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    padding:26px 26px 18px;
    margin:0 0 -46px;position:relative;z-index:2;
  }
  .growth-head{
    display:flex;justify-content:space-between;align-items:baseline;
    font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.1em;
    color:var(--steel);text-transform:uppercase;margin-bottom:6px;
  }
  .growth-head b{color:var(--ink);}
  .figure-growth svg{display:block;width:100%;height:auto;max-height:280px;}
  .growth-foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:12px;font-family:"Space Mono",monospace;font-size:.7rem;color:var(--steel);
  }
  .chip{display:inline-flex;align-items:center;gap:7px;color:var(--brand-deep);}
  .chip i{width:9px;height:9px;background:var(--brand);display:inline-block;font-style:normal;}

  /* ================= ARTICLE BODY ================= */
  .body-wrap{padding:84px 0 40px;}
  .art-sec{margin:0 0 8px;}
  .art-sec + .art-sec{margin-top:64px;}
  .art-sec h2{
    font-size:clamp(1.4rem,3.2vw,2rem);
    margin:14px 0 22px;line-height:1.4;
    padding-top:26px;border-top:1px solid var(--line);
  }
  .art-sec .eyebrow{margin-bottom:0;}
  .art-sec p{margin:0 0 22px;color:var(--ink);}
  .art-sec p:last-child{margin-bottom:0;}
  .art-sec strong{font-weight:700;color:var(--ink);}
  .art-sec a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px;}

  .lead{
    font-size:1.12rem;color:var(--ink-soft);
    font-family:"Noto Sans JP",sans-serif;line-height:1.95;
  }
  .lead strong{color:var(--ink);}

  /* callout box (mechanism / key statement) */
  .callout{
    background:var(--brand-tint);
    border:1px solid #BBD4EE;border-left:6px solid var(--signal);
    padding:22px 24px;margin:6px 0 30px;
    box-shadow:5px 5px 0 rgba(19,32,43,.08);
  }
  .callout p{margin:0;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    color:var(--brand-deep);font-size:1.06rem;line-height:1.7;}
  .callout p strong{color:var(--signal);}

  /* dark pull statement */
  .pull{
    background:var(--ink);color:var(--white);
    padding:34px 30px;margin:8px 0 32px;
    box-shadow:var(--shadow);
  }
  .pull p{margin:0;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;
    font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.55;color:var(--white);}
  .pull p .accent{color:#8FC0EC;}

  /* method cards (理由①) */
  .methods{list-style:none;padding:0;margin:8px 0 30px;display:grid;gap:16px;}
  .method{
    border:1px solid var(--line-strong);background:var(--paper-2);
    padding:22px 24px;position:relative;
  }
  .method .no{
    font-family:"Space Mono",monospace;font-weight:700;font-size:.78rem;
    letter-spacing:.1em;color:var(--signal);
  }
  .method .mt{
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;
    font-size:1.12rem;color:var(--ink);margin:6px 0 10px;line-height:1.5;
  }
  .method .md{color:var(--ink-soft);font-size:.98rem;line-height:1.85;margin:0;}

  /* radial growth concept (何が増えたのか) */
  .radial{
    border:1px solid var(--line-strong);background:var(--paper-2);
    box-shadow:var(--shadow);padding:30px 26px 26px;margin:8px 0 30px;
  }
  .radial-cap{
    font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.12em;
    color:var(--steel);text-transform:uppercase;text-align:center;margin-top:16px;
  }
  .radial svg{display:block;width:100%;height:auto;max-height:420px;}

  /* compare (package vs core) */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 30px;}
  .comp-card{border:1px solid var(--line);background:var(--paper-2);padding:22px 20px;}
  .comp-card .k{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;}
  .comp-card .v{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:1.06rem;margin-top:8px;line-height:1.55;}
  .comp-card.core{background:var(--ink);color:var(--white);border-color:var(--ink);}
  .comp-card.core .k{color:#9FB3BE;}
  .comp-card.core .v{color:var(--white);}
  @media(max-width:560px){.compare{grid-template-columns:1fr;}}

  /* inline CTA within body */
  .inline-cta{
    border:1px dashed var(--line-strong);background:var(--white);
    padding:20px 22px;margin:8px 0 30px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .inline-cta span{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;color:var(--ink);}
  .inline-cta a{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

  /* ---- article sub-heading (h3) ---- */
  .art-sec h3{
    font-size:1.15rem;margin:36px 0 0;color:var(--brand-deep);
    padding-left:16px;border-left:4px solid var(--brand);line-height:1.5;
  }
  .art-sec h3 + p{margin-top:14px;}

  /* ---- checklist ---- */
  .checks{list-style:none;padding:0;margin:22px 0 30px;}
  .checks li{
    position:relative;padding:14px 0 14px 36px;border-bottom:1px dashed var(--line-strong);
    color:var(--ink);
  }
  .checks li:last-child{border-bottom:none;}
  .checks li::before{
    content:"\2713";position:absolute;left:0;top:14px;
    font-family:"Space Mono",monospace;color:var(--brand);font-weight:700;
  }

  /* ---- case card（実績ボックス） ---- */
  .case{
    border:1px solid var(--line-strong);background:var(--white);box-shadow:var(--shadow);
    margin:8px 0 22px;
  }
  .case-top{
    padding:13px 22px;border-bottom:1px dashed var(--line-strong);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
    font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--steel);
  }
  .case-top b{color:var(--ink);}
  .case-body{padding:24px 22px 26px;}
  .case-name{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:1.2rem;line-height:1.5;}
  .case-flow{display:flex;align-items:center;gap:16px;margin:20px 0 4px;flex-wrap:wrap;}
  .case .metric{font-family:"Space Mono",monospace;line-height:1;}
  .case .metric .num{font-size:2.2rem;font-weight:700;color:var(--ink);}
  .case .metric .num small{font-size:1rem;}
  .case .metric .unit{font-size:.76rem;color:var(--steel);letter-spacing:.06em;display:block;margin-top:8px;}
  .case .metric.big .num{color:var(--brand);}
  .case .flow-arrow{font-family:"Space Mono",monospace;color:var(--signal);font-weight:700;font-size:1.3rem;}
  .case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
  .case .tag{
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.8rem;
    background:var(--brand-tint);color:var(--brand-deep);padding:5px 12px;border:1px solid #BBD4EE;
  }
  .case .tag.warn{background:#FBE9DC;color:#9A4413;border-color:#EFCBAE;}
  .case-note{margin:16px 0 0;font-size:.95rem;color:var(--ink-soft);}

  /* ---- comparison table（比較表） ---- */
  .cmp{width:100%;border-collapse:collapse;margin:8px 0 30px;background:var(--white);box-shadow:var(--shadow);font-size:.95rem;}
  .cmp th,.cmp td{border:1px solid var(--line-strong);padding:14px 16px;text-align:left;vertical-align:top;line-height:1.8;}
  .cmp thead th{
    background:var(--ink);color:var(--white);
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.92rem;
  }
  .cmp tbody th{
    background:var(--paper-2);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    white-space:nowrap;width:9em;
  }
  .cmp .good{color:var(--brand-deep);font-weight:700;}
  .cmp .warn{color:#9A4413;}

  /* ---- rework spiral（負の連鎖フロー図） ---- */
  .spiral{border:1px solid var(--line-strong);background:var(--white);box-shadow:var(--shadow);padding:26px 24px;margin:8px 0 22px;}
  .spiral .k{
    font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.18em;color:var(--steel);
    text-transform:uppercase;display:block;margin-bottom:16px;
  }
  .spiral-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  .sp-step{
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.9rem;
    border:1.5px solid var(--ink);background:var(--paper-2);padding:10px 14px;line-height:1.5;
  }
  .sp-step.bad{border-color:var(--signal);background:#FBE9DC;color:#9A4413;}
  .sp-arrow{font-family:"Space Mono",monospace;color:var(--signal);font-weight:700;}
  .spiral-note{margin:16px 0 0;font-size:.92rem;color:var(--ink-soft);line-height:1.9;}

  @media(max-width:560px){
    .cmp{font-size:.86rem;}
    .cmp th,.cmp td{padding:10px 10px;}
    .cmp tbody th{width:auto;white-space:normal;}
  }

  /* ---- perspectives box（3つの立場などの対比ボックス） ---- */
  .views{border:1px solid var(--line-strong);background:var(--white);box-shadow:var(--shadow);margin:8px 0 22px;}
  .views-head{
    padding:16px 24px;border-bottom:1px dashed var(--line-strong);
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:1.0rem;
  }
  .views-head .k{
    font-family:"Space Mono",monospace;font-weight:700;font-size:.64rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--brand);display:block;margin-bottom:4px;
  }
  .view-row{display:flex;gap:20px;align-items:flex-start;padding:20px 24px;}
  .view-row + .view-row{border-top:1px solid var(--line);}
  .view-who{
    flex:0 0 168px;
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.95rem;line-height:1.6;
  }
  .view-who .tag{
    display:block;font-family:"Space Mono",monospace;font-weight:700;font-size:.62rem;
    letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin-bottom:4px;
  }
  .view-what{flex:1;color:var(--ink-soft);font-size:.98rem;line-height:1.85;}
  .view-what strong{color:var(--ink);}
  @media(max-width:560px){
    .view-row{flex-direction:column;gap:8px;}
    .view-who{flex:none;}
  }

  /* ---- principle cards（番号付きの行動基準カード 01-03 等） ---- */
  .principle{border:1px solid var(--line-strong);background:var(--white);box-shadow:var(--shadow);margin:16px 0 0;}
  .principle + .principle{margin-top:22px;}
  .principle-top{
    padding:14px 24px;border-bottom:1px dashed var(--line-strong);
    display:flex;justify-content:space-between;align-items:center;
    font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--steel);
  }
  .principle-top b{color:var(--ink);}
  .principle-body{padding:26px 24px 28px;}
  /* .art-sec h2 の上罫線・余白を打ち消し、カード見出しとして扱う */
  .principle-body h2{font-size:clamp(1.35rem,2.8vw,1.7rem);margin:0;padding:0;border:none;}
  .principle-body h2 .p-num{
    font-family:"Space Mono",monospace;color:var(--brand);font-size:.8em;margin-right:10px;
  }
  .principle-body .body{margin-top:18px;}
  .principle-body .body p{margin:0 0 1.3em;color:var(--ink-soft);font-size:1.0rem;}
  .principle-body .body p:last-child{margin-bottom:0;}
  .principle-body .body strong{color:var(--ink);}
  .p-start{
    margin-top:20px;border-left:3px solid var(--brand);background:var(--brand-tint);padding:14px 18px;
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.95rem;
    color:var(--brand-deep);line-height:1.8;
  }
  .p-start .k{
    display:block;font-family:"Space Mono",monospace;font-weight:700;font-size:.62rem;
    letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin-bottom:4px;
  }

  /* ---- inline metric strip（実績の数値表現） ---- */
  .metric-strip{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    margin:24px 0 4px;border:1px solid var(--line);background:var(--paper-2);padding:18px 22px;
  }
  .metric-strip .metric{font-family:"Space Mono",monospace;line-height:1;}
  .metric-strip .metric .num{font-size:2.2rem;font-weight:700;color:var(--ink);}
  .metric-strip .metric .unit{font-size:.72rem;color:var(--steel);letter-spacing:.06em;display:block;margin-top:8px;}
  .metric-strip .metric.big .num{color:var(--brand);}
  .metric-strip .flow-arrow{font-family:"Space Mono",monospace;color:var(--signal);font-weight:700;font-size:1.3rem;}
  .metric-note{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--steel);margin-left:auto;letter-spacing:.06em;}
  .metric-note b{color:var(--brand-deep);}
  @media(max-width:560px){
    .principle-body{padding:22px 18px 24px;}
    .metric-strip .metric .num{font-size:1.8rem;}
    .metric-note{margin-left:0;}
  }

  /* ---- decision flow（分岐フロー図） ---- */
  .flow{border:1px solid var(--line-strong);background:var(--paper-2);box-shadow:var(--shadow);padding:28px 24px;margin:8px 0 22px;}
  .flow-title{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;margin-bottom:18px;}
  .flow-q{border:1.5px solid var(--ink);background:var(--white);padding:16px 20px;text-align:center;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:1.05rem;}
  .flow-q .qk{display:block;font-family:"Space Mono",monospace;font-weight:700;font-size:.66rem;letter-spacing:.16em;color:var(--signal);margin-bottom:4px;}
  .flow-branch{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  .flow-arm{display:flex;flex-direction:column;align-items:center;}
  .flow-arm > .flow-q,.flow-arm > .flow-branch{width:100%;}
  .flow-vline{width:1.5px;height:22px;background:var(--line-strong);}
  .flow-label{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--steel);letter-spacing:.08em;padding:2px 0 6px;}
  .flow-ans{width:100%;border:1px solid var(--line-strong);background:var(--white);padding:14px 16px;text-align:center;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.95rem;}
  .flow-ans.goal{border:1.5px solid var(--brand);background:var(--brand-tint);color:var(--brand-deep);}
  .flow-ans.goal-alt{border:1.5px solid var(--ink);background:var(--ink);color:var(--white);}
  .flow-ans small{display:block;font-weight:400;font-size:.78rem;color:var(--steel);margin-top:4px;line-height:1.6;}
  .flow-ans.goal small{color:var(--brand-deep);}
  .flow-ans.goal-alt small{color:#B9C6CE;}

  /* ---- matrix（2軸マトリクス） ---- */
  .matrix{border:1px solid var(--line-strong);background:var(--paper-2);box-shadow:var(--shadow);padding:28px 24px;margin:8px 0 22px;}
  .matrix-grid{display:grid;grid-template-columns:auto 1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:10px;margin-top:14px;}
  .mx-axis{font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;color:var(--steel);display:flex;align-items:center;justify-content:center;text-align:center;}
  .mx-axis.vert{writing-mode:vertical-rl;text-orientation:mixed;}
  .mx-cell{border:1px solid var(--line-strong);background:var(--white);padding:16px 14px;min-height:110px;}
  .mx-cell .t{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:.98rem;}
  .mx-cell .d{font-size:.8rem;color:var(--ink-soft);margin-top:6px;line-height:1.7;}
  .mx-cell.hot{border:1.5px solid var(--brand);background:var(--brand-tint);}
  .mx-cell.hot .t{color:var(--brand-deep);}
  .mx-cell.dark{background:var(--ink);border-color:var(--ink);}
  .mx-cell.dark .t{color:var(--white);}
  .mx-cell.dark .d{color:#B9C6CE;}

  /* ---- vendor comparison table（列ごとに配色する比較表） ---- */
  .cmp-vs{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line-strong);box-shadow:var(--shadow);font-size:.92rem;margin:8px 0 22px;}
  .cmp-vs th,.cmp-vs td{border:1px solid var(--line);padding:13px 14px;text-align:left;vertical-align:top;line-height:1.7;}
  .cmp-vs thead th{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;background:var(--paper-2);}
  .cmp-vs thead th:nth-child(2){background:var(--ink);color:var(--white);}
  .cmp-vs thead th:nth-child(3){background:var(--brand-deep);color:var(--white);}
  .cmp-vs tbody th{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.84rem;background:var(--paper-2);color:var(--ink-soft);white-space:nowrap;}
  .cmp-vs td{color:var(--ink-soft);}

  /* ---- footnote（脚注） ---- */
  .art-sec .note{font-size:.86rem;color:var(--steel);margin-top:12px;}

  @media(max-width:560px){
    .flow-branch{grid-template-columns:1fr;}
    .mx-cell{min-height:0;}
    .cmp-vs{font-size:.82rem;}
    .cmp-vs th,.cmp-vs td{padding:10px 9px;}
  }

  /* ---- info box + checklist（症状・チェックリスト等の枠付きリスト） ---- */
  .box{border:1px solid var(--line-strong);background:var(--paper-2);box-shadow:var(--shadow);padding:26px 26px 22px;margin:8px 0 22px;}
  .box-title{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;margin-bottom:8px;}
  .checklist{list-style:none;padding:0;margin:0;}
  .checklist li{position:relative;padding:12px 0 12px 34px;border-bottom:1px dashed var(--line-strong);font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;font-size:.98rem;line-height:1.7;color:var(--ink);}
  .checklist li:last-child{border-bottom:none;}
  .checklist li::before{content:"\2713";position:absolute;left:0;top:12px;font-family:"Space Mono",monospace;color:var(--brand);font-weight:700;}
  .checklist.warn li::before{content:"\2212";color:var(--signal);font-size:1.2rem;top:9px;}

  /* ---- step cards（手順ステップ） ---- */
  .step{border:1px solid var(--line-strong);background:var(--white);box-shadow:var(--shadow);padding:24px 26px;margin:16px 0 0;}
  .step + .step{margin-top:16px;}
  .step .k{font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;letter-spacing:.16em;color:var(--brand);text-transform:uppercase;}
  .step .t{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:1.14rem;margin-top:6px;}
  .step p{margin-top:10px;font-size:.98rem;color:var(--ink);}

  /* ================= FINAL CTA ================= */
  .final{
    background:var(--brand-deep);color:var(--white);text-align:center;
    padding:88px 24px;margin-top:70px;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:28px 28px;
  }
  .final .eyebrow{color:#9FC9EE;justify-content:center;}
  .final .eyebrow::before{background:#9FC9EE;}
  .final h2{color:var(--white);font-size:clamp(1.7rem,4.2vw,2.7rem);margin:18px auto 0;max-width:20em;}
  .final p{color:#C7DEF5;margin:20px auto 0;max-width:34em;}
  .final .cta{margin-top:34px;box-shadow:6px 6px 0 rgba(0,0,0,.25);}

  /* ================= FOOTER ================= */
  footer.foot{
    background:var(--ink);color:#8FA0AB;padding:30px 0;
    font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;
  }
  footer.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}
  footer.foot b{color:#E9EDF0;}
  /* ---- footer copyright（法的表記：主情報より一段控えめに） ---- */
  footer.foot .foot-copy{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);justify-content:flex-start;}
  footer.foot .foot-copy small{font-size:.68rem;color:#6E808C;letter-spacing:.04em;}

  /* ================= RESPONSIVE ================= */
  @media(max-width:900px){
    .topbar nav{display:none;}
  }
  @media(max-width:520px){
    body{line-height:1.9;}
    .body-wrap{padding:64px 0 30px;}
    .art-sec + .art-sec{margin-top:48px;}
    .pull{padding:26px 22px;}
  }
  @media(prefers-reduced-motion:reduce){
    *{transition:none !important;scroll-behavior:auto !important;}
  }

  /* ================= RELATED / 相互リンク ================= */
  /* SEOのため各記事に静的直書き。見た目はこの共通スタイルで統一。 */
  .related{margin:56px 0 0;padding-top:30px;border-top:2px solid var(--ink);}
  .related > .eyebrow{margin-bottom:18px;}
  .related-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
  .related-list a{
    display:flex;align-items:baseline;gap:14px;
    border:1px solid var(--line-strong);background:var(--paper-2);
    padding:16px 18px;text-decoration:none;color:var(--ink);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .related-list a:hover{
    transform:translate(-2px,-2px);
    box-shadow:5px 5px 0 rgba(19,32,43,.10);border-color:var(--brand);
  }
  .related-list .rl-no{
    font-family:"Space Mono",monospace;font-weight:700;font-size:.72rem;
    letter-spacing:.1em;color:var(--signal);white-space:nowrap;padding-top:.15em;
  }
  .related-list .rl-ttl{
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    font-size:1.02rem;line-height:1.5;color:var(--ink);
  }
  .related-list .rl-arw{margin-left:auto;align-self:center;font-family:"Space Mono",monospace;color:var(--brand);}

  /* ---- hero intro（INTROをHERO内に置く場合：文字は本文フォント Noto Sans JP に統一） ---- */
  .hero-intro .lead,
  .hero-intro p,
  .hero-intro .callout p{font-family:"Noto Sans JP",sans-serif;}

  /* hero intro 内に置いた図は通常余白に（元の -46px 重なりを解除） */
  .hero-intro .figure-growth{margin:0 0 24px;}

  /* =============================================================
     LP (TOPページ fullscratch) 専用部品
     ※ すべて .lp（<body class="lp">）にスコープ。TOP専用で、
        コラム記事・共通スタイルには影響しない。
     ============================================================= */
  .lp .sec{padding:88px 0;border-top:1px solid var(--line);}
  .lp .sec-head{max-width:760px;}
  .lp .sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin:18px 0 0;}
  .lp .cta.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none;}
  .lp .cta.ghost:hover{border-color:var(--brand);color:var(--brand);transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(15,90,154,.16);}
  .lp .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
    padding:30px 0 78px;}
  .lp .target-tag{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:1rem;letter-spacing:.02em;
    color:var(--brand-deep);background:var(--brand-tint);
    border:1px solid #BBD4EE;border-left:6px solid var(--signal);
    padding:14px 20px;display:inline-block;line-height:1.7;
    box-shadow:5px 5px 0 rgba(19,32,43,.10);}
  .lp .hero h1{font-size:clamp(2.2rem,5.4vw,4rem);
    margin:26px 0 0;letter-spacing:.005em;}
  .lp .hero h1 .hl{color:var(--brand);
    position:relative;}
  .lp .hero h1 .hl::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.18em;
    background:rgba(216,100,30,.22);z-index:-1;}
  .lp .hero-sub{font-size:1.06rem;color:var(--ink-soft);margin-top:24px;max-width:30em;}
  .lp .hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;align-items:center;}
  .lp .hero-note{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--steel);letter-spacing:.04em;}
  .lp .growth{background:var(--paper-2);
    border:1px solid var(--line-strong);
    box-shadow:var(--shadow);
    padding:22px 22px 16px;}
  .lp .growth svg{display:block;width:100%;height:auto;}
  .lp .lede{font-size:1.06rem;color:var(--ink-soft);margin-top:22px;max-width:46em;}
  .lp .pkg-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px;}
  .lp .pkg-card{border:1px solid var(--line);background:var(--paper-2);
    padding:22px 20px;}
  .lp .pkg-card .k{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.12em;color:var(--steel);text-transform:uppercase;}
  .lp .pkg-card .v{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:1.18rem;margin-top:6px;}
  .lp .pkg-card.core{background:var(--ink);color:var(--white);border-color:var(--ink);}
  .lp .pkg-card.core .k{color:#9FB3BE;}
  .lp .pkg-card.core .v{color:var(--white);}
  .lp .pkg-card.core .vsub{color:#B9C6CE;font-size:.86rem;margin-top:8px;}
  .lp .solution{background:var(--ink);color:var(--white);border-top:none;}
  .lp .solution .eyebrow{color:#8FC0EC;}
  .lp .solution .eyebrow::before{background:#8FC0EC;}
  .lp .solution h2{color:var(--white);font-size:clamp(1.9rem,4.4vw,3rem);}
  .lp .solution .lede{color:#C6D2D9;}
  .lp .sol-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;}
  .lp .sol-pill{border:1px solid #2A4A66;padding:14px 20px;
    font-family:"Zen Kaku Gothic New";font-weight:700;
    background:#162A3E;}
  .lp .sol-pill b{color:#8FC0EC;}
  .lp .cases{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:42px;}
  .lp .case{border:1px solid var(--line-strong);background:var(--white);
    box-shadow:var(--shadow);
    display:flex;flex-direction:column;}
  .lp .case-top{padding:14px 22px;border-bottom:1px dashed var(--line-strong);
    display:flex;justify-content:space-between;align-items:center;
    font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em;color:var(--steel);}
  .lp .case-top b{color:var(--ink);}
  .lp .case-body{padding:26px 22px 24px;}
  .lp .case-name{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:1.3rem;}
  .lp .case-flow{display:flex;align-items:center;gap:14px;margin:22px 0 4px;flex-wrap:wrap;}
  .lp .metric{font-family:"Space Mono",monospace;line-height:1;}
  .lp .metric .num{font-size:2.6rem;font-weight:700;color:var(--ink);}
  .lp .metric .unit{font-size:.78rem;color:var(--steel);letter-spacing:.06em;display:block;margin-top:8px;}
  .lp .metric.big .num{color:var(--brand);}
  .lp .flow-arrow{font-family:"Space Mono",monospace;color:var(--signal);font-weight:700;font-size:1.4rem;}
  .lp .case-year{font-family:"Space Mono",monospace;font-size:.74rem;color:var(--steel);}
  .lp .case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
  .lp .tag{font-family:"Zen Kaku Gothic New";font-weight:700;font-size:.82rem;
    background:var(--brand-tint);color:var(--brand-deep);padding:6px 12px;border:1px solid #BBD4EE;}
  .lp .tag.warn{background:#FBE9DC;color:#9A4413;border-color:#EFCBAE;}
  .lp .twocol{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);}
  .lp .twocol > div{padding:88px 56px;}
  .lp .twocol > div:first-child{border-right:1px solid var(--line);}
  .lp .reasonlist{list-style:none;padding:0;margin:26px 0 0;}
  .lp .reasonlist li{position:relative;padding:18px 0 18px 38px;border-bottom:1px dashed var(--line-strong);
    font-family:"Zen Kaku Gothic New";font-weight:700;font-size:1.08rem;}
  .lp .reasonlist li:last-child{border-bottom:none;}
  .lp .reasonlist li::before{content:"✓";position:absolute;left:0;top:18px;
    font-family:"Space Mono",monospace;color:var(--brand);font-weight:700;}
  .lp .cost .reasonlist li::before{content:"−";color:var(--signal);font-size:1.3rem;top:14px;}
  .lp .col-lede{color:var(--ink-soft);margin-top:18px;}
  .lp .arch-wrap{margin-top:40px;border:1px solid var(--line-strong);background:var(--paper-2);box-shadow:var(--shadow);padding:30px;}
  .lp .arch{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;}
  .lp .arch-node{border:1.5px solid var(--ink);background:var(--white);padding:22px 20px;text-align:center;}
  .lp .arch-node .icn{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;}
  .lp .arch-node .ttl{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:1.15rem;margin-top:8px;}
  .lp .arch-node .desc{font-size:.84rem;color:var(--ink-soft);margin-top:8px;}
  .lp .arch-node.cloud{border-color:var(--brand);}
  .lp .arch-node.cloud .ttl{color:var(--brand-deep);}
  .lp .arch-link{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 8px;color:var(--steel);
    font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.1em;gap:6px;}
  .lp .arch-link .dash{font-size:1.4rem;color:var(--line-strong);}
  .lp .arch-flex{margin-top:18px;font-size:.9rem;color:var(--ink-soft);text-align:center;}
  .lp .arch-flex b{color:var(--brand-deep);}
  .lp .area-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;margin-top:36px;}
  .lp .area-cities{display:flex;gap:14px;flex-wrap:wrap;}
  .lp .city{border:1.5px solid var(--ink);padding:18px 26px;background:var(--white);
    font-family:"Zen Kaku Gothic New";font-weight:900;font-size:1.4rem;
    position:relative;}
  .lp .city span{display:block;font-family:"Space Mono",monospace;font-weight:400;font-size:.62rem;letter-spacing:.18em;color:var(--steel);margin-top:4px;}
  .lp .area-note{border-left:3px solid var(--brand);padding:8px 0 8px 20px;color:var(--ink-soft);font-size:.98rem;}
  .lp .company-block{margin-top:44px;padding-top:30px;border-top:1px solid var(--line);
    display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;}
  .lp .company-k{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;
    color:var(--steel);text-transform:uppercase;}
  .lp .company-name{font-family:"Zen Kaku Gothic New";font-weight:900;font-size:1.5rem;
    color:var(--ink);text-decoration:none;display:inline-flex;align-items:baseline;gap:8px;
    transition:color .15s ease;}
  .lp .company-name .arw{font-family:"Space Mono",monospace;font-size:.9rem;color:var(--brand);}
  .lp .company-name:hover{color:var(--brand);}
  .lp .company-name:hover .arw{transform:translate(2px,-2px);}
  .faq-intro{color:var(--ink-soft);margin-top:18px;max-width:44em;}
  .faq-list{margin-top:40px;border-top:1px solid var(--line-strong);}
  .faq-item{border-bottom:1px solid var(--line-strong);}
  .faq-item summary{list-style:none;cursor:pointer;
    display:flex;align-items:flex-start;gap:18px;
    padding:26px 8px 26px 0;
    font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    font-size:1.12rem;line-height:1.5;color:var(--ink);
    transition:color .15s ease;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary:hover{color:var(--brand);}
  .faq-item summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
  .faq-q{font-family:"Space Mono",monospace;font-weight:700;color:var(--brand);
    font-size:1.05rem;flex:0 0 auto;line-height:1.6;}
  .faq-toggle{margin-left:auto;flex:0 0 auto;
    font-family:"Space Mono",monospace;font-weight:700;font-size:1.5rem;
    color:var(--steel);line-height:1.2;transition:transform .2s ease,color .2s ease;}
  .faq-item[open] summary{color:var(--brand-deep);}
  .faq-item[open] .faq-toggle{transform:rotate(45deg);color:var(--brand);}
  .faq-a{padding:0 8px 28px 52px;color:var(--ink-soft);font-size:1.0rem;line-height:1.9;
    max-width:52em;}
  .faq-a strong{color:var(--ink);font-weight:700;}
  @media(max-width:520px){
    .faq-a{padding-left:34px;}
    .faq-item summary{gap:12px;font-size:1.02rem;}
  }
  .lp .final{background:var(--brand-deep);color:var(--white);text-align:center;
    padding:96px 24px;border-top:none;
    background-image:
      linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:28px 28px;}
  .lp .final .eyebrow{color:#9FC9EE;justify-content:center;}
  .lp .final .eyebrow::before{background:#9FC9EE;}
  .lp .final h2{color:var(--white);font-size:clamp(1.9rem,4.6vw,3.1rem);margin:18px auto 0;max-width:18em;}
  .lp .final p{color:#C7DEF5;margin:22px auto 0;max-width:34em;}
  .lp .final .cta{margin-top:36px;box-shadow:6px 6px 0 rgba(0,0,0,.25);}
  .lp .contact-card{background:var(--paper-2);
    border:1px solid var(--line-strong);
    box-shadow:10px 10px 0 rgba(0,0,0,.22);
    max-width:560px;margin:40px auto 0;
    padding:38px 36px 34px;text-align:left;}
  .lp .field{margin-bottom:20px;}
  .lp .field:last-of-type{margin-bottom:26px;}
  .lp .field label{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;
    font-size:.92rem;color:var(--ink);margin-bottom:9px;}
  .lp .field label .req{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--signal);
    margin-left:8px;letter-spacing:.04em;}
  .lp .field input, .lp .field textarea{width:100%;box-sizing:border-box;
    padding:14px 16px;
    border:1.5px solid var(--line-strong);background:var(--white);
    color:var(--ink);font-family:"Noto Sans JP",sans-serif;font-size:1rem;
    line-height:1.6;border-radius:0;transition:border-color .15s ease,box-shadow .15s ease;}
  .lp .field textarea{resize:vertical;min-height:120px;}
  .lp .field input::placeholder, .lp .field textarea::placeholder{color:#9AA8B2;}
  .lp .field input:focus, .lp .field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,90,154,.16);}
  .lp button.cta{width:100%;justify-content:center;border:none;cursor:pointer;
    font-size:1.05rem;margin-top:4px;}
  .lp .form-success{display:none;max-width:560px;margin:40px auto 0;
    background:var(--paper-2);border:1px solid var(--line-strong);
    box-shadow:10px 10px 0 rgba(0,0,0,.22);
    padding:46px 36px;text-align:center;}
  .lp .form-success .fs-mark{font-family:"Space Mono",monospace;font-weight:700;font-size:2.4rem;color:var(--brand);}
  .lp .form-success h3{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;font-size:1.4rem;
    color:var(--ink);margin:14px 0 0;}
  .lp .form-success p{color:var(--ink-soft);margin-top:14px;font-size:.98rem;}
  @media(max-width:520px){
    .lp .contact-card{padding:30px 22px 28px;}
  }
  @media(max-width:900px){
    .lp .hero-inner{grid-template-columns:1fr;gap:36px;padding-bottom:60px;}
    .lp .pkg-grid{grid-template-columns:1fr;}
    .lp .cases{grid-template-columns:1fr;}
    .lp .twocol{grid-template-columns:1fr;}
    .lp .twocol > div{padding:60px 24px;}
    .lp .twocol > div:first-child{border-right:none;border-bottom:1px solid var(--line);}
    .lp .arch{grid-template-columns:1fr;gap:14px;}
    .lp .arch-link{flex-direction:row;padding:6px 0;}
    .lp .arch-link .dash{transform:rotate(90deg);}
    .lp .area-wrap{grid-template-columns:1fr;gap:24px;}
  }
  @media(max-width:520px){
    .lp .sec{padding:62px 0;}
    .lp .city{font-size:1.2rem;padding:14px 20px;}
    .lp .metric .num{font-size:2.1rem;}
  }

  /* TOPの最終CTAは元々 margin-top なし（共通 .final の 70px を打ち消し） */
  .lp .final{margin-top:0;}

  /* ---- pull（1行強調）: コラム2「共通業務はパッケージで…」・コラム3「縛られて続く関係ではなく…」の
     1行強調文を、1024px幅でも折り返さず1行に収めるための上限フォント調整（pull-soloを付けた行のみ） ---- */
  .pull.pull-solo p{font-size:clamp(1.15rem,2.6vw,1.35rem);}