/* ============================================================
   HP 図解セット (D1-D8) — 公開ページ (LP / features / usecases) 共有
   正本(仕様・コピー): 30_マーケティング/hp_diagram_spec_2026-08.md
   規約: 色は palette.css トークンのみ (lint: test_no_hardcoded_colors)
         角丸はトークンのみ (lint: test_no_hardcoded_radius)
         文章レベルの文字サイズは lp.css の --lp-card-body を参照
         (= 公開4ページのサイズ正本 / 図中の短いラベル・数値だけ個別指定)
         テラコッタ --brand2 は CTA 専用 = 図解には使わない
         損益はアプリと同じ意味論 (プラス=青 --pnl-pos / マイナス=赤 --pnl-neg)
   ============================================================ */

/* ── 共通 ── */
.dg{ margin:26px auto 0; max-width:860px; }
.dg-cap{ font-size:var(--lp-card-body); color:var(--text2); margin-top:12px; text-align:center; }
.dg-cap b{ color:var(--text); }
.dg-note{ font-size:11.5px; color:var(--text3); margin-top:4px; text-align:center; }

/* ── D1 業務フロー対比「どこが軽くなるか」 ── */
.dg1{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.dg1 .col{ background:var(--text-inverse); border:1px solid var(--border); border-radius:var(--radius-xl); padding:13px 13px 15px; }
.dg1 .stp{ font-size:12px; font-weight:800; letter-spacing:1px; color:var(--accent); margin-bottom:8px; text-align:center; }
.dg1 .was{ font-size:11.5px; color:var(--text3); padding:7px 9px; background:var(--surface2); border-radius:var(--radius-md); line-height:1.5; }
.dg1 .was::before{ content:"これまで"; display:block; font-size:9.5px; font-weight:700; letter-spacing:.5px; margin-bottom:2px; color:var(--text3); }
.dg1 .dwn{ text-align:center; color:var(--accent-lift2); font-size:12px; font-weight:800; line-height:1; margin:5px 0; }
.dg1 .now{ font-size:var(--lp-card-body); font-weight:700; color:var(--accent); padding:8px 9px; background:var(--mint-soft); border:1px solid var(--mint); border-radius:var(--radius-md); line-height:1.5; }
.dg1 .now::before{ content:"Stockliftだと"; display:block; font-size:9.5px; font-weight:800; letter-spacing:.5px; margin-bottom:2px; color:var(--accent-lift2); }
.dg1 .now .s{ display:block; font-size:10.5px; font-weight:500; color:var(--text2); margin-top:2px; }
@media (max-width:760px){ .dg1{ grid-template-columns:1fr; } }

/* ── D2 真の利益ウォーターフォール ── */
.dg2 .bars{ display:flex; align-items:stretch; gap:8px; height:200px; max-width:560px; margin:0 auto; }
.dg2 .b{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; }
.dg2 .amt{ font-size:11px; font-weight:700; text-align:center; color:var(--text2); margin-bottom:3px; white-space:nowrap; }
.dg2 .b.minus .amt{ color:var(--pnl-neg); }
.dg2 .b.net .amt{ color:var(--pnl-pos); font-weight:800; }
.dg2 .seg{ border-radius:var(--radius) var(--radius) 0 0; }
.dg2 .b.gross .seg{ background:var(--chart-seq-4); border:1px solid var(--mint); }
.dg2 .b.minus .seg{ background:var(--surface2); border:1px dashed var(--text3); }
.dg2 .b.net .seg{ background:var(--pnl-pos); border-radius:var(--radius); }
.dg2 .sp{ flex:none; }
.dg2 .names{ display:flex; gap:8px; max-width:560px; margin:8px auto 0; }
.dg2 .names span{ flex:1; text-align:center; font-size:11.5px; font-weight:700; color:var(--text2); min-width:0; }
.dg2 .names span.net{ color:var(--pnl-pos); font-weight:800; }

/* ── D3 簿価 vs 時価 (在庫=値動きする資産) ── */
.dg3{ background:var(--text-inverse); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-xl);
      padding:20px 22px 16px; max-width:640px; margin:0 auto 34px; }
.dg3 .row{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.dg3 .row:first-child{ margin-top:0; }
.dg3 .lbl{ width:118px; flex:none; font-size:12px; font-weight:700; color:var(--text2); text-align:right; line-height:1.4; }
.dg3 .lbl .s{ display:block; font-size:10px; font-weight:500; color:var(--text3); }
.dg3 .trk{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.dg3 .bar{ height:26px; border-radius:var(--radius); flex:none; }
.dg3 .bar.bk{ width:66%; background:var(--surface2); border:1px solid var(--border); }
.dg3 .bar.mk{ width:86%; background:var(--accent); }
.dg3 .val{ font-size:12.5px; font-weight:800; white-space:nowrap; }
.dg3 .gain{ text-align:center; margin-top:14px; }
.dg3 .gain .badge{ display:inline-block; background:var(--pnl-pos-bg); color:var(--pnl-pos); font-weight:800; font-size:13px;
                   border-radius:var(--radius-pill); padding:5px 16px; }
.dg3 .dg-cap, .dg3 .dg-note{ text-align:center; }
@media (max-width:520px){ .dg3 .lbl{ width:74px; font-size:11px; } .dg3 .bar.bk{ width:56%; } .dg3 .bar.mk{ width:74%; } }

/* ── D4 業務フロー別 機能マップ (features の目次を兼ねる路線図) ── */
.dg4{ margin:30px auto 0; max-width:980px; }
.dg4 .line{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; position:relative; }
.dg4 .line::before{ content:""; position:absolute; top:7px; left:10%; right:10%; height:2px; background:var(--mint); }
.dg4 .stn{ position:relative; }
.dg4 .dot{ width:16px; height:16px; border-radius:var(--radius-circle); background:var(--accent);
           border:3px solid var(--mint-soft); margin:0 auto; position:relative; z-index:1; }
.dg4 .nm{ display:block; text-align:center; font-weight:800; font-size:13px; margin-top:7px; color:var(--text);
          text-decoration:none; }
.dg4 .nm:hover{ color:var(--accent); }
.dg4 .fx{ margin-top:9px; display:flex; flex-direction:column; gap:5px; }
.dg4 .fx a{ font-size:11.5px; font-weight:600; color:var(--text2); background:var(--text-inverse); border:1px solid var(--border);
            border-radius:var(--radius-pill); padding:4px 8px; text-align:center; text-decoration:none; }
.dg4 .fx a:hover{ color:var(--accent); border-color:var(--mint); background:var(--mint-soft); }
.dg4 .more{ text-align:center; margin-top:16px; font-size:12px; color:var(--text2); }
.dg4 .more a{ color:var(--text2); font-weight:700; text-decoration:none; border-bottom:1px solid var(--mint); }
.dg4 .more a:hover{ color:var(--accent); }
@media (max-width:760px){
  .dg4 .line{ grid-template-columns:1fr; gap:16px; }
  .dg4 .line::before{ left:7px; top:8px; bottom:8px; right:auto; width:2px; height:auto; }
  .dg4 .stn{ padding-left:26px; }
  .dg4 .dot{ position:absolute; left:0; top:2px; margin:0; }
  .dg4 .nm{ text-align:left; margin-top:0; }
  .dg4 .fx{ flex-direction:row; flex-wrap:wrap; }
}

/* ── D5 freee 連携の責任分界 ── */
.dg5{ display:flex; align-items:stretch; gap:10px; max-width:840px; margin:26px auto 0; }
.dg5 .zone{ border-radius:var(--radius-xl); padding:26px 12px 12px; position:relative; display:flex; align-items:center; gap:6px; }
.dg5 .zone .zl{ position:absolute; top:7px; left:14px; font-size:10px; font-weight:800; letter-spacing:1px; }
.dg5 .zone.auto{ flex:3; background:var(--mint-soft); border:1px solid var(--mint); }
.dg5 .zone.auto .zl{ color:var(--accent); }
.dg5 .zone.human{ flex:1; background:var(--surface2); border:1px solid var(--border); }
.dg5 .zone.human .zl{ color:var(--text3); }
.dg5 .nd{ flex:1; background:var(--text-inverse); border:1px solid var(--border); border-radius:var(--radius-lg);
          padding:9px 8px; font-size:12px; font-weight:700; text-align:center; line-height:1.4; min-width:0; }
.dg5 .nd .s{ display:block; font-size:10px; font-weight:500; color:var(--text3); margin-top:1px; }
.dg5 .ar{ flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--accent);
          font-weight:800; font-size:15px; line-height:1.1; }
.dg5 .ar .t{ font-size:9px; letter-spacing:1px; }
.dg5 .btw{ display:flex; align-items:center; color:var(--accent); font-weight:800; font-size:15px; }
@media (max-width:760px){
  .dg5{ flex-direction:column; }
  .dg5 .zone{ flex-direction:column; align-items:stretch; }
  .dg5 .btw{ justify-content:center; transform:rotate(90deg); }
  /* ラベル (自動/自動送信) は水平のまま、矢印グリフだけ下向きに */
  .dg5 .ar{ flex-direction:row; gap:6px; padding:4px 0; }
  .dg5 .ar > span:last-child{ transform:rotate(90deg); }
}

/* ── D6 AI の役割分界 (AIは下書き、決めるのは自分) ── */
.dg6{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:stretch; max-width:820px; margin:26px auto 0; }
.dg6 .side{ border-radius:var(--radius-xl); padding:16px 18px; }
.dg6 .side.ai{ background:var(--mint-soft); border:1px solid var(--mint); }
.dg6 .side.me{ background:var(--text-inverse); border:2px solid var(--accent); }
.dg6 .hd{ font-size:12px; font-weight:800; letter-spacing:1px; margin-bottom:9px; color:var(--accent); }
.dg6 ul{ margin:0; padding:0; list-style:none; font-size:var(--lp-card-body); color:var(--text2); display:flex; flex-direction:column; gap:7px; }
.dg6 .side.ai li::before{ content:"✎ "; color:var(--accent-lift2); font-weight:800; }
.dg6 .side.me li::before{ content:"✓ "; color:var(--accent); font-weight:800; }
.dg6 .side.me li{ font-weight:700; color:var(--text); }
.dg6 .mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
           color:var(--accent); font-weight:800; max-width:130px; text-align:center; }
.dg6 .mid .aro{ font-size:20px; line-height:1; }
.dg6 .mid .tx{ font-size:11.5px; line-height:1.5; }
@media (max-width:640px){
  .dg6{ grid-template-columns:1fr; }
  .dg6 .mid{ max-width:none; }
  .dg6 .mid .aro{ transform:rotate(90deg); }
}

/* ── D7 個人運用の 1 日タイムライン (usecases の .day を接続レール化)
      カードの隙間にだけレール線が見える = 接続の表現 (カード背景は不透明) ── */
.day.dg7{ position:relative; }
.day.dg7::before{ content:""; position:absolute; top:31px; left:30px; right:30px; height:2px; background:var(--mint); }
.day.dg7 .st{ position:relative; z-index:1; }
@media (max-width:760px){
  .day.dg7::before{ left:31px; top:40px; bottom:40px; right:auto; width:2px; height:auto; }
}

/* ── D8 チーム運用の役割図 ── */
.dg8{ display:grid; grid-template-columns:1fr auto 1.2fr auto 1fr; align-items:center; gap:10px; max-width:820px; margin:0 auto; }
.dg8 .who{ background:var(--text-inverse); border:1px solid var(--border); border-radius:var(--radius-xl);
           padding:14px 12px; text-align:center; }
.dg8 .who .t{ font-size:13.5px; font-weight:800; }
.dg8 .who .s{ font-size:11px; color:var(--text2); margin-top:3px; line-height:1.5; }
.dg8 .data{ background:var(--accent); color:var(--text-inverse); border-radius:var(--radius-xl);
            padding:18px 14px; text-align:center; }
.dg8 .data .t{ font-size:13.5px; font-weight:800; }
.dg8 .data .s{ font-size:11px; opacity:.85; margin-top:3px; line-height:1.5; }
.dg8 .ar{ text-align:center; color:var(--accent); font-weight:800; font-size:18px; }
.dg8 .ar::before{ content:"→"; }
.dg8 .ar.r::before{ content:"←"; }
@media (max-width:640px){
  .dg8{ grid-template-columns:1fr; gap:8px; }
  .dg8 .ar::before{ content:"↓"; }
  .dg8 .ar.r::before{ content:"↑"; }
}