/* BUSINESS ブロック：頁を横に送る（一画面）。言葉と写真は js/biz.js。白基調・角丸12px・金は見出しと線だけ */
.bz{position:relative;background:var(--ground);color:var(--ink)}
.bz-label{font-family:var(--disp);font-weight:500;font-size:26px;line-height:1.2;letter-spacing:.2em;color:var(--gold)}
.bz-no{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:.2em;color:var(--gold)}
.bz h3{font-weight:500;letter-spacing:.06em;line-height:1.6;word-break:auto-phrase}
.bz p{font-weight:400;letter-spacing:.06em;line-height:2;text-align:justify}

/* 写真の器。PIXTA のプレビューは下端の番号帯を隠す（FV と同じ） */
.ph{position:relative;display:block;overflow:hidden;border-radius:var(--radius);background:var(--tile)}
.ph img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1))}
.ph.px img{height:107%}
/* 置き方を持つ写真（主写真）：幅・左・上を枠の幅に対する％で決める。顔を中央に、頭を切らない */
.ph{container-type:inline-size}
.ph.fit img,.ph.px.fit img{height:auto;object-fit:fill;transform:none;max-width:none}

/* READ MORE（GC2 だけ）：MESSAGE の導線と同じ、左から右へ流れる金の線 */
.bz-more{position:relative;display:block;width:200px;height:34px;margin-top:22px}
.bz-more .ln2{position:absolute;left:0;right:0;top:6px;height:1px;overflow:hidden}
.bz-more .ln2::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.3),rgba(201,162,74,.22) 60%,rgba(172,135,0,0))}
.bz-more .ln2::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(172,135,0,.95) 0 50%,rgba(172,135,0,0) 50% 100%);background-size:200% 100%;background-position:100% 0;animation:flow 2.8s var(--ease-io) 1.2s infinite}
.bz-more span{position:absolute;right:0;top:15px;font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.26em;color:var(--gold)}
.bz-more:hover .ln2{transform:scaleX(1.1);transform-origin:left;transition:transform .9s var(--ease)}

/* ————— s 頁を横に送る ————— */
.bz-s{height:100vh;height:100svh;min-height:620px;display:flex;flex-direction:column;padding:calc(var(--header-h) + 6px) var(--side) 44px;overflow:hidden;overscroll-behavior-x:contain}   /* 目次の下に余白を残す（2026-10-05 本人） */
.bz-s .bz-label{margin-bottom:14px}
.bz-stage{flex:1;min-height:0;overflow:hidden;margin:0 calc(var(--side)*-1);padding:0 var(--side);container-type:size}
.bz-track{height:100%;display:flex;gap:var(--side);transform:translateX(calc(var(--i,0)*(-100% - var(--side))));transition:transform 1.15s var(--ease-io)}
.bz-sl{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:minmax(0,54fr) minmax(0,46fr);min-height:0}   /* minmax(0,…)：言葉の列が最小幅を主張して写真の列を狭めないように */
/* 写真の組は縦横比を固定（PC 9:8）。画面の高さ・幅が変わっても組み方は変えず、縮尺だけ変える（2026-10-06 本人「見え方はスマホとPCの2種類で安定させる」）。
   幅は、列の幅と「舞台の高さ×9/8」の小さい方 */
.bz-s .bz-photos{position:relative;aspect-ratio:9/8;width:min(100%,calc(100cqh * 9 / 8));align-self:center;justify-self:start}
.bz-s .main{position:absolute;inset:0 7% 9% 0}
.bz-s .sub{position:absolute;right:0;bottom:0;width:38%;aspect-ratio:3/2;box-shadow:0 0 0 8px #fff,0 30px 60px -30px rgba(0,0,0,.25)}
.bz-s .sub2{position:absolute;right:calc(38% + 20px);bottom:0;width:27%;aspect-ratio:3/2;box-shadow:0 0 0 8px #fff}
.bz-s .bz-body{align-self:center;padding:0 clamp(28px,5vw,84px)}
.bz-s .bz-body>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.bz-s.in .cur .bz-body>*{opacity:1;transform:none;transition:opacity 1s ease .35s,transform 1.2s var(--ease) .35s}
.bz-s.in .cur .bz-body>:nth-child(2){transition-delay:.47s}.bz-s.in .cur .bz-body>:nth-child(3){transition-delay:.59s}.bz-s.in .cur .bz-body>:nth-child(4){transition-delay:.71s}
.bz-s .bz-no{display:block;font-size:17px}
.bz-s .bz-no i{font-style:normal;color:rgba(22,22,22,.35)}
.bz-s h3{font-size:clamp(19px,1.75vw,26px);margin:12px 0 20px}
.bz-s p{font-size:clamp(13.5px,1vw,15.5px);line-height:2.1}
.bz-s .bz-more{width:240px;margin:26px 0 0 auto}   /* 右寄せ（2026-10-05 本人） */
/* 目次：四つの事業（写真・番号・名前）。いまの事業に金の線 */
.bz-nav{flex:0 0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.bz-nav button{position:relative;display:flex;align-items:center;gap:12px;padding:12px 0 0;text-align:left;color:var(--ink);opacity:.62;transition:opacity .6s ease}
.bz-nav button:hover,.bz-nav button[aria-current]{opacity:1}
.bz-nav button::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#E4E4E0}
.bz-nav button::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(172,135,0,.95),rgba(201,162,74,.75));transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease)}
.bz-nav button[aria-current]::after{transform:none}
.bz-nav .thumb{flex:0 0 66px;height:46px;border-radius:8px}
.bz-nav .t{min-width:0;display:block}
.bz-nav b{display:block;font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.2em;color:var(--gold)}
.bz-nav em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-style:normal;font-size:11.5px;line-height:1.5;letter-spacing:.04em}

/* 見え方は2種類だけ：横長の画面は「写真と言葉を横に並べる」、縦長の画面（スマホ・タブレット縦・細い窓）は「写真の上に言葉を積む」。
   幅だけで切り替えると、タブレット縦や細い窓で写真の列が細長くなり、組み方が崩れるため（2026-10-06 本人） */
@media (max-width:767px), (max-aspect-ratio:1/1){
  .bz-label{font-size:24px}
  .bz p{text-align:left}
  /* s：写真が上、言葉が下、いちばん下に目次（写真と番号） */
  .bz-s{height:auto;min-height:calc(100svh + var(--bz-extra,0px));padding:calc(var(--header-h) + 2px) var(--side) calc(64px + env(safe-area-inset-bottom,0px))}   /* 試作_v2：右下の送りの案内（NEWS）と目次が重ならない余白。--bz-extra：言葉が収まらない時だけ js/biz.js が足す */
  .bz-s .bz-label{margin-bottom:8px}
  .bz-sl{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start}
  /* スマホは 4:3。写真の高さは「舞台の高さ − いちばん長い言葉の高さ」（js/biz.js の fit が --bz-ph に入れる。入る前は 34svh）。言葉を隠さず、画面の高さで変わるのは縮尺だけ（2026-10-08） */
  .bz-s .bz-photos{aspect-ratio:4/3;width:min(100%,calc(var(--bz-ph,34svh) * 4 / 3));justify-self:center}
  .bz-s .main{inset:0 0 13% 0}
  .bz-s .sub{width:35%;box-shadow:0 0 0 5px #fff}
  .bz-s .sub2{right:calc(35% + 10px);width:29%;box-shadow:0 0 0 5px #fff}
  .bz-s .bz-body{align-self:start;padding:14px 0 0}
  .bz-s .bz-no{font-size:15px}
  .bz-s h3{font-size:16.5px;margin:6px 0 10px}
  .bz-s p{font-size:13px;line-height:1.9}
  .bz-s .bz-more{width:200px;margin:14px 0 0 auto}
  .bz-nav{gap:8px;margin-top:14px}
  .bz-nav button{flex-direction:column;align-items:stretch;gap:6px;padding-top:8px}
  .bz-nav .thumb{flex:0 0 auto;height:42px;width:100%;order:2}
  .bz-nav em{display:none}
  .bz-nav b{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.bz *{transition:none!important;animation:none!important}.bz-s .bz-body>*{opacity:1!important;transform:none!important}}
/* JS を動かさないクローラー・環境向けの静的な本文（tools/static_seo.mjs が #biz-root に書く）。JS が動く時（html.js）は隠し、js/biz.js の見せ方に替わる */
.js .static-seo{display:none}
.static-seo{padding:calc(var(--header-h) + 24px) var(--side) 48px;max-width:800px;margin:0 auto}
.static-seo article+article{margin-top:28px}
.static-seo h3{font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.7}
.static-seo h3 b{font-family:var(--disp);font-weight:500;letter-spacing:.2em;color:var(--gold);margin-right:.6em}
.static-seo p{font-size:14px;line-height:2;letter-spacing:.06em;margin-top:8px}
.static-seo a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em}