/* コスト低減の提案例：棒材の端面の帯 → 物差しに当てた台帳。色は g1〜g8 だけ・赤は足さない・影なし・角丸なし */
#cost .lead{margin-top:-24px;margin-bottom:clamp(36px,5vw,56px);}

/* 帯写真：端面（写真の下端）が主役。説明文を載せないので下の暗いぼかしは切る */
.band-biz img{object-position:50% 100%;}
.band-biz::after{display:none;}

/* 凡例の行：左＝注記（既存の文）、右＝線の見本 */
.cd-key{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 48px;}
.cd-key .note{flex:1 1 auto;max-width:none;margin:0;}
.cd-legend{flex:none;display:flex;gap:24px;font-size:13px;line-height:1.7;color:var(--note);white-space:nowrap;}
.cd-legend span{display:inline-flex;align-items:center;gap:8px;}
.cd-legend i{display:block;width:44px;height:4px;background:var(--g8);}
/* 評価中＝細い二点鎖線（長24・空4・短4・空4・短4・空4＝44px周期）。棒は右端4pxを必ず実部にする（終点が目盛りの位置に見えるように）。
   凡例の見本（44px＝ちょうど1周期）には右端の実部を重ねない＝重ねると最後の短線とつながって「長・短・中」に見える（拡大して確認） */
.cd-legend i.ph,.cd-ledger .gauge.ph .bar{height:2px;--chain:repeating-linear-gradient(90deg,var(--g8) 0 24px,transparent 24px 28px,var(--g8) 28px 32px,transparent 32px 36px,var(--g8) 36px 40px,transparent 40px 44px);background:var(--chain);}
.cd-ledger .gauge.ph .bar{background:linear-gradient(var(--g8),var(--g8)) 100% 0/4px 100% no-repeat,var(--chain);}

/* 目盛りの見出し行 */
.cd-axis{position:relative;height:40px;margin:24px 0 0 136px;font-family:var(--ff-en);font-weight:500;font-size:13px;letter-spacing:.04em;line-height:1;color:var(--note);font-variant-numeric:tabular-nums;}
.cd-axis span{position:absolute;bottom:8px;}
.cd-axis span:nth-child(1){left:0;}
.cd-axis span:nth-child(2){left:50%;transform:translateX(-50%);}
.cd-axis span:nth-child(3){right:0;}

/* 台帳の行：1列目を固定幅にして、説明文の左端を4行そろえる（2026-10-29 先方回答 6-2 で評価中の1行を外し5→4） */
.cd.cd-ledger{margin-top:0;}
.cd.cd-ledger li{grid-template-columns:136px minmax(0,1fr) auto;grid-template-areas:"pct txt who" ". gauge gauge";gap:16px 0;align-items:baseline;padding:28px 0;}
.cd.cd-ledger .pct{grid-area:pct;font-size:48px;line-height:1;}
.cd.cd-ledger .pct small{font-size:20px;margin-left:8px;}
/* 折り返しは文節で。本命＝business.js が文節の切れ目に <wbr> を差して .is-phrased を付ける → keep-all（Safari でも Chrome でも同じ折れ方）。
   word-break:auto-phrase は Chrome 系だけの機能（Safari は未対応）＝JS が切れている時の控え。どちらも効かない環境では既定の折り返しに戻るだけ。
   実測：何も無いとスマホ390で「デジカ／メ部品」「設計で2／輪車部品」、360で「デ／ジカメ」「自動車部／品」、761〜800で「音響部品／のお客様に」
   overflow-wrap:anywhere＝1文節が行幅より長くなる狭い幅でも横にはみ出さないための保険 */
.cd.cd-ledger p{grid-area:txt;font-size:20px;line-height:1.6;color:var(--ink);font-feature-settings:"palt";text-wrap:balance;word-break:auto-phrase;}
.cd.cd-ledger p.is-phrased{word-break:keep-all;overflow-wrap:anywhere;}
/* 全角の％を含む文節（25％CDを 等・最長7字）は割らない＝Safari は keep-all でも％の直後で折る（実測「40％／CD提案」） */
.cd.cd-ledger p .nb{white-space:nowrap;}
.cd.cd-ledger .who{grid-area:who;padding-left:24px;text-align:right;}

/* 物差し：背景12枚＝基線1本＋目盛り11本（0・50・100 は 8px/g6、ほかは 4px/g5）。要素は足さない */
.cd-ledger .gauge{grid-area:gauge;position:relative;display:block;height:16px;align-self:start;background-repeat:no-repeat;
  background-image:linear-gradient(var(--g5),var(--g5)),
   linear-gradient(var(--g6),var(--g6)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),
   linear-gradient(var(--g6),var(--g6)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),linear-gradient(var(--g5),var(--g5)),
   linear-gradient(var(--g6),var(--g6));
  background-size:100% 1px, 1px 8px,1px 4px,1px 4px,1px 4px,1px 4px, 1px 8px,1px 4px,1px 4px,1px 4px,1px 4px, 1px 8px;
  background-position:0 4px, 0% 5px,10% 5px,20% 5px,30% 5px,40% 5px, 50% 5px,60% 5px,70% 5px,80% 5px,90% 5px, 100% 5px;}
/* 棒：左から右へ、どの棒も同じ速さ（1％あたり10ms）で引かれる。遅れ --d は共通CSSの .cd li:nth-child(n) の値をそのまま使う */
.cd-ledger .gauge .bar{position:absolute;left:0;top:0;height:4px;width:calc(var(--v) * 1%);background:var(--g8);clip-path:inset(0);transition:clip-path calc(var(--v) * 10ms) linear var(--d,0s);}
.cd-ledger .gauge.ph .bar{top:2px;}
.js:not(.qa):not(.still) .cd.rv-expose:not(.is-in) .gauge .bar{clip-path:inset(0 100% 0 0);transition:none;}

@media (max-width:1099px){.cd.cd-ledger p{font-size:16px;line-height:1.7;}}
@media (max-width:760px){
  .band-biz img{object-position:46% 100%;}
  .cd-key{flex-direction:column;align-items:flex-start;gap:12px;}
  .cd-axis{margin:16px 0 0;height:32px;}
  .cd.cd-ledger li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pct who" "txt txt" "gauge gauge";gap:8px 16px;padding:24px 0;}
  .cd.cd-ledger p{text-wrap:pretty;}
  .cd-ledger .gauge{margin-top:8px;}
}

/* ---- のっぺり対策（2026-09-21・あきと指摘）：色は足さない。A案の3つの床（g1/g2/g3）の切り替え・表頭の面・台帳の縞だけ（共通＝site.css「面の段」） ---- */
#cost .page-body.floor{margin-top:0;padding-top:var(--gap);}

/* ---- 画像と動きの底上げ（2026-10-02）。共通部品（[data-tilt]・[data-depth]・video[data-auto]・figure[data-ai]）は site.css。ここは置き場所だけ ----
   business-01：頭の帯（材料の棒材の実写）＝[data-depth] だけ・下端基準（--oy:1 は HTML）。生成の動画は不採用（光でなく無い棒が現れた）。
     最初の画面なので起き上がりは付けない。札・説明も付けない（生成を使っていない）。
   business-02 → B1（2026-10-29）：相談の行の横の「材料の棒材（2026年撮影）」＝10/27本社撮影 DSC08230 の静止写真（M1・4:3）。生成AIのポスター＋ループ動画・札・説明は外した（data-tilt は残す）。
     PC は 7fr｜5fr・上揃え（相談の行は今と同じ位置＝台帳のすぐ後。下揃えだと台帳と相談の行の間に約400pxの空きが出た）。
     台帳の直下には置かない（特定の事例の結果に見えるのを避ける）。860px以下は相談の行の後ろに1段（相談の行を押し下げない）。 */
.cd-end{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(36px,5vw,56px);}
.cd-end .sec-cta{margin-top:0;}
.cd-surface{margin:0;}
.cd-surface .sx-frame{--ar:4/3;background:transparent;}   /* シャッターが開く前に枠の地（g1）を見せない */
.cd-surface figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--note);}
@media (max-width:860px){
  .cd-end{grid-template-columns:minmax(0,1fr);gap:0;align-items:start;}
  .cd-surface{margin-top:48px;max-width:560px;}
}
@media (max-width:760px){.cd-surface{margin-top:40px;}}
/* 2026-10-29：生成AI用の .ai-note／video の組み（説明の折り返し・JS無効時の video 非表示）は B1 の差し替えで不要になったので外した */

/* ==== 2026-11-06 70周年型（旧 business-show.css を移した） ==== */
/* コスト低減の見本だけの見た目（共通は src/show.css） */
.biz-hero .show-l1 { font-size: clamp(26px, 3.4vw, 52px); }
.biz-hero .show-l3 { font-size: clamp(34px, 6.2vw, 96px); line-height: 1.15; margin-top: .08em; }
.biz-hero .show-note > span { max-width: 42em; }
.biz-sec { background: var(--g1); }
.biz-end { background: var(--g1); padding-top: clamp(24px, 4vw, 48px); }
.biz-end .cd-end { display: block; margin-top: clamp(20px, 3vw, 32px); }
@media (max-width: 560px) { .biz-hero .show-l3 { font-size: clamp(30px, 9vw, 40px); } }
.biz-sec .show-kind .u, .biz-hero .u { display: inline-block; }
.biz-sec .show-kind { text-wrap: balance; }