/* ============================================================
   デザイン契約: docs/DESIGN.md
   発注主の確定デザイン案（2026/8/17版）の完コピを目的とする。
   3Dオブジェクトと写真は Gemini で生成した実素材（images/）。
   レイアウト・タイポ・配色・インタラクションはCSSで実装。
   外部ライブラリ不使用。
   ============================================================ */
:root{
  --bg:#f1f2f6;
  --card:#ffffff;
  --ink:#14151a;
  --ink2:#5c6070;
  --ink3:#8c91a0;
  --black:#16171c;
  --red:#e4002b;
  --red-l:#ff3355;
  --line:rgba(20,21,26,.09);
  --shadow-s:0 1px 2px rgba(20,21,26,.05), 0 8px 24px rgba(20,21,26,.055);
  --shadow-m:0 2px 4px rgba(20,21,26,.07), 0 22px 50px rgba(20,21,26,.10);
  --r:20px;
  --maxw:1280px;
  /* 区画幅（2026-09-17）：FV のタイトル左端にそろえた幅。ただし従来の 1280px より狭くはしない。
     1366→1280（従来どおり）／1536→1304／1920→1570／2560→1536。
     100% は使う側の親で解く。ヘッダー・フッター・本文・下層ヒーローが同じ親（全幅）なので同じ値になる */
  --gut:clamp(20px,7.5vw,160px);   /* ★2026-09-21 両脇の余白＝画面幅の 7.5%（1280 で 96px・1366 で 102px・1920 で 144px）。SP は下で 20px */
  --wide:min(100% - 2 * var(--gut),var(--maxw));   /* ★2026-09-21 先方「左右の余白」：1280 で本文 1088・1366 で 1161・1536 以上で 1280（--maxw）。参考 2 社＝本文 1050〜1140 */
  --hdr:86px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg);color:var(--ink);
  font-size:16px;line-height:1.85;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:var(--wide);margin-inline:auto}

/* ---------- 浮遊 / パララックス ------------------------------ */
.fl__in{animation:float var(--dur,8s) ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 calc(var(--dy,12px) * -1)}}

/* ---------- 写真の共通トーン --------------------------------- */
@keyframes rec{0%,55%{opacity:1}56%,100%{opacity:.15}}

/* ---------- 3Dアイコン（生成画像・台座込み） ------------------ */
/* アイコンは白背景のまま乗算合成する（白い台座と影がそのまま活きる） */

/* ============================================================
   ヘッダー
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--hdr);
  display:flex;align-items:center;
  background:rgba(241,242,246,.92);border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.hdr.is-stuck{background:#fff;border-color:var(--line);box-shadow:0 4px 20px rgba(20,21,26,.05)}
.hdr__in{display:flex;align-items:center;gap:26px;width:var(--wide);margin-inline:auto}
.logo{display:flex;align-items:center;flex:none;height:52px}
.logo img{height:50px;width:auto;display:block}
.ftr .logo img{height:46px}
/* ★フッターでも正式ロゴ（赤い星＋黒い文字）をそのまま使う。
   フッター地 #16171c に直接置くと副題が沈む（実測：正式ロゴは 赤 51.9% / 黒 45.9% / 白 0%）。
   ロゴの色を変えるのは改変になるので、地の側を白くして読ませる。
   枠線や影は足さず、白い面に置くだけにとどめる */
.nav{display:flex;gap:26px;margin-left:5.5%}
.nav a{font-size:13.5px;font-weight:700;letter-spacing:.08em;position:relative;padding:8px 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--red);transition:right .3s}
.nav a:hover::after,.nav a.is-active::after{right:0}
.btn-ct{
  display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:auto;
  height:50px;padding:0 26px;border-radius:25px;
  background:linear-gradient(160deg,#ff2246,var(--red));color:#fff;font-size:13px;font-weight:700;
  box-shadow:0 8px 18px rgba(228,0,43,.30);transition:transform .25s,box-shadow .25s;
}
.btn-ct:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(228,0,43,.38)}
.burger{
  display:grid;width:52px;height:52px;border-radius:50%;background:#fff;place-items:center;flex:none;
  box-shadow:0 3px 12px rgba(20,21,26,.12);transition:transform .25s,box-shadow .25s;
}
.burger:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(20,21,26,.16)}
.burger span{display:block;width:16px;height:2px;background:var(--red);margin:2.5px 0;transition:.3s}
.burger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* 全画面メニュー（2026-09-09 改修）：
   ・オーバーレイ自体を独立したスクロール領域にする（背景は body overflow:hidden で止めたまま、中身が長ければメニュー内だけスクロール）
   ・上端はヘッダー（閉じるボタン）ぶん空け、下端は 96px＋iOS のセーフエリア
   ・中身は .mmenu__in にまとめ、収まるときは縦中央（margin:auto）、溢れたら先頭（TOP）から。justify-content:center だと溢れた上側が切れて戻れない
   ・PC は右上のボタンの近くに現れるよう、左右のガター（.wrap と同じ）の内側で右寄せの列にする。左は意図的な余白
   ・高さは 100vh を 100dvh で上書き（対応ブラウザではアドレスバー込みの実表示高さ） */
.mmenu{
  position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:75;background:var(--black);
  display:flex;flex-direction:column;
  padding:calc(var(--hdr) + 12px) max(20px,(100% - var(--maxw)) / 2) 32px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#454857 transparent;
  opacity:0;visibility:hidden;transition:opacity .34s,visibility .34s;
}
.mmenu.is-open{opacity:1;visibility:visible}
/* PC の列は内容幅（最長の子リンク「企業・自治体コンテンツ実績」）にし、右端を右上のボタン基準で決める（2026-09-09 再調整）：
   .mmenu の左右 padding＝ヘッダーと同じガターなので、margin-right はボタン右端からの距離。clamp(32px,2.5vw,48px) で
   最長リンクの右端がボタン（幅52px）の左端〜中心に来る（1280: 32px／1440: 36px／1920: 48px）。文字は左揃えのまま */
.mmenu__in{display:flex;flex-direction:column;gap:0;flex:none;margin:auto clamp(32px,2.5vw,48px) auto auto;width:max-content}   /* PC は項目間の追加余白なし（a の padding 12px×2 が間隔）。1440×900 に収めるため */
.mmenu a,.mmenu__cat{color:#fff;font-size:26px;font-weight:900;padding:12px 0;letter-spacing:.02em}
.mmenu a small,.mmenu__cat small{display:block;font-size:11px;font-weight:500;color:#7b8091;letter-spacing:.14em;margin-top:-4px}
/* ★2026-09-23 先方「TOP トップ と横に文字を置くようにしてください。
   　ノートPCで見た時にスクロールせずに一覧が見れるようにしたいから。現在 COMPANY と会社概要までが見えている状態」
   実測：中身 869px に対し 1280×800 で 69px・1366×768 で 101px はみ出していた（最後の CONTACT が切れる）。
   → 英語と日本語を1行に並べ、行の高さを詰める。PC のみ。SP は高さが足りているので従来どおり縦積みのまま */
@media (min-width:861px){
  .mmenu a,.mmenu__cat{display:flex;align-items:baseline;gap:13px;line-height:1.4}
  .mmenu a small,.mmenu__cat small{margin-top:0;font-size:12px;line-height:1.4;white-space:nowrap}
}
/* ★SP も親はカテゴリ名。タップしても遷移しない（下に並ぶ下層リンクへ進む） */
.mmenu__cat{cursor:default;user-select:none}

/* ============================================================
   ヒーロー
   ============================================================ */
.hero{position:relative;padding-top:calc(var(--hdr) + 4px);padding-bottom:14px;overflow:hidden}
.hero__in{
  position:relative;display:flex;align-items:center;
  min-height:min(704px,80vh);
}
.hero__copy{position:relative;z-index:3;padding-bottom:18px;max-width:46%}
.hero h1{font-size:clamp(38px,5.3vw,72px);font-weight:900;line-height:1.2;letter-spacing:-.03em;margin-bottom:30px}
.hero h1 em{font-style:normal;color:var(--red)}
.hero__lead{font-size:17px;line-height:2.15;color:var(--ink);margin-bottom:42px;max-width:30em;font-weight:500}
@keyframes pulse{0%{transform:scale(.94);opacity:.9}70%{transform:scale(1.3);opacity:0}100%{opacity:0}}

.scroll-hint{
  position:absolute;right:-26px;bottom:8%;z-index:6;
  writing-mode:vertical-rl;font-size:10px;font-weight:700;letter-spacing:.32em;color:var(--ink3);
}
.scroll-hint::after{content:"";display:block;width:1px;height:62px;background:linear-gradient(rgba(228,0,43,.15),var(--red));margin:12px auto 0}

/* ============================================================
   Bento
   ============================================================ */
.card{
  background:linear-gradient(152deg,#ffffff 0%,#fbfbfc 52%,#f5f6f9 100%);border-radius:var(--r);padding:26px;position:relative;isolation:isolate;
  box-shadow:var(--shadow-s);transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s;
  transform:perspective(1500px) translate3d(0,var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.card:hover{--ty:-5px;box-shadow:var(--shadow-m)}
.card.is-tilt{transition:box-shadow .4s}
.card:hover .arw{transform:translateX(5px)}
.more{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--red);margin-top:24px}
.more svg{width:18px;height:8px;stroke:var(--red);fill:none;stroke-width:1.6;transition:transform .3s}
.card:hover .more svg{transform:translateX(6px)}


/* --- SERVICE ------------------------------------------------- */

/* --- WORKS --------------------------------------------------- */

/* --- MESSAGE ------------------------------------------------- */

/* --- HISTORY ------------------------------------------------- */
/* 確定デザイン案の軸は黒い太帯ではなく、台座の下を通る細い線 */

/* --- NEWS ---------------------------------------------------- */

/* --- ABOUT --------------------------------------------------- */
.card:hover .ph img{transform:scale(1.04)}
.card p.tx{font-size:14.5px;line-height:2;color:var(--ink)}

/* --- RECRUIT ------------------------------------------------- */

/* --- footer -------------------------------------------------- */
.ftr{background:var(--black);color:#fff;margin-top:13px;padding:34px 0 22px}
.ftr__in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ftr__nav{display:flex;gap:24px;flex-wrap:wrap}
.ftr__nav a{font-size:11px;font-weight:700;letter-spacing:.1em;color:#c6cad6}
.ftr__nav a:hover{color:#fff}
.sns{display:flex;gap:10px}
.sns a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.32);display:grid;place-items:center;transition:.3s}
.sns a:hover{background:var(--red);border-color:var(--red)}
.sns svg{width:15px;height:15px;fill:#fff}
.ftr__cp{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:5px}
.ftr__cp small{font-size:10.5px;color:#8b90a0;letter-spacing:.04em}
.ftr__cp small.mock{font-size:9.5px;color:#5d6273}

/* --- モックである旨の明示 ------------------------------------ */

/* --- reveal -------------------------------------------------- */
.rv{opacity:0;translate:0 28px;transition:opacity .85s cubic-bezier(.2,.7,.3,1),translate .85s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;translate:none}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1180px){
  .hero__in{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
  }
@media (max-width:1080px){
                  }
@media (max-width:860px){
  :root{--hdr:66px;--r:22px}
  .nav,.hdr .btn-ct{display:none}
  .burger{margin-left:auto}
  /* SP のメニュー：縦一列・左右 32px。中身が長い端末ではメニュー内をスクロール（文字サイズ・間隔は縮めない） */
  .mmenu{padding:calc(var(--hdr) + 20px) 32px calc(96px + env(safe-area-inset-bottom,0px))}   /* 下端は 96px＋iOS のセーフエリア（CONTACT がブラウザUIに寄りすぎない） */
  .mmenu__in{gap:6px;margin:auto 0;width:auto}   /* SP は従来どおりの間隔（縮めない） */
  .hero{padding-top:calc(var(--hdr) + 14px)}
  .hero__in{display:block;min-height:0}
  .hero__copy{padding-top:8px;order:1}
      .hero__copy{max-width:100%}
  .scroll-hint{display:none}
        }
@media (max-width:640px){
  .card{padding:26px 22px}
                    /* SPは装飾3Dが画面右端をはみ出して横スクロールを生むため、内側へ収める */
          }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;translate:none}
}

/* ============================================================
   下層ページ（service.html / contact.html）
   確定デザイン案にはトップしか無いため、トップのテイストを展開したもの。
   「トップページ以外のページもデザインのテイストを併せたい」という
   ご要望に対する回答として用意している。
   ============================================================ */
.phead{position:relative;padding:calc(var(--hdr) + 54px) 0 34px;overflow:hidden}
.phead__in{position:relative}
.crumb{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink3);margin-bottom:18px}
.crumb a{color:var(--ink3)}
.crumb a:hover{color:var(--red)}
.crumb em{font-style:normal;color:var(--red)}
.phead h1{font-size:clamp(32px,4.4vw,54px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.phead h1 small{display:block;font-size:12.5px;font-weight:500;color:var(--ink);letter-spacing:.08em;margin-top:10px}
.phead__lead{font-size:16px;line-height:2.05;color:var(--ink);margin-top:22px;font-weight:500}
.phead__deco{position:absolute;right:-24px;top:-26px;width:184px;z-index:-1;pointer-events:none}

/* --- SERVICE 一覧 ------------------------------------------- */

/* --- CTA ----------------------------------------------------- */
.btn-ct--lg{height:56px;padding:0 30px;border-radius:28px;font-size:14px;position:relative;z-index:2}

/* --- CONTACT フォーム ---------------------------------------- */
/* 「どのような仕事の依頼か（職種や依頼タイプ）を選べる振り分けタブ」への回答 */
.ct-tab.is-on{background:linear-gradient(160deg,#ff2246,var(--red));color:#fff;box-shadow:0 8px 18px rgba(228,0,43,.28)}
.ct-pane.is-on{display:block}

@media (max-width:900px){
  }
@media (max-width:640px){
  .phead{padding-top:calc(var(--hdr) + 34px)}
  .phead__deco{width:130px;right:-18px;top:-10px}
        }

@media (prefers-reduced-motion:reduce){
  }

/* ============================================================
   2026-09-07 構成案（HP各ページ案0907）に合わせたトップページ改修
   ・ナビを6項目＋ドロップダウンへ
   ・PLAY SHOWREEL を廃止し NOW ON AIR を配置
   ・SERVICE を2つの事業へ、WORKS を3領域へ
   ============================================================ */

/* ---------- グローバルナビのドロップダウン ------------------- */
/* SERVICE と WORKS は一覧ページを作らないため、下層へ直接送る */
.nav__item{position:relative;display:flex;align-items:center}
/* ★SERVICE / WORKS の親は、クリックできないカテゴリ名にする（クライアントご指示 9/12）。
   ハブページ（service.html / works.html）へは遷移させず、
   下の階層へのリンクだけをドロップダウンに残す。
   a でなくなるので、見た目（字送り・太さ・下線の出方）をここで持たせる */
.nav__item > a,.nav__cat{position:relative;padding:8px 0}
.nav__cat{font-size:13.5px;font-weight:700;letter-spacing:.08em;color:inherit;cursor:default;user-select:none}
.nav__item > a::after,.nav__cat::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--red);transition:right .3s}
.nav__item:hover > a::after,.nav__item:hover > .nav__cat::after,.nav__cat.is-active::after{right:0}
.drop{
  position:absolute;top:100%;left:50%;translate:-50% 0;min-width:266px;
  background:#fff;border-radius:14px;padding:10px;
  box-shadow:0 10px 30px rgba(20,21,26,.14);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .24s,visibility .24s,transform .24s;
}
.nav__item:hover .drop,.nav__item:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.drop a{display:block;padding:11px 14px;border-radius:9px;font-size:14px;font-weight:700;line-height:1.4;transition:background .2s,color .2s}
.drop a small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;color:var(--ink3);margin-top:3px}
.drop a:hover{background:var(--bg);color:var(--red)}
.drop a:hover small{color:var(--red)}

/* スマートフォンメニューの下層項目 */
.mmenu__sub{font-size:16px !important;font-weight:500 !important;color:#aeb3c2 !important;padding:6px 0 6px 18px !important;position:relative}
.mmenu__sub::before{content:"";position:absolute;left:0;top:50%;width:9px;height:1px;background:var(--red)}

/* ---------- セクション見出し --------------------------------- */
.sec-hd{margin:52px 0 20px}
.sec-hd h2{font-size:clamp(23px,2.6vw,33px);font-weight:900;letter-spacing:-.02em;line-height:1.35}
.sec-hd h2 em{font-style:normal;color:var(--red);margin:0 .12em}
.sec-hd p{font-size:15.5px;line-height:1.95;color:var(--ink2);margin-top:10px;max-width:40em}

/* ---------- NOW ON AIR（メインビュー内） ---------------------
   立体のディスプレイ（白い厚みのある枠）＋画面＋画面の中で切り替わる番組。
   ・画面の地は白：番組ロゴの PNG は白背景で改変できないため、暗い画面では白い矩形が浮く
   ・枠（ベゼル）は細く。主役は画面の中身
   ・FV より静かな区画。動きは画面の中の横スライドだけ（js/nowair.js）
   ------------------------------------------------------------ */
/* ★見出しを消したことで、右上の立体（上へ26px飛び出している）が
   リード文の直下 4px まで近づいた。接触はしていないが、環境差で数px動けば触れる近さなので
   上の余白だけをわずかに広げて余裕を持たせる（30px → 40px）。
   見出し削除で32px縮んでいるため、これでも元より22px低いまま＝FVの高さは増やしていない。
   SP 側の上余白（38px / 48px）は別途指定しているのでここは PC のみに効く */
.nowair{margin-top:clamp(20px,4.6vh,40px);position:relative;max-width:312px}
/* ★枠の上の見出し（NOW ON AIR／放送中・配信中）は削除した。
   NOW ON AIR の表現は画像側（右上の立体）に入っており、文字と内容が重複していたため。
   .nowair__hd / __live / __sub と点滅の印 @keyframes air は
   この見出し専用だったので、あわせて外してある。 */

/* ディスプレイ本体：白い箱の厚み（上の光・下の陰）＋落ち影。家電のテレビにはしない */
.disp{position:relative}
.disp::after{content:"";position:absolute;left:50%;bottom:-9px;width:76%;height:12px;translate:-50% 0;z-index:0;border-radius:50%;
  background:radial-gradient(ellipse,rgba(20,21,26,.20) 0%,rgba(20,21,26,.07) 55%,rgba(20,21,26,0) 78%);filter:blur(3px)}
.disp__frame{position:relative;z-index:2;border-radius:13px;padding:8px 8px 15px;
  background:linear-gradient(168deg,#f6f7fa 0%,#eceef4 56%,#dfe2ea 100%);   /* 枠は画面より少し暗く＝白い画面が「光っている面」に見える */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -5px 0 rgba(20,21,26,.14),
    inset -2px 0 0 rgba(20,21,26,.06),inset 2px 0 0 rgba(255,255,255,.9),
    0 18px 30px rgba(20,21,26,.14),0 2px 6px rgba(20,21,26,.06)}
/* 下辺の赤い短い線＝ブランドの印（電源ランプではない） */
.disp__frame::after{content:"";position:absolute;left:50%;translate:-50% 0;bottom:6px;width:34px;height:3px;border-radius:2px;background:var(--red);opacity:.85}   /* あごの中央に置くブランドの印（電源ランプではない） */
/* 画面：白い地。内側の薄い枠と上からの弱い影で「面の奥」に見せる */
.disp__screen{position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 60%,#f7f9fc 100%);
  box-shadow:inset 0 0 0 1px rgba(20,21,26,.30),inset 0 8px 15px rgba(20,21,26,.08),inset 0 -3px 7px rgba(20,21,26,.05)}
/* 画面のごく薄い映り込み（ガラスの面に見せる。文字の読みは妨げない） */
.disp__screen::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  background:linear-gradient(116deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 26%,rgba(255,255,255,0) 46%)}
/* 画面は一般的なテレビと同じ 16:9。高さは比率から決まるので固定値は置かない。
   ★高さを増やさないため、比率は「高さを伸ばす」のではなく「幅を詰める」ことで合わせている
     （枠 312px → 画面 296x166。変更前の 414x166＝2.49:1 はテレビとしては横長すぎた） */
.disp__screen{aspect-ratio:16/9}
.disp__track{list-style:none;position:relative;height:100%}
/* 1スライド＝1番組。ロゴと情報帯を同じ箱に入れるので、必ず一緒に切り替わる（別々に動いてズレない）。
   既定は「右の待機位置で透明」。is-on で中央へ、is-out で左へ抜ける。
   ★横に長い帯をずらす方式にしないのは、最後から先頭へ戻るときの巻き戻しを見せないため */
.disp__slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:12px 16px 52px;opacity:0;transform:translateX(6%);pointer-events:none;
  transition:opacity .45s linear,transform .62s var(--ease-soft)}
.disp__slide.is-on{opacity:1;transform:none;pointer-events:auto}
.disp__slide.is-out{opacity:0;transform:translateX(-6%)}
/* ロゴ＝画面の主役。番組ロゴは改変不可（等比のまま・色も形も変えない）。
   ★縦横比が 0.83〜2.44 とばらつくため、幅だけの指定では縦長ロゴが巨大化する。
     幅と高さの両方に上限を掛けることで、どのロゴも同じ「見た目の大きさ」に揃う */
.oa-lg{display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.oa-lg img{display:block;width:auto;height:auto;max-width:224px;max-height:94px;object-fit:contain}
/* 画面下の情報帯：白く薄い板が画面の上に浮いている程度。黒いテレビのテロップのように重くしない */
.oa-band{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;
  display:flex;align-items:baseline;gap:10px;padding:7px 11px;border-radius:6px;
  background:rgba(255,255,255,.80);backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(20,21,26,.10),0 2px 6px rgba(20,21,26,.07)}
.oa-band__t{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:700;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oa-band__m{flex:none;font-size:10.5px;font-weight:500;color:var(--ink2);letter-spacing:.02em}
/* 位置の目印（押すとその画面へ）。小さく、右下に添えるだけ */
.disp__dots{display:flex;gap:5px;justify-content:flex-end;align-items:center;margin-top:9px}
.disp__dot{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#d7dae2;cursor:pointer;
  transition:background .3s,width .3s var(--ease-soft)}
.disp__dot.is-on{width:16px;border-radius:3px;background:var(--red)}
.disp__dot:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* SP：構造は同じ（1画面1番組・ロゴ→情報帯）。ロゴだけ少し小さくする */
@media (max-width:860px){
  .disp__slide{padding:12px 14px 50px}
  .oa-lg img{max-width:196px;max-height:88px}
  .oa-band__t{font-size:12px}
}
/* 先方支給の立体（ON AIR）。画面と重ならない右上に置く */
/* ★2026-09-15（第3回打合せ）：先方支給の ON AIR 札（立体画像）は外した。
     代わりに枠の上へ赤い小さな文字で「ON AIR」。飾りではなく状態の表示なので、主張させない */
.oa-live{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:10px;font-weight:900;letter-spacing:.22em;color:var(--red);line-height:1}
/* 文字の左の赤い丸（放送中の印）。初期版と同じ、静かに脈打つ輪 */
.oa-live i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(228,0,43,.5);animation:air 2s ease-out infinite}
@keyframes air{0%{box-shadow:0 0 0 0 rgba(228,0,43,.5)}70%{box-shadow:0 0 0 8px rgba(228,0,43,0)}100%{box-shadow:0 0 0 0 rgba(228,0,43,0)}}
@media (prefers-reduced-motion:reduce){ .oa-live i{animation:none} }
/* 周りの小さな立体（白・赤）。数個だけ */
.disp__cube{position:absolute;z-index:1;pointer-events:none;border-radius:3px}
.disp__cube--a{width:22px;height:22px;left:-13px;bottom:26px;
  background:linear-gradient(160deg,#ffffff 0%,#f1f2f6 58%,#dfe2e9 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(20,21,26,.12),0 8px 14px rgba(20,21,26,.12)}
.disp__cube--b{width:13px;height:13px;right:-16px;bottom:52px;
  background:linear-gradient(160deg,#ff4664 0%,#e4002b 60%,#b8001f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 10px rgba(228,0,43,.24)}
.disp__cube--c{width:9px;height:9px;left:34px;bottom:-14px;
  background:linear-gradient(160deg,#ffffff 0%,#eef0f5 60%,#dcdfe7 100%);
  box-shadow:inset 0 1px 0 #fff,0 5px 8px rgba(20,21,26,.12)}
@media (prefers-reduced-motion:reduce){
  /* 動きを減らす設定：強い横スライドをやめ、位置は動かさず淡く切り替えるだけにする
     （js/nowair.js 側では自動切り替えも止め、静止表示にしている） */
  .disp__slide{transition:opacity .25s linear;transform:none!important}
}

/* ---------- 2つの事業 ---------------------------------------- */
/* 4つの領域は3Dブロックのテイストに合わせて立体感のあるタイルで見せる */

/* ---------- WORKS 3領域 -------------------------------------- */
.wk__body .more{margin-top:16px}

/* ---------- 20年の歩み（リード文） --------------------------- */

/* ---------- ABOUT -------------------------------------------- */

/* ---------- 複数のBentoを縦に積むときの間隔 ------------------ */

/* ---------- レスポンシブ（本セクションの上書き） ------------- */
@media (max-width:1080px){
        }
@media (max-width:900px){
  .hero__copy{max-width:100%}
  .nowair{max-width:100%}
}
@media (max-width:640px){
    .sec-hd{margin:38px 0 16px}
    }

/* キャッチは2行で収める（3行になると「る。」が孤立し、KVにも重なる） */
.hero__copy{max-width:52%}
.hero h1{font-size:clamp(30px,min(4.4vw,8vh),56px);margin-bottom:clamp(12px,3.6vh,26px)}   /* 画面が低いほど小さく＝NOW ON AIR を1画面目に収めるため */
.hero__lead{font-size:clamp(15px,2.25vh,16.5px);line-height:2.05;margin-bottom:0}
@media (max-width:900px){ .hero h1{font-size:clamp(30px,6.4vw,42px)} }

/* ★上の .hero__copy{max-width:52%} は後勝ちでSP指定を打ち消すため、ここで再度上書きする
   （CSSは同詳細度なら後ろが勝つ。メディアクエリは必ず最後に置くこと） */
@media (max-width:900px){
  .hero__copy{max-width:100%}
  .nowair{max-width:100%}
}

/* ABOUTの装飾3Dが本文に被らないよう、テキストを前面に置く */

/* ============================================================
   WORKS 下層（番組制作／YouTube・ライブ配信／企業・自治体）
   ============================================================ */

/* ---------- 放送中の番組カード ------------------------------- */
/* 番組ロゴは改変不可。白いタイルに等比のまま収める */
.pg__body .more{margin-top:16px}

/* ---------- 過去の制作実績 ----------------------------------- */
.past{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* 未支給の欄は「準備中」と分かるようにする（空欄で放置しない） */

/* ---------- 事例カード（YouTube） ---------------------------- */
.c-case .more{margin-top:16px}

/* ---------- 事例カード（写真つき） --------------------------- */

/* ============================================================
   ABOUT
   ============================================================ */
/* ---------- OUR VALUES：頭文字を立体で見せる ----------------- */
/* ホバーで複数の要素が同時に動く（立体が回る＋厚みが伸びる＋カードが浮く） */


/* ---------- 代表メッセージ ----------------------------------- */
/* 写真が未支給のあいだ、空白ではなく「これから入る場所」と分かる形にしておく */

/* ============================================================
   COMPANY
   ============================================================ */


/* ============================================================
   CONTACT
   ============================================================ */

/* お問い合わせ区分：選択肢を最初からすべて見せる（先方ご要望） */
.kind{display:block;cursor:pointer}
.kind input{position:absolute;opacity:0;width:0;height:0}
.kind:hover .kind__box{background:#e8eaf0}
.kind input:checked + .kind__box{
  background:linear-gradient(160deg,#ff2246,var(--red));color:#fff;
  box-shadow:0 8px 18px rgba(228,0,43,.28);transform:translateY(-2px);
}
.kind input:focus-visible + .kind__box{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.16)}

.agree{display:flex;align-items:center;gap:11px;font-size:13px;justify-content:center;padding:16px;background:var(--bg);border-radius:12px}
.agree input{width:19px;height:19px;accent-color:var(--red);flex:none}
.agree a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
/* 未入力の項目は色だけでなく枠でも示す（色だけで意味を伝えない） */
.is-error input,.is-error textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.12)}
.is-error .kind__box,.agree.is-error{outline:2px solid var(--red);outline-offset:2px}

/* ============================================================
   PRIVACY POLICY（本文はご支給後に流し込む）
   ============================================================ */
/* PRIVACY POLICY：本文ボックスは .card を使わず静的（transform・視差・hover の浮き上がり・出現移動なし） */
.c-legal{background:linear-gradient(152deg,#ffffff 0%,#fbfbfc 52%,#f5f6f9 100%);border-radius:var(--r);padding:44px 38px;box-shadow:var(--shadow-s)}
.legal__ttl{font-size:17px;font-weight:900;margin-bottom:14px}
.legal__tx{font-size:15.5px;line-height:2;color:var(--ink2)}
.legal__note{margin-top:26px;padding:22px 24px;background:var(--bg);border-radius:14px;border-left:3px solid var(--red)}
.legal__note b{display:block;font-size:15px;font-weight:900;margin-bottom:10px}
.legal__note p{font-size:14.5px;line-height:2;color:var(--ink2)}
/* ★本文（9/12 受領）。法務文書なので装飾は最小限に：見出しの階層と行間だけで読ませる */
.legal{max-width:min(66em,100%);margin-inline:auto}   /* ★2026-09-28 先方ご指示：個人情報保護基本方針以下をセンターに移動。
     かつ「6．開示・訂正・利用停止等」の1文が1行に収まる長さまで広げる（44em→66em） */
.legal__h2{font-size:clamp(18px,1.8vw,22px);font-weight:900;letter-spacing:-.01em;margin-bottom:18px}
.legal__h3{font-size:15px;font-weight:900;margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.legal__p{font-size:15.5px;line-height:2;color:var(--ink2)}
.legal__p+.legal__p{margin-top:.6em}
.legal__ul{list-style:none;margin:10px 0 0;padding:0}
.legal__ul li{position:relative;font-size:15.5px;line-height:1.95;color:var(--ink2);padding-left:1.1em}
.legal__ul li::before{content:"・";position:absolute;left:0;color:var(--ink3)}
.legal__sig{margin-top:38px;padding-top:22px;border-top:1px solid var(--line)}
.legal__sig p{font-size:13.5px;line-height:1.9;color:var(--ink)}
.legal__sig p+p{margin-top:.15em}

/* ============================================================
   下層ページのレスポンシブ
   ============================================================ */
@media (max-width:1080px){
                    .past{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:640px){
      .past{grid-template-columns:1fr}
          .c-legal{padding:30px 22px}
      }

/* ★ロゴの収まりは % ではなく px で上限を与える。
   親が display:grid ＋ place-items:center だと grid area の高さがアイテムのサイズ決定に
   使われないため、height:100% も max-height:100% も解決されず auto に落ちる（実測で確認）。
   等比のまま縮小するだけなので、ロゴの改変にはあたらない。 */
/* セクションのリード文が1文のとき、末尾1文字だけが次行に落ちるのを防ぐ */
.sec-hd p{max-width:46em}

/* 代表メッセージ：写真枠が縦に伸びすぎるため実寸を固定し、本文の余白を締める */
@media (max-width:1080px){  }

/* .btn-ct はヘッダーで右寄せするため margin-left:auto を持つ。
   フォームやCTAの中では中央／左に置きたいので打ち消す */
.ct-submit .btn-ct{margin-left:0}

/* ============================================================
   WORKS を均等な3カードから、主従のある組み方へ
   ・1枚目（番組制作＝20年の主軸）を大きく、2枚目以降を右に縦積み
   ・「同じ大きさの箱が並んでいる」印象を崩すのが目的
   ============================================================ */

@media (max-width:1080px){
      }
@media (max-width:640px){
    }

/* 大カードは本文ではなく写真側で高さを吸収する（本文の下に余白が空くのを防ぐ） */

/* ============================================================
   キービジュアルのロゴを別レイヤーにする
   画像に焼き込むと、背景と同じ速さでしか動かず「1枚絵」に見えてしまう。
   位置は画像に対する％で指定し、拡大縮小に追従させる。
   （元画像 845×590 上での中心座標・幅から算出）
   ============================================================ */
/* 20周年ロゴ：中央カードの中心 (342,285) / 幅158 */
/* 社名ロゴ：右上カードの中心 (670,165) / 幅112・高さ48.6 */

/* ============================================================
   20年の歩み：アイコンの均質さを崩す
   全部が同じ大きさ・同じ台座・同じ角度で並ぶと「アイコンの羅列」に見えるため、
   起点（2007 START）と終点（2027 NEXT STAGE）を大きくし、間に強弱をつける。
   台座の下を通る線と揃えるため、大きさが変わっても下端は揃える。
   ============================================================ */
/* 起点と終点の年号を少し強くして、20年の「始まり」と「これから」を読ませる */
@media (max-width:640px){
    }

/* ============================================================
   FVのSPブラッシュアップ（2026-09-08）
   NOW ON AIR を .hero__copy の外へ出したため、
   PC は column 化して「コピー → NOW ON AIR」の縦並びを維持（見た目は従来どおり）。
   SP は order で「メッセージ → FV（.mbs）→ NOW ON AIR」に並べ替える。
   ============================================================ */
.hero__in{flex-direction:column;align-items:flex-start;justify-content:center}
.hero__copy{padding-bottom:0}
.nowair{position:relative;z-index:3}

@media (max-width:860px){
  .hero__in{display:flex;flex-direction:column;align-items:stretch;min-height:0}
  .hero__copy{order:1;max-width:100%}
  /* NOW ON AIR：KVから少し離し、別の情報ブロックとして見せる */
  .nowair{order:3;margin-top:38px;max-width:100%}
}

/* column 化で幅が内容幅に縮むため、明示的に指定する。
   幅 312px ＝ 枠の内側 296px ＝ 画面 296x166（16:9）。テレビと同じ比率にするため幅を詰めた */
.nowair{width:100%;max-width:312px}
@media (max-width:860px){
  .nowair{margin-top:48px;max-width:100%}   /* FV のキューブが下へはみ出すぶん、少し広めに。SP は全幅のまま */
}

/* ============================================================
   TOPページ全体へFVのデザイン言語を展開（2026-09-08）
   共通トークン：メディアタイル・慣性のあるmotion・エディトリアルな余白
   ※ 9/8 の段階追記を統合済み（同じセレクタは1か所で定義し、SP用は末尾の @media にまとめる）
   ============================================================ */
:root{
  --ease-soft:cubic-bezier(.16,1,.3,1);   /* FVのフォーカスと同じ。ゆっくり・柔らかい・少し重い */
  --dur-soft:.9s;
  --tile-r:22px;                          /* FVのタイル（17%）を固定サイズに置き換えた角丸 */
}
/* 横方向のはみ出しはページ全体で切る。clip は overflow:hidden と違いスクロール容器を作らないので sticky（HISTORY）を壊さない */
html,body{overflow-x:clip}
/* 出現アニメーションもFVの質感に揃える */
.rv{transition:opacity 1.1s var(--ease-soft),translate 1.1s var(--ease-soft)}

/* ---------- メディアタイル（全セクション共通） ---------- */
/* FVのタイルと同じ系統：角丸・左上からの光面・エッジの光・柔らかい落ち影。borderは増やさない */
.mtile{
  position:relative;border-radius:var(--tile-r);overflow:hidden;background:#e9ebf1;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 4px 12px rgba(255,255,255,.28), 0 24px 40px rgba(20,21,26,.14);
  transform:translate3d(0,0,0);
}
.mtile img,.mtile video{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-soft) var(--ease-soft)}
.mtile::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(155deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 56%);
}
/* ロゴタイル：純白の面（ロゴPNGの白い地と面の差を消す）。ロゴPNGは原寸が小さいので width/height を与えて面の中で拡大する */
.mtile--logo{display:grid;place-items:center;padding:14%;background:#fff}
.mtile--logo::before{opacity:.45}
.mtile--logo img{width:64%;height:58%;object-fit:contain}
/* タイポグラフィタイル：写真の事実性が担保できない案件は、案件名を面に載せる（カンプの STORY タイルと同系） */
.mtile--type{display:flex;flex-direction:column;justify-content:flex-end;padding:22px 24px;color:#fff}
.mtile--red  {background:linear-gradient(160deg,#ff3355 0%,#e4002b 55%,#c2001f 100%)}
.mtile--black{background:linear-gradient(160deg,#2a2c34 0%,#16171c 60%,#0e0f13 100%)}
.mtile__k{font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.85;position:relative;z-index:3}
.mtile__t{display:block;font-size:clamp(20px,2vw,28px);font-weight:900;letter-spacing:-.01em;line-height:1.3;margin-top:6px;position:relative;z-index:3}
/* 装飾球（FVと同じ光源・質感をCSSで） */
.orb{display:inline-block;border-radius:50%;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.22), inset 3px 4px 8px rgba(255,255,255,.18), 0 18px 26px rgba(20,21,26,.22)}
.orb--red{background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,0) 30%),
  radial-gradient(circle at 36% 30%, #ff5b74 0%, #e4002b 46%, #7e0018 100%)}
/* ★2026-09-17：CTA 帯の球は全ページ赤に統一したため、現在この配色の使い所は無い。
   企業向けの色は青灰 #4a6491 で統一されており、紫はそのどちらでもなかった。
   配色の在庫として定義だけ残す（使うときは .orb--red と同じ書き方で足せる） */
.orb--purple{background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 14%, rgba(255,255,255,0) 30%),
  radial-gradient(circle at 36% 30%, #b07cf0 0%, #7a3fc4 46%, #3a1866 100%)}
/* 視差（js/motion.js）を受ける要素 */
[data-px]{will-change:transform}

/* ============================================================
   STEP1 PASSIONの2つの事業：2つの章として交互に配置するエディトリアル
   ============================================================ */
.svc2{margin-top:56px}
.chap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:56px;align-items:center;padding:52px 0}
.chap+.chap{border-top:1px solid var(--line)}
.chap--rev .chap__tx{order:2}
.chap--rev .chap__vis{order:1}
.chap__no{display:inline-block;font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--red);margin-bottom:18px}
.chap__en{font-size:clamp(28px,3.2vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1.08}
.chap__ja{font-size:15px;font-weight:700;margin-top:10px}
.chap__lead{font-size:16px;line-height:2.05;color:var(--ink2);margin-top:22px;max-width:30em}
.chap__tx .more{margin-top:26px}
.chap__vis .mtile{aspect-ratio:4/3}
/* 注目すると応える：章全体に触れたときだけ画像がごくわずかに寄る */
.chap:hover .mtile img{transform:scale(1.025)}

/* ============================================================
   PASSIONの2つの事業（2026-09-12 夜：9/2 構成案の4ブロック構成へ戻す）
   Visual Reference＝9/2 `00_営業/HP構成案.pdf`：厚みのある白いブロックを 2×2 に組んだ塊が2つ。
   面に立体アイコン＋日本語＋英字。下に段になった円形の台座（01＝赤／02＝鋼色）、周りに小さな球。
   実装は DOM＋CSS 3D（commit fd04095 の実装を再利用。静止画には置き換えない）。
   ・面は5面で閉じた箱（前・上・下・左・右）。外向きの法線＋backface-visibility:hidden で、見える面だけが描かれる
   ・TV と CORPORATE は同じ向き（同じカメラ）。鏡像にしない
   ・常時モーションなし。出現は位置の移動だけ（opacity を 3D の祖先に掛けると preserve-3d が潰れるため使わない）
   ・?svc=b はアイコンだけを外す。形・カメラ・材質・台座・小物・配置は A と同一
   ============================================================ */
.svc2 .sec-hd{margin:44px 0 0}
.biz{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;margin-top:0;align-items:center}
.bz{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:0 10px;align-items:center;--tint:var(--red);--tint-d:#b3001f;--tint-l:#ff5b74;--dir:-1}   /* --dir:-1＝正面が左（やや上）を向き、右側面が見える（カンプの向き）。両事業とも同じ */
.bz--cp{--tint:#4a6491;--tint-d:#34496f;--tint-l:#8ea3c8}   /* 向きは TV と同じ（同じカメラで撮った2つの物体）。--dir は 1 のまま */
.bz__tx{grid-column:1;grid-row:1;align-self:end}
.bz__cta{grid-column:1;grid-row:2;justify-self:start;align-self:start;margin-top:12px}
.bz__obj{grid-column:2;grid-row:1/3}
/* テキストブロック（参考画像の密度） */
/* ★2026-09-15（第3回打合せ）：キューブを大きくした結果、面のラベル（バラエティ等・画面上 約21px）より
     事業名のほうが小さく、階層が逆転していた。事業名を最大にして主役に戻す。
     01 の数字は「番号」なので、タイトルより小さく・細かくして添える役に回す */
.bz__no{display:block;font-size:clamp(17px,1.25vw,20px);font-weight:900;color:var(--tint);line-height:1;letter-spacing:.02em}
.bz__ja{font-size:clamp(25px,2.05vw,32px);font-weight:900;line-height:1.28;letter-spacing:-.02em;margin-top:8px}
.bz__en{display:block;font-size:clamp(10px,.72vw,11.5px);font-weight:900;letter-spacing:.16em;color:var(--tint);margin-top:7px}
.bz__lead{font-size:14.5px;line-height:1.85;color:var(--ink2);margin-top:14px;word-break:auto-phrase}
/* VIEW MORE：白い矩形の editorial な CTA */
.bz__cta{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;background:#fff;border-radius:2px;box-shadow:0 1px 2px rgba(20,21,26,.06),0 6px 14px rgba(20,21,26,.06);
  font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--red);transition:box-shadow var(--dur-soft) var(--ease-soft)}
.bz__cta svg{width:18px;height:8px;stroke:var(--red);fill:none;stroke-width:1.6;transition:transform .3s}
.bz__cta:hover{box-shadow:0 1px 2px rgba(20,21,26,.08),0 10px 20px rgba(20,21,26,.10)}
.bz__cta:hover svg{transform:translateX(5px)}
.bz__cta:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- 物体：Three.js の立体（js/biz3d.js） ---------- */
/* WebGL は BUSINESS 全体で1つだけ。画面外のキャンバスに描き、この 2D キャンバスへ転写する。
   これでコンテキストを増やさず、2事業の投影が完全に同一になる */
.bz__obj{position:relative;width:clamp(260px,27vw,380px);aspect-ratio:1/1}
/* ★2026-09-15：canvas は枠（.bz__obj）の外へ広がる（大きさ・位置は js/biz3d.js が P.ext から決める）。
     文字・CTA の上にも掛かるため pointer-events は切り、ポインタ反応は枠で受ける */
.bz3d{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.bz__obj{z-index:0}
.bz__tx,.bz__cta{position:relative;z-index:1}
/* ★canvas は見出し下のリード文や次の区画（WORKS）の見出しにも掛かる。文字は必ず canvas より前面に置く＝立体は「背景」 */
.svc2 .sec-hd,.wks{position:relative;z-index:1}
/* WebGL が使えないときのポスター（js が hidden を外す）
   ★display を作者側で指定すると UA の [hidden]{display:none} に必ず勝ってしまい、
     hidden を付けたまま表示される（物体が二重に見える）。[hidden] を明示的に効かせる */
.bz3d__poster{display:block;width:100%;height:auto;border-radius:4px}
.bz3d__poster[hidden]{display:none}
/* カテゴリ名はキャンバスの中の絵なので、読み上げと検索のために同じ内容をテキストで残す */
.bz__names{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* 出現：位置の移動だけ（opacity は使わない＝FV と同じ作法） */
.bz .bz__obj.rv,.bz .bz__obj.rv:not(.is-in){opacity:1}
.bz .bz__obj.rv:not(.is-in){translate:0 10px}
.bz .bz__obj.rv{transition:translate .7s var(--ease-soft)}
@media (prefers-reduced-motion:reduce){
  .bz .bz__obj.rv:not(.is-in){translate:none}
  .bz .bz__obj.rv{transition:none}
}

/* ============================================================
   WORKS（2026-09-12 夜：9/2 構成案へ戻す）
   Visual Reference＝9/2 `00_営業/HP構成案.pdf`：明るいページ面の中に、暗いメディアカードが3枚横並び。
   ・黒い1枚の大きなパネルにはしない。白い枠線・白いコンテナカードでも囲わない
   ・3枚は同じ家族：大きさ・角丸・地・文字・キャプションの位置・丸い矢印・余白・見せ場の比率を揃える
   ・中身だけカテゴリごとに変える（ロゴの壁／再生マーク＋チャンネル＋LIVE＋写真／立体アイコン＋写真）
   ・番組ロゴは改変不可。白い札の中に等比で収める（暗い面に白い面が並ぶ＝9/2 案と同じ密度）
   ============================================================ */
.wks{margin-top:60px}
.wks__hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:16px}
.wks__ttl{font-size:clamp(20px,1.9vw,26px);font-weight:900;letter-spacing:.02em;line-height:1}
.wks__ttl small{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink3);margin-left:12px}
/* ★「すべての実績を見る」（works.html 行き）は削除した。
   ハブページを導線から外すご指示のため。各実績カードは
   works-tv / works-digital / works-corporate へ個別にリンクしており導線は残る。 */
.wks__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* カード：暗い面。3枚とも同じ作り */
.wkc{position:relative;display:block;border-radius:16px;overflow:hidden;background:#15161b;color:#fff;
  box-shadow:0 14px 26px rgba(20,21,26,.16),0 2px 6px rgba(20,21,26,.08);
  transition:transform var(--dur-soft) var(--ease-soft),box-shadow var(--dur-soft) var(--ease-soft)}
.wkc:hover{transform:translateY(-3px);box-shadow:0 22px 36px rgba(20,21,26,.22),0 2px 6px rgba(20,21,26,.08)}
.wkc:focus-visible{outline:2px solid var(--red);outline-offset:4px}
/* 見せ場：カードの下側（2026-09-17 以降）。3枚とも同じ比率 */
.wkc__vis{position:relative;aspect-ratio:4/3.05;overflow:hidden}
/* キャプション：暗い面の上側に白い文字（2026-09-17 クライアントご指示で下→上へ）。
   DOM も .wkc__vis より前に置いてあるので、読み上げ順も「ラベル→カード名→見せ場」で一致する */
.wkc__cap{position:relative;z-index:3;padding:20px 18px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 14px}
/* ★2026-09-15（第3回打合せ）：カード名が小さく、上の飾りのほうが先に目に入っていた。
     カード名を主役のサイズにし、英字はその上の小さなラベルに徹する */
.wkc__en{grid-column:1/-1;font-size:10px;font-weight:900;letter-spacing:.16em;color:#c6cbd6;margin-bottom:2px}
.wkc__ja{font-size:clamp(19px,1.55vw,24px);font-weight:900;line-height:1.3;letter-spacing:-.02em}
/* 丸い矢印ボタン */
.wkc__arw{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;
  transition:background var(--dur-soft) var(--ease-soft),border-color var(--dur-soft) var(--ease-soft)}
.wkc__arw svg{display:block;width:18px;height:8px;stroke:#fff;fill:none;stroke-width:1.6;transition:transform .3s}
.wkc:hover .wkc__arw{background:var(--red);border-color:var(--red)}
.wkc:hover .wkc__arw svg{transform:translateX(3px)}

/* ---------- 01 番組制作：ロゴの壁（3列が別々の速さでゆっくり流れる＝制作量が伝わる） ---------- */
/* 見せ場いっぱいにレーンを置く。左右端はフェードさせ、札が「入ってきて出ていく」ように見せる */
.lgw{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:10px 0;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.lgw__row{display:flex;align-items:center;gap:13px;width:max-content;will-change:transform;animation:lgwDrift 50s linear infinite}
.lgw__row--b{animation-duration:62s;animation-direction:reverse;animation-delay:-10s}   /* 逆向き＋開始位置をずらす＝列が揃って見えない */
.lgw__row--c{animation-duration:56s;animation-delay:-16s}
/* 列ごとに札の大きさを少し変える（整然としたまま単調にしない） */
.lgw__row--b .lgw__it{width:104px;height:104px}
.lgw__row--c .lgw__it{width:84px;height:84px}
@keyframes lgwDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* 札は正方形（現行サイトの番組ロゴが 432×432 のため）。1レーンに 3〜4枚が見え、端で見切れて「まだ続く」印象になる */
.lgw__it{flex:none;width:92px;height:92px;display:grid;grid-template-rows:100%;grid-template-columns:100%;place-items:center;overflow:hidden;
  background:#fff;border-radius:10px;padding:8px;box-shadow:0 6px 14px rgba(0,0,0,.38)}
.lgw__it img{width:100%;height:100%;object-fit:contain}
/* ★カーソル時の減速は js/lgw-speed.js が「再生速度」だけを変えて行う。
   ここで animation-duration を切り替えてはいけない。
   CSS アニメーションの進行率は「経過時間 ÷ duration」で決まるため、
   duration を変えると経過時間は据え置きのまま進行率が再計算され、
   ロゴが別の位置へ瞬間移動して見える（50s→140s で進行率が約2.8分の1へ巻き戻る）。 */

/* ---------- 02・03 共通：実績のコラージュ ----------
   ★WORKS の主役は立体ではなく実績そのもの。FV と 2つの事業で立体表現を使っているぶん、
     ここは一段引いて 2D 寄りに見せる。奥行きは「写真の弱い影・白い板のわずかな厚み・
     大きさと位置の差」まで。大きな立体は置かない。 */

/* 白いロゴ板：ロゴを等比のまま収め、周囲に余白を残す。
   ★チャンネルのロゴは実績情報。重ねない・切らない・歪ませない・色を変えない */
.wkm{position:absolute;background:#fff;border-radius:9px;overflow:hidden;
  box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(0,0,0,.42)}
/* ★ロゴは板の中に「絶対配置」で収める。
   通常フローの子に width/height の % を書いても、親の高さが確定していないと効かない。
   .wkc__vis の高さは aspect-ratio 由来で、.wkm はその % なので、
   img にとっては高さが不定のままになり、ロゴが板の外へ溢れていた（実測 最大 +102px）。
   絶対配置なら % は「位置指定の親の padding box の実寸」に対して解決されるので必ず効き、
   箱が確定するぶん object-fit:contain も正しく働く。左右 8% / 上下 9% が余白。 */
.wkm img{position:absolute;left:8%;top:9%;width:84%;height:82%;
  object-fit:contain;object-position:center;display:block}
/* 2カラムの土台（左 5.5〜47% / 右 51〜94.5%）に揃え、行の間隔は一定の 4%。
   上段＝ロゴ2枚／中段＝ロゴ＋配信写真／下段＝制作写真＋小さな記号、と視線が縦に追える並び。
   ★板を少し背高にしてある。contain で収めるため、板が低いと正方形のロゴが小さくなりすぎる */
.wkm--a{left:5.5%;top:6%;width:41.5%;height:26%}
.wkm--b{left:51%;top:6%;width:43.5%;height:26%}
/* ★2026-09-25 先方「HP修正依頼④」：
     「YouTubeと配信の3Dアイコン2つを削除。そこに、以下の2枚の写真を入れ込む。
       右側の写真の切り替えと同じタイミングで以下を切り替えて欲しいです」
   2点の立体アイコン（.wki--yt 上36%＋.wki--live 上67%）は、合わせるとちょうど
   右の写真枠（上36%・高さ58%）と同じ高さの帯になる。そこを1枚の写真枠にまとめ、
   右と同じ 13 秒の入れ替えをかける（＝左右が同時に切り替わる）。
   ★画像 images/deco/wk-yt3d.webp / wk-live3d.webp はこれで未使用になる（ファイルは残す）
   ★左右ともアニメの開始時刻が同じなので、別々に指定しても揃う */

/* 写真：少しだけ影を落とす。大きさに差をつけて主従を作る */
.wkp{position:absolute;border-radius:9px;overflow:hidden;background:#0f1013;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
  transition:transform var(--dur-soft) var(--ease-soft)}
.wkp img{width:100%;height:100%;object-fit:cover;display:block}
.wkp .is-alt{position:absolute;inset:0;opacity:0}
/* 写真はロゴより背を高くして、大きさの差をはっきりさせる（ロゴの可読性は優先）。
   ★配信現場の写真は右列の下いっぱいまで。左列（白い板2枚＋写真）と下端が揃い、
     「主役の写真1枚＋ロゴ板3枚」として読める */
.wkp--ytA{left:51%;top:36%;width:43.5%;height:58%}
.wkp--ytB{left:5.5%;top:36%;width:41.5%;height:58%}   /* 旧・立体アイコン2点のあと（2026-09-25） */
/* 現場写真を数秒ごとに静かに入れ替える（CSS のみ。番組制作の流れより弱い動き） */
@keyframes wkFadeA{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes wkFadeB{0%,40%{opacity:0}50%,90%{opacity:1}100%{opacity:0}}
.wkp--ytA>img,.wkp--ytB>img{animation:wkFadeA 13s ease-in-out infinite}
.wkp--ytA>.is-alt,.wkp--ytB>.is-alt{animation-name:wkFadeB}

/* ---------- 03 企業・自治体：実績写真だけの作品ポートフォリオ（3枚のなかで最も静か） ----------
   ★2026-09-25 先方「上のボートにのってる写真を以下に差し替えてください」＋2枚ご提示。
     これまではメイン1枚が 89%×47%＝画面上 312×126px の 2.48:1 という極端な横長で、
     差し替える2枚（撮影風景 1.45:1／カフェ 1.87:1）を入れると高さが4割も切れてしまう。
     → ユーザー判断で 3枚 → 4枚に。枠の比を写真の比に合わせ、切れ方を1割前後に収める。
     実測（CSS幅1280・枠 351×267）：
       cpA 撮影風景 161×111＝1.45:1（原寸 1.45:1）
       cpB 会議室   144×111＝1.30:1（原寸 1.33:1）
       cpC カフェ   207×111＝1.87:1（原寸 1.87:1）
       cpD 湖畔      98×111＝0.89:1（原寸 1.00:1）
   ★cpD は 493×493 の低解像度素材（ご提供資料からの抽出）なので、いちばん小さい枠のまま。
     98×111 は DPR2 でも 196×222 で、原寸の 493px を超えない */
.wkp--cpA{left:5.5%;top:7%;width:46%;height:41.75%}       /* 上段左・最大（現行サイト取得の撮影風景） */
.wkp--cpB{left:53.5%;top:7%;width:41%;height:41.75%}      /* 上段右（支給・高解像度） */
.wkp--cpC{left:5.5%;top:51.25%;width:59%;height:41.75%}   /* 下段左・横長（支給・高解像度） */
.wkp--cpD{left:66.5%;top:51.25%;width:28%;height:41.75%}  /* 下段右・最小（ご提供資料から抽出のため小さくのみ） */
/* カーソル時だけ、ごくわずかに前後差をつける（1〜2px。常時は動かさない） */
.wkc--cp:hover .wkp--cpA{transform:translateY(-2px)}
.wkc--cp:hover .wkp--cpC{transform:translateY(-1px)}
.wkc--yt:hover .wkp--ytA,.wkc--yt:hover .wkp--ytB{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .lgw__row{animation:none}
  .wkp--ytA>img,.wkp--ytA>.is-alt,.wkp--ytB>img,.wkp--ytB>.is-alt{animation:none}
  .wkp--ytA>.is-alt,.wkp--ytB>.is-alt{opacity:0}
  .wkc,.wkc__arw,.wkp{transition:none}
  .wkc:hover{transform:none}
}
@media (max-width:900px){
  .wks{margin-top:44px}
  .wks__grid{grid-template-columns:1fr;gap:14px}
  .wkc__vis{aspect-ratio:16/9}
  .lgw__it{width:74px;height:74px}
  .lgw__row--b .lgw__it{width:82px;height:82px}
  .lgw__row--c .lgw__it{width:68px;height:68px}
  /* SP：上段ロゴ2枚、下段は 写真2枚（左 58% と右 27.5%。右は旧・立体アイコン2点のあと） */
  .wkm--a{left:5.5%;top:8%;width:43%;height:27%}
  .wkm--b{left:51.5%;top:8%;width:43%;height:27%}
  .wkp--ytA{left:5.5%;top:42%;width:58%;height:46%}
  .wkp--ytB{left:67%;top:42%;width:27.5%;height:46%}
  /* SP も 2段2列。枠が 16:9 と横長なので PC より横に切れるぶんが増えるが、
     いちばん切れて困らない並びにしている（会議室は上段右の 1.56:1＝原寸 1.33 に近い枠）。
     cpD は 493px の低解像度素材なので 28%＝214px（DPR2 で 428px）までに留める */
  .wkp--cpA{left:5.5%;top:8%;width:51%;height:41%}
  .wkp--cpB{left:58.5%;top:8%;width:36%;height:41%}
  .wkp--cpC{left:5.5%;top:51%;width:59%;height:41%}
  .wkp--cpD{left:66.5%;top:51%;width:28%;height:41%}
}

/* ============================================================
   STEP2 WORKS：作品を主役にした非対称のメディアショーケース
   ============================================================ */

/* ============================================================
   20 YEARS HISTORY（2026-09-13：9/2 構成案の再現）
   Visual Reference＝9/2 `00_営業/HP構成案.pdf` の HISTORY 帯を 10 倍描画で実測。
   ・左＝見出しだけの小さな塊（20 YEARS HISTORY／20年の歩み）
   ・中央＝6つの時点。各点は「色の付いた小さな立体オブジェクト＋白い丸台座」。
     背景のカードは置かない。年＝黒で大きめ、その下に短い見出し。補足文は無い
   ・右端＝赤い球と、その周りをカーブしながら通る白〜銀の帯。
     枠の外へ続いて見えるよう一部を切り落とす
   ・WORKS の下に差し込まれた「薄い横長の帯」に見せる（大きなUIカードにしない）

   ★立体オブジェクトは台座ごと1枚の画像で、透過が無く純白背景。
     そのままだと白い四角が地に浮くため multiply で重ねる
     （白＝地の色に溶け、色の付いた部分と台座のグレーだけが残る）。
   ★カンプにはアイコン下に細い横線が実在するが、
     「タイムラインUIに見せない」というご指示に従い引かない。
   ============================================================ */
.hist{position:relative;overflow:hidden;margin-top:52px;
  display:grid;grid-template-columns:minmax(150px,196px) minmax(0,1fr);gap:0 28px;align-items:center;
  border-radius:14px;padding:30px 28px 26px;
  background:linear-gradient(170deg,#ffffff 0%,#fbfcfd 58%,#f6f7fa 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 3px 10px rgba(20,21,26,.04)}
.hist__hd{align-self:center}
.hist__ttl{font-size:clamp(17px,1.5vw,21px);font-weight:900;letter-spacing:.005em;line-height:1.2}
.hist__sub{margin-top:7px;font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:.02em}
/* 6点を等間隔に。つなぐ線は引かない（年表であることは 立体→年→見出し の繰り返しで伝わる）。
   右端は球と帯のぶんだけ空ける */
.hist__row{position:relative;list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0 6px;padding:0 104px 0 0;margin:0}
/* ★年代の連続感だけを補う基準線。年表UIにはしない。
     ・各アイコンの台座のすぐ下を通す（中央を貫くと串刺しに見える）
     ・右端は padding の内側で止める＝赤い球へ届かない。
       さらに両端をグラデーションで薄れさせ、切れ目を見せない
     ・項目側を前に出すので、台座が線の上に乗って「同じ流れの上に並ぶ」 */
.hist__row::before{content:"";position:absolute;left:0;right:104px;top:53px;height:1px;z-index:0;
  background:linear-gradient(90deg,rgba(217,221,227,0) 0,#d9dde3 5%,#d9dde3 80%,rgba(217,221,227,0) 100%)}
.hist__it{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 2px}
/* 立体オブジェクト：カードに載せない。台座は画像に含まれている */
.hist__ic{display:block;width:56px;height:56px}
.hist__ic img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.hist__yr{margin-top:5px;font-size:15px;font-weight:900;color:var(--ink);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.hist__lb{margin-top:3px;font-size:11.5px;font-weight:700;line-height:1.45;letter-spacing:-.01em;color:var(--ink2);word-break:auto-phrase}
/* 右端：赤い球と白い帯。枠からはみ出させ、外へ続いているように見せる */
/* ★帯は枠より背が高いと大半が切れてしまう。枠の高さに収まる大きさにし、
     球は帯の下half に寄せて「帯が球の周りを通る」関係にする。
     右側は枠の外へ続けて切り落とす（カンプも右端で切れている） */
.hist__deco{position:absolute;right:-18px;top:50%;translate:0 -50%;width:206px;height:172px;pointer-events:none}
.hist__ribbon{position:absolute;right:-8px;top:4px;width:140px;height:auto;
  filter:drop-shadow(0 6px 12px rgba(20,21,26,.09))}
.hist__ball{position:absolute;right:58px;top:60px;width:88px;height:auto;
  filter:drop-shadow(0 10px 16px rgba(20,21,26,.20))}
@media (max-width:1080px){
  .hist{grid-template-columns:minmax(128px,168px) minmax(0,1fr);gap:0 20px;padding:20px 22px 18px}
  .hist__row{padding-right:88px}
  .hist__row::before{right:88px;top:45px}
  .hist__ic{width:48px;height:48px}
  .hist__yr{font-size:14px}
  .hist__lb{font-size:10.5px}
  .hist__deco{width:180px;height:152px;right:-22px}
  .hist__ribbon{width:122px;top:2px;right:-6px}
  .hist__ball{right:50px;top:52px;width:76px}
}
/* SP：横スクロールにはせず 3列×2行。横にはみ出させない */
@media (max-width:860px){
  .hist{display:block;margin-top:40px;padding:20px 16px 18px;border-radius:12px}
  .hist__hd{margin-bottom:16px}
  .hist__row{grid-template-columns:repeat(3,1fr);gap:18px 6px;padding:0}
  /* 3列×2行では横一直線が成立しないので引かない */
  .hist__row::before{display:none}
  .hist__ic{width:46px;height:46px}
  /* 球と帯は右下の外へ。実測で球が「最後の見出し」に 9px 被っていたため、
     枠の外側へさらに寄せて重ならないようにする */
  .hist__deco{top:auto;bottom:-34px;right:-66px;translate:0 0;width:150px;height:150px}
  .hist__ribbon{width:112px;top:-2px;right:-4px}
  .hist__ball{right:22px;top:44px;width:66px}
}

/* ============================================================
   TOP 下段：ABOUT ｜ CONTACT（9/2 構成案の下段）
   ★大きな区画を縦に2つ積むのをやめ、同じ行の2枚のパネルにしてページ下部を締める。
     影は弱く、角丸も控えめ。ページ面と自然につながる紙面の区画として見せる
     （SaaS 風のカードにはしない）。
   ※下層ページの CONTACT は従来どおり .ct3（このすぐ下）を使う。触っていない。
   ============================================================ */
.btm{margin:64px 0 48px;display:grid;grid-template-columns:1.35fr 1fr;gap:20px;align-items:stretch}
.btm__p{position:relative;border-radius:14px;padding:30px 34px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),0 4px 14px rgba(20,21,26,.05)}
.more--sub{color:var(--ink);opacity:.8}

/* ---------- ABOUT パネル：左に言葉、右に写真3枚 ---------- */
/* ★2026-09-26 見出しのコピーが「変わる時代へ、変わらない情熱で挑む。」に変わり、
     2行目が11字になった（旧コピーの最長行は10字）。文字の列が 269px しかなく
     「む。」だけが3行目に残っていたので、写真側を .94 → .84 に譲って文字の列を広げる。
     あわせて下の body.is-top .abp__ttl の文字も 2vw/33 → 1.95vw/30 に。
     実測：1100 / 1280 / 1366 / 1920 の4幅すべてで2行に収まる */
.abp{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:0 24px;align-items:center}
.abp__en{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.abp__ttl{font-size:clamp(21px,2vw,29px);font-weight:900;line-height:1.42;letter-spacing:-.02em;margin:12px 0 13px}
.abp__ttl em{font-style:normal;color:var(--red)}
.abp__lead{font-size:15px;line-height:1.95;color:var(--ink2);max-width:23em}
.abp__links{display:flex;flex-direction:column;align-items:flex-start;gap:11px;margin-top:19px}
.abp__links .more{margin-top:0}
/* 写真：象徴的な1枚だけ。コラージュにしない。
   ★比率は原本と同じ 4:3（1600x1200）にして、過度なトリミングを避ける。
     縦位置はパネルの中央付近（.abp の align-items:center による）。
     空いた余白は装飾で埋めない */
.abp__ph{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0f1013;
  box-shadow:0 6px 14px rgba(20,21,26,.12)}
.abp__ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 立体装飾（2026-09-14）：写真の右下から少しはみ出す位置。文字・写真の主要部・CONTACT 側には掛からない。
   .fl__in でごくゆっくり浮遊（--dur 11s／--dy 5px）。動きを減らす設定では静止 */

/* ---------- CONTACT パネル：見出し → CTA → 補助のビジュアル ---------- */
.ctp{display:flex;flex-direction:column}
.ctp__en{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.ctp__ttl{font-size:clamp(19px,1.7vw,25px);font-weight:900;line-height:1.45;letter-spacing:-.02em;margin:12px 0 12px}
.ctp__lead{font-size:14.5px;line-height:1.9;color:var(--ink2)}
/* ★下段：左にボタン、右に補助のビジュアル。
     縦に積むとボタン56px＋画像140px がそのままパネルの高さになってしまうため、
     1行にまとめて「問い合わせ導線のひとまとまり」として見せる */
.ctp__act{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.ctp .btn-ct--lg{margin:0;flex:none}
/* 自前 CG の 3D（2026-09-16 差し替え）。CTA より目立たせないため小さく。
   ★透過 PNG なので multiply は使わない（影まで二重に暗くなる）。地に溶かす処理は不要 */
/* ★右端へ押しやると別要素に見えるので margin-left:auto はやめ、ボタンのすぐ隣に置く */
/* 2026-09-23：絵が横長（約4:3）から縦長め（約 1.1:1）に戻った。
   幅で決めると CTA より背が高くなって目立つので、**高さで揃えて**幅は比率に任せる。
   旧版（656×498）を 164px 幅で出していたときの高さ 124px に合わせてある */
.ctp__vis{display:block;width:auto;height:128px;max-width:none;max-height:none;margin:0}

/* ============================================================
   STEP5 CONTACT：大きなコピー＋CTA＋装飾1つ
   ============================================================ */
.ct3{position:relative;margin-top:84px;padding:60px 0 20px;border-top:1px solid var(--line);text-align:center}   /* ★2026-09-28 先方ご指示：センターに移動 */
.ct3__en{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.ct3__ttl{font-size:clamp(26px,3.2vw,44px);font-weight:900;line-height:1.3;letter-spacing:-.02em;margin:10px 0 14px;position:relative;z-index:2}
.ct3__lead{font-size:16px;line-height:2;color:var(--ink2);max-width:min(54em,100%);margin-inline:auto;position:relative;z-index:2}   /* ★2026-09-28 先方ご指示：「ださい。」が2行目に落ちないよう1行に収まる幅へ（34em→54em）。ページごとに文言の長さが違う（25〜52字）ので、いちばん長い service-tv に合わせた */
.ct3 .btn-ct--lg{margin:24px auto 0;position:relative;z-index:2}   /* ★2026-09-28 先方ご指示：文字スペースの中央に配置 */
/* ★2026-09-28 先方ご指示：右側の赤丸は無しにして、両脇を ABOUT「7つの価値」と同じ『丸のぼかし』に。
     .ov__orb と同じ blur(12px)・opacity .6。html,body の overflow-x:clip があるので負の位置でも横スクロールは出ない */
.ct3__orb{position:absolute;z-index:0;pointer-events:none;filter:blur(12px);opacity:.6}
.ct3__orb--l{left:-70px;bottom:20%;width:200px;height:200px}
.ct3__orb--r{right:-40px;top:22%;width:150px;height:150px;opacity:.7}

/* ============================================================
   レスポンシブ（TOP展開部分）。同詳細度は後勝ちなので、必ずこのブロックを末尾に置く
   ============================================================ */
@media (max-width:1080px){
  .chap{gap:36px}
  /* 2つの事業（タブレット）：1事業ずつ縦に。各事業内は TEXT ＋ CUBE の横関係を維持 */
  .biz{grid-template-columns:1fr;gap:36px}
  .bz{grid-template-columns:minmax(0,1fr) auto;gap:0 24px}
  .bz__obj{width:clamp(280px,34vw,360px)}
  .wk3s{gap:14px}
  .wk3__cap{padding:0 20px 20px}
}
@media (max-width:860px){
  /* FV：KVクラスターの外周タイルが左右へ出るぶんを切る（横スクロール防止） */
  .hero{overflow-x:clip}
  /* SERVICE：1列。写真→文字の順 */
  .chap{grid-template-columns:1fr;gap:22px;padding:36px 0}
  .chap__tx,.chap--rev .chap__tx{order:2}
  .chap__vis,.chap--rev .chap__vis{order:1}
  .chap__vis .mtile{aspect-ratio:16/10}
  .chap__lead{max-width:none}
  /* 2つの事業：縦に 01 テキスト → 4キューブ → VIEW MORE → 02 … 。キューブは SP でも 2×2 */
  .biz{grid-template-columns:1fr;gap:64px;margin-top:8px}
  .bz{grid-template-columns:1fr;gap:0}
  .bz__tx{grid-column:1;grid-row:1}
  .bz__obj{grid-column:1;grid-row:2;padding-top:18px;width:min(100%,340px);margin-inline:auto}
  .bz__cta{grid-column:1;grid-row:3;margin-top:8px}
  /* SP も PC と同じ階層（事業名が最大・01 は添える番号）。2026-09-15 第3回打合せ */
  .bz__no{font-size:18px}
  .bz__ja{font-size:26px}
  /* WORKS：3枚を縦に。見出しと導線も縦 */
  .wk3h{flex-direction:column;align-items:flex-start;gap:10px;margin-top:72px}
  .wk3s{grid-template-columns:1fr;gap:16px;margin-top:22px;padding-bottom:8px}
  .wk3__m{--ar:16/10}
  .wk3__cap{padding:0 22px 20px}
  .wk3__ja{font-size:19px}
  /* 2列幅のタイポタイル：見出しを1行に収める */
  .mtile--type{padding:16px 16px}
  .mtile__k{font-size:10px;letter-spacing:.02em;white-space:nowrap}
  .mtile__t{font-size:19px}
  /* HISTORY：固定せず縦のタイムライン。左右へ交互にずらして時間の流れを出す。視差は data-px-sp（js/motion.js） */
  /* 年代テキストへの被り対策（2026-09-09）：視差の最大移動量（約20〜24px）より広い余白を年代の下に確保し、補助として年代を前面に。
     移動量そのものは index.html の data-px-sp（PC比 1/2）で抑えている */
  /* ABOUT / CONTACT */
  /* 下段：横並びをやめて縦積み（ABOUT → CONTACT の順）。旧版ほど縦長にしない */
  .btm{margin:44px 0 36px;grid-template-columns:1fr;gap:14px}
  .btm__p{padding:26px 22px;border-radius:12px}
  .abp{grid-template-columns:1fr;gap:20px 0}
  .abp__ttl{font-size:22px;word-break:auto-phrase}
  .abp__lead{max-width:none}
  .abp__ph{aspect-ratio:16/9}   /* SP は横いっぱい。パネルが縦長になりすぎないよう横長の比率にする */
  .ctp__ttl{font-size:21px;word-break:auto-phrase}
  /* SP は読みやすさ優先で縦積みに戻す。上下の余白だけ整理する */
  .ctp__act{margin-top:0;padding-top:18px;flex-direction:column;align-items:flex-start;gap:0}
  .ctp__vis{width:auto;height:136px;max-width:100%;max-height:none;margin:14px auto 0}   /* SP も高さで揃える */
  .ct3{margin-top:80px;padding:64px 0 16px}
  .ct3__ttl{font-size:23px;word-break:auto-phrase}          /* 見出しは意図した <br> 位置で改行（語中折れ・末尾孤立を防ぐ） */
  .ct3__orb{width:120px;height:120px;right:-14px;top:-30px}
}

/* ============================================================
   SERVICE 配下（2026-09-09）：service.html / service-tv.html / service-corporate.html
   TOPのデザイン言語（角丸メディアタイル・大きな英字見出し・余白・soft motion）を引き継ぎつつ、
   「何ができる会社か」を理解させることを優先する。3D演出・浮遊オブジェクトは使わない。
   共通トークンは TOP展開ブロック（--ease-soft / --dur-soft / --tile-r / .mtile / .rv / [data-px]）を再利用。
   ============================================================ */

/* ---------- 共通：セクションの間隔と見出し ---------- */
.sv-sec{margin-top:84px}
.sv-hd{display:flex;flex-direction:column;align-items:flex-start}
.sv-hd__en{font-size:clamp(34px,4.6vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1}
.sv-hd__ja{font-size:15px;font-weight:700;margin-top:14px}
.sv-hd__lead{font-size:16px;line-height:2.05;color:var(--ink2);margin-top:20px;max-width:36em}
/* ★2026-09-24 見出しの隣に置く3Dアイコン（トップ「20年の歩み」と同じ素材の背景を抜いたもの）。
   ライブ配信の区画は黒地なので multiply は使えない＝透過版を使う */
.sv-hd__row{display:flex;align-items:center;gap:20px}
.sv-hd__ic{width:76px;height:76px;flex:none;object-fit:contain}

/* ---------- 共通：下層ヒーロー（TOPの3Dクラスターは使わない） ---------- */
/* ★下層ページは開いた直後から情報が見えるようにする。hero で1画面を使い切らない */
.svh{padding-top:calc(var(--hdr) + 34px)}
.svh .crumb{margin-bottom:26px}
.svh__ttl{font-size:clamp(40px,6vw,84px);font-weight:900;letter-spacing:-.035em;line-height:.98}
.svh__ttl small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:13px;color:var(--ink)}
.svh__copy{font-size:clamp(20px,2.1vw,29px);font-weight:900;line-height:1.5;letter-spacing:-.01em;margin-top:20px}
.svh__tags{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--ink3);margin-top:16px;line-height:2}
.svh__tags i{font-style:normal;color:var(--red);margin:0 .2em}
/* 映像スロット：写真で完成させ、映像素材が届いたら img を <video muted playsinline loop data-autoplay> に差し替えるだけでよい */
.mslot{display:block;aspect-ratio:var(--ar,21/9)}
/* ★正方形に近い比率だと1枚で画面を使い切るので横長に切る（素材は 1600×1200 あるので粗くならない） */
.svh__media{margin-top:30px}
.svh__media .mtile{aspect-ratio:16/6.6}

/* CORPORATE CONTENT のヒーローは構図を変える：左上に見出し、右に少し下げた大きな写真、左下に intro */

/* ---------- SERVICE INDEX：2つの章（TOPの .chap を大判にして再利用） ---------- */
/* 章全体が「入口」：CTA の <a> を ::after で章いっぱいに広げる。hover/focus で写真がわずかに寄り、矢印が進み、CTA文が赤くなり、地がほんの少し白くなる */
.svi{margin-top:24px}
.svi .chap{
  position:relative;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:center;
  padding:80px 40px;margin:0 -40px;border-radius:calc(var(--tile-r) + 8px);
  transition:background var(--dur-soft) var(--ease-soft);
}
.svi .chap+.chap{border-top:0}
.svi .chap+.chap::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--line)}
.svi .chap:hover,.svi .chap:focus-within{background:rgba(255,255,255,.62)}
.svi .chap__no{display:block;font-size:clamp(26px,3vw,40px);font-weight:900;color:var(--red);letter-spacing:-.02em;line-height:1;margin-bottom:22px}
.svi .chap__en{font-size:clamp(40px,5.4vw,76px);line-height:1.02}
.svi .chap__ja{font-size:16px;margin-top:16px}
.svi .chap__lead{font-size:17px;line-height:2.1;max-width:26em;margin-top:26px}
/* 子ページの予告：タグではなく、静かなタイポグラフィの一行 */
.svi .chap__kw{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);max-width:26em}
.svi .chap__kw b{display:block;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red);margin-bottom:8px}
.svi .chap__kw p{font-size:13.5px;font-weight:700;line-height:2;letter-spacing:.02em;color:var(--ink2)}
.svi .chap__kw i{font-style:normal;font-weight:400;color:var(--ink3);margin:0 .35em}
.svi .chap__kw .nb{white-space:nowrap}                 /* 「YOUTUBE / SNS」「CORPORATE / PUBLIC」は語の途中で折らない */
/* 写真と CTA：CTA は常に写真の右下（矢印＝出口を写真の右端に揃える。01/02 で同じ規則） */
.svi .chap__vis{display:flex;flex-direction:column;align-items:flex-end;gap:24px}
.svi .chap__vis .mtile{width:100%;aspect-ratio:4/3}
.svi .chap:hover .mtile img,.svi .chap:focus-within .mtile img{transform:scale(1.02)}
/* CTA：文＋英語ラベル＋円の矢印。::after を章全体（position:relative の .chap）に広げてクリック領域にする */
.chap__cta{display:inline-flex;align-items:center;gap:18px;color:inherit}
.chap__cta::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.chap__cta:focus-visible{outline:none}
.svi .chap:focus-within{box-shadow:0 0 0 2px rgba(228,0,43,.35)}
.chap__cta-tx{display:flex;flex-direction:column;gap:3px;text-align:right}          /* 文は矢印側に揃える */
.chap__cta-tx b{font-size:15px;font-weight:900;letter-spacing:-.01em;line-height:1.4;transition:color var(--dur-soft) var(--ease-soft)}
.chap__cta-tx small{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--ink3)}
.chap__arw{flex:none;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--red);display:grid;place-items:center;transition:background var(--dur-soft) var(--ease-soft)}
.chap__arw svg{width:22px;height:8px;stroke:var(--red);fill:none;stroke-width:1.6;transition:transform var(--dur-soft) var(--ease-soft),stroke var(--dur-soft) var(--ease-soft)}
.svi .chap:hover .chap__arw,.svi .chap:focus-within .chap__arw{background:var(--red)}
.svi .chap:hover .chap__arw svg,.svi .chap:focus-within .chap__arw svg{stroke:#fff;transform:translateX(5px)}
.svi .chap:hover .chap__cta-tx b,.svi .chap:focus-within .chap__cta-tx b{color:var(--red)}

/* ---------- TV PROGRAM：5つのジャンル（PC＝左ナビ＋右メディアのstickyショーケース／SP＝縦の連なり） ---------- */
/* DOMは1つ。PCでは各ジャンル(.gn__it)を display:contents にして、見出し・メディア・説明を grid の別セルへ振り分ける。
   メディアと説明は右列の同じセルに重ねて、JSが縦スクロール量からゆっくり切り替える（js/service.js） */
@media (max-width:860px){
  /* hero も SP ではさらに短く */
  .svh__media .mtile{aspect-ratio:16/9}
  .brg{margin-top:60px}
  .ct3{margin-top:60px;padding:44px 0 16px}
}

.gn__pin{position:relative;height:calc(100vh * 5 + 20vh)}     /* 5ジャンル×約100vh＝時間を進める量（旧実装。現在は未使用） */
.gn__stage{
  position:sticky;top:0;height:100vh;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:auto repeat(5,auto) auto;
  column-gap:72px;align-content:center;
}
.gn__hd{grid-column:1;grid-row:1;margin-bottom:22px}
.gn__it{display:contents}
.gn__ttl{
  grid-column:1;display:flex;align-items:baseline;gap:16px;padding:15px 0;border-top:1px solid var(--line);
  opacity:.3;transition:opacity 1.1s var(--ease-soft);cursor:default;
}
.gn__it:nth-child(2) .gn__ttl{grid-row:2}
.gn__it:nth-child(3) .gn__ttl{grid-row:3}
.gn__it:nth-child(4) .gn__ttl{grid-row:4}
.gn__it:nth-child(5) .gn__ttl{grid-row:5}
.gn__it:nth-child(6) .gn__ttl{grid-row:6}
.gn__it.is-on .gn__ttl{opacity:1}
.gn__no{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--red);flex:none;width:26px}
.gn__en{font-size:clamp(22px,2.3vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.gn__ja{font-size:12px;font-weight:700;color:var(--ink2);margin-left:auto}
/* メディア：右列で5枚を重ねる。opacity と scale は JS が進捗から与える（止めれば止まる） */
.gn__m{grid-column:2;grid-row:1/7;align-self:center;aspect-ratio:4/3;opacity:0;transform:scale(1.04);will-change:opacity,transform}
.gn__it:first-child .gn__m,.gn__it:nth-child(2) .gn__m{opacity:1;transform:none}   /* JS前の初期表示 */
.gn__desc{
  grid-column:2;grid-row:7;margin-top:24px;font-size:14px;line-height:2;color:var(--ink2);max-width:30em;
  opacity:0;translate:0 10px;transition:opacity .9s var(--ease-soft),translate .9s var(--ease-soft);
}
.gn__it.is-on .gn__desc{opacity:1;translate:none}

/* ---------- TV PROGRAM：SELECTED PROGRAMS（見出しの周りにロゴを大小で置くロゴフィールド） ---------- */
/* ★番組ロゴは権利者の許諾条件により改変不可：等比のまま白い面に収める。グレースケール化・切り抜き・色被せはしない */
.lf{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(0,auto);gap:18px;align-items:center;margin-top:30px}
.lf__hd{grid-column:5/9;grid-row:2/4;text-align:center;align-self:center;padding:14px 0}
.lf__hd .sv-hd{align-items:center}
.lf__hd .sv-hd__lead{text-align:center;max-width:22em}
.lf__hd .more{margin-top:26px}
.lf__lg{opacity:.9;transition:opacity var(--dur-soft) var(--ease-soft)}
.lf__lg:hover{opacity:1}
.lf__lg:hover img{transform:scale(1.03)}
.lf__lg .mtile--logo{aspect-ratio:16/10;grid-template-rows:100%;grid-template-columns:100%}   /* トラックを面に固定：auto行だと縦長ロゴの内在高さで行が伸び、imgの%が効かず下が切れる */
.lf__lg .mtile--logo img{width:90%;height:84%}          /* ロゴフィールドでは面に対して大きめに（等比のまま。改変ではない）。★2026-09-23 キービジュアル系に差し替えたので 78/70 → 90/84 */
/* 大小：L=3列強・M=2〜3列・S=2列。視線が中央の見出しを回るように置く */
.lf__lg--1{grid-column:1/4;grid-row:1}
.lf__lg--2{grid-column:4/6;grid-row:1;margin-top:40px}
.lf__lg--3{grid-column:8/10;grid-row:1;margin-top:-20px}
.lf__lg--4{grid-column:10/13;grid-row:1}
.lf__lg--5{grid-column:1/3;grid-row:2;margin-left:24px}
.lf__lg--6{grid-column:3/5;grid-row:2/4}
.lf__lg--7{grid-column:9/11;grid-row:2/4}
.lf__lg--8{grid-column:11/13;grid-row:3;margin-right:12px}
.lf__lg--9{grid-column:2/5;grid-row:4}
.lf__lg--10{grid-column:5/7;grid-row:4;margin-top:36px}
.lf__lg--11{grid-column:8/11;grid-row:4;margin-top:-12px}
/* 2行にまたがる2枚は縦長の面（縦長ロゴの Going! と 24時間テレビを収める） */
.lf__lg--6 .mtile--logo,.lf__lg--7 .mtile--logo{aspect-ratio:4/5}

/* ---------- TV PROGRAM：4つの力（タイポグラフィ中心） ---------- */
.st__list{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;margin-top:28px}
/* ★2026-09-28 先方ご指示「上記にならい、OUR STRENGTHS の始まりも少し中央寄りに」 */
@media (min-width:861px){ #strengths .sv-hd{padding-left:64px} }
/* ★2026-09-29 河野さんご指摘「OUR STRENGTHS の 01 と 03 をもっと右に（01 が 5 GENRES の
     各ロゴと同じくらいの位置に）」。5 GENRES は見出しの「5」もアイコンも 64px で揃っているのに、
     ここは見出し 64px／01 が 0px でずれていた。左の列（01・03）だけ 64px 右へ寄せて揃える。 */
@media (min-width:861px){ #strengths .st__it:nth-child(odd){padding-left:64px} }
/* ★2026-09-29 先方「01から02の横並びの間隔はそのままで、左右両端のスペースが同じ間隔に
     なるように、01〜04全体を少し右にずらして下さい。OUR STRENGTHS の文字の位置はそのままでOK」
   ★ご指摘は「目に付く内容」（数字・見出し・絵・説明文）で見たときの左右差。
     要素の箱（薄い罫線を含む枠）は左右対称だが、中身で見ると右が空いている。
     画素で測った実測（左の余白 − 右の余白）：
       1280 +3 ／ 1366 −33 ／ 1440 −64 ／ 1600以上 −92（広い画面ほど右が空く）
     ★1600px 以上は器が最大幅（1280px）で止まるため、差は −92 で一定になる。
   ★固定値だとどこかの幅で崩れるので、画面幅に連動させた。
     必要量は 1280 で 0／1366 で約27／1600以上で約61。
     この式での実測：1280 +3 ／ 1366 −5 ／ 1440 −12 ／ 1600以上 −1（全幅で ±12px 以内）
   ★01/03 の 64px（⑦「OUR の O の位置から始まるように」）はそのまま活かす。 */
@media (min-width:861px){
  #strengths .st__list{ padding-left: clamp(0px, calc((100vw - 1280px) * 0.22), 61px) }
}
/* ★2026-09-28 先方ご指示「制作体制の英語表記も上記と始まりが同じ位置からに」
     ＋「下の説明部分（企画/構成/演出～）は、2行でなく1行の方がよいですかね？？」
     .sv-hd__lead は他ページと共用なので #production に限定して広げる（51字＝1行に収まる幅） */
@media (min-width:861px){
  #production .sv-hd{padding-left:64px}
  #production .sv-hd__lead{max-width:none}
}
/* ★2026-09-28 先方ご指示（修正依頼⑥）：YOUTUBE/SNS と LIVE STREAMING の下の説明文を1行に */
@media (min-width:861px){ #youtube .sv-hd__lead, .live .sv-hd__lead{max-width:none} }
.st__it{padding:26px 0 28px;border-top:1px solid var(--line)}
/* ★2026-09-24 案A：番号と英語を1行に並べるので番号を少し小さく、日本語は「大きくする」ご指示どおり 14→clamp(18,1.6vw,22) */
.st__no{font-size:clamp(26px,2.5vw,34px);font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--red)}
.st__en{font-size:clamp(17px,1.55vw,23px);font-weight:900;letter-spacing:-.01em;line-height:1.15;margin-top:0}
.st__ja{font-size:clamp(18px,1.6vw,22px);font-weight:900;letter-spacing:-.01em;margin-top:10px}
.st__tx{font-size:15px;line-height:1.95;color:var(--ink2);margin-top:12px;max-width:30em}

/* ---------- 次の事業へ続く章（ブリッジ）：黒い面に大きなコピー ---------- */
/* ★2026-09-18 未使用：配下間の遷移は .wnext に統一（.brg は廃止。定義は残置） */
.brg{margin-top:84px}
.brg__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;
  padding:64px 72px;border-radius:var(--tile-r);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#2a2c34 0%,#16171c 60%,#0e0f13 100%);
  box-shadow:0 24px 40px rgba(20,21,26,.16);transition:box-shadow var(--dur-soft) var(--ease-soft);
}
.brg__in:hover{box-shadow:0 30px 52px rgba(20,21,26,.22)}
.brg__lb{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red-l)}
.brg__ttl{font-size:clamp(32px,4.6vw,64px);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-top:18px}
/* ページ名を見出しに使う場合の日本語（他ページの見出しと同じ添え字の形） */
.brg__ttl small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:14px;color:#c6cad6}
.brg__lead{font-size:16px;line-height:2;color:#c6cad6;margin-top:22px;max-width:30em}
.brg__in .more{color:#fff;margin-top:30px;font-size:12px}
.brg__in .more svg{stroke:#fff}
.brg__in:hover .more svg{transform:translateX(6px)}
.brg__vis .mtile{aspect-ratio:4/3}
.brg__in:hover .mtile img{transform:scale(1.03)}
/* 土台へ戻る導線（CORPORATE 側・ROOT / 01）：面を持たないフラットな章（2026-09-09）
   TV 側の .brg（NEXT / 02・黒い面＋写真）に対して「原点へ静かに戻る」性格。上下の細いグレーの罫・余白・文字だけで構成し、
   赤はラベル・CTA・矢印の小さなアクセントに限定。hover は矢印 6px・見出しがわずかに薄く・面がごく薄く（.9s / ease-soft） */
/* ★2026-09-18 未使用：配下間の遷移は .wnext に統一（.xr は廃止。定義は残置） */
.xr{margin-top:96px}
.xr__in{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 48px;padding:44px 0 46px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);transition:background-color var(--dur-soft) var(--ease-soft)}
.xr__lb{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.xr__ttl{font-size:clamp(26px,3vw,40px);font-weight:900;line-height:1.1;letter-spacing:-.03em;margin-top:12px;transition:opacity var(--dur-soft) var(--ease-soft)}
.xr__lead{font-size:16px;line-height:2;color:var(--ink2);margin-top:14px;max-width:30em}
.xr__in .more{margin-top:0;font-size:12px;padding-bottom:6px}
.xr__in:hover{background:rgba(255,255,255,.45)}
.xr__in:hover .xr__ttl{opacity:.72}
.xr__in:hover .more svg{transform:translateX(6px)}
.xr__in:focus-visible{outline:2px solid var(--red);outline-offset:6px}

/* ---------- CORPORATE CONTENT：制作体制（工程ではなく、組み合わせられる能力の環） ---------- */
/* ★2026-09-24 河野さんご指摘「制作体制のアイコンが小さい」への対応（実測で詰めた値）。
   ・アイコン 74×60 → 118×96（1.6倍）。カードは 110×132 → 144×168 になる
   ・円の直径 760 → 620。ただし見かけの直径は「配置半径 R ＋ カードの大きさ」で決まるので、
     カードが大きくなったぶん R の係数を .38 → .42 に上げ、カード同士と中心円の間隔を確保した
   ・カードの左右余白 18px → 13px（隣り合うカードが 20px 重なったため）
   ・中心円 44% → 42%／余白 9% → 7%／文字 25px → 20px
     （円を縮めたのに文字が元のままだと4行に折り返し、grid が縦に伸びて楕円になった）
   実測（1366×768）：見かけの直径 663px ＜ 画面 768 − 固定ヘッダー 86 = 682px＝1画面に収まる。
   カード同士の重なり 0／中心円との最小すき間 3px（運用・分析）。SP は下のメディアクエリで別値 */
.ps__ring{position:relative;width:min(620px,100%);aspect-ratio:1/1;margin:56px auto 0;--R:calc(min(620px,100vw - 40px) * .42)}
.ps__ring::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(20,21,26,.24)}
.ps__core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:37%;aspect-ratio:1/1;border-radius:50%;   /* ★2026-09-28 先方ご指示「OUR TEAM の白丸はもう少し小さくてOK」42%→37% */
  background:#fff;box-shadow:var(--shadow-m);display:grid;place-items:center;text-align:center;padding:4.6%;
  /* ★padding の % は「自分の幅」ではなく親（.ps__ring 620px）に対して解くので、円を小さくしても余白は 43px のまま残り、
     内側が 142px しか無くなって『目的に合わせ／て、』と折れていた。円の縮小(42→37%)に合わせて 7%→4.6% に。 */
}
/* ★2026-09-24 先方「OUR TEAM の文字がセンターでなく左寄りになっている」。
     原因は行末の「、」「。」。約物は全角ぶんの箱を取るのに墨は箱の左下にしかないので、
     行の箱を中央に置いても、目で見える墨の中央は左にずれる（実測 1行目 -6.5px／2行目 -8.0px＝約 0.3em）。
     文言は一字も変えず、行そのものを約物の空き半分ぶん右へ寄せて墨の中央を円の中央に合わせる */
.ps__core b{display:block;font-size:clamp(14px,1.5vw,20px);font-weight:900;line-height:1.55;letter-spacing:-.01em;
  position:relative;left:.3em}
.ps__core small{display:block;font-size:10.5px;font-weight:900;letter-spacing:.18em;color:var(--red);margin-bottom:12px}
/* モジュール：環の上に等間隔で置く（--a は角度）。順序を持たない＝工程ではないことを形で示す */
.ps__mod{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--R)) rotate(calc(var(--a) * -1));
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 13px 12px;border-radius:14px;
  background:linear-gradient(158deg,#ffffff,#eef0f5);box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 10px 24px rgba(20,21,26,.09);
  white-space:nowrap;transition-delay:var(--dl,0s);
}

/* ★2026-09-24 7つの機能の3Dアイコン。台座の見かけの幅は7点でそろえてあるので、
   幅だけ固定すれば台座が同じ大きさで並ぶ。高さは絵によって違うので下ぞろえの箱に収める */
.ps__ic{display:block;width:118px;height:96px;object-fit:contain;object-position:50% 100%;margin-bottom:2px}
.ps__mod b{font-size:11px;font-weight:900;letter-spacing:.14em}
.ps__mod span{font-size:13px;font-weight:700}
/* .rv の出現は transform を使わず opacity/translate なので、rotate 配置と衝突しない */

/* ============================================================
   SERVICE 配下：レスポンシブ（同詳細度は後勝ち。必ずこのブロックを末尾に置く）
   ============================================================ */
@media (max-width:1080px){
  .sv-sec{margin-top:64px}
  .svi .chap{gap:40px;padding:60px 20px;margin:0 -20px}
  .svi .chap+.chap::before{left:20px;right:20px}
  .gn__stage{column-gap:40px}
  .brg__in{padding:48px 44px;gap:32px}
}
@media (max-width:860px){
  .sv-sec{margin-top:42px}
  .svh{padding-top:calc(var(--hdr) + 22px)}
  .svh__copy{margin-top:22px}
  .svh__media{margin-top:26px}
  .mslot{--ar:4/3}
  /* SERVICE INDEX：番号・見出し・説明・予告 → 写真 → CTA の順（DOM順のまま）。hover の地色は出さない */
  .svi .chap{grid-template-columns:1fr;gap:26px;padding:48px 0;margin:0;border-radius:0;background:none !important;box-shadow:none !important}
  .svi .chap+.chap::before{left:0;right:0}
  .svi .chap__tx,.svi .chap--rev .chap__tx{order:1;display:block}
  .svi .chap__vis,.svi .chap--rev .chap__vis{order:2;align-items:stretch;gap:18px}
  .svi .chap__no{font-size:26px;margin-bottom:14px}
  .svi .chap__ja{margin-top:10px}
  .svi .chap__lead{margin-top:18px;max-width:none}
  .svi .chap__kw{max-width:none;margin-top:22px;padding-top:16px}
  .svi .chap__vis .mtile{aspect-ratio:4/3}
  .chap__cta{justify-content:space-between;gap:14px}
  .chap__cta-tx{text-align:left}
  .chap__cta-tx b{font-size:14px}
  .chap__arw{width:50px;height:50px}
  /* 5つのジャンル：固定せず縦に並べる。各ジャンル＝番号・見出し／写真／説明 */
  .gn__pin{height:auto}
  .gn__stage{position:static;height:auto;display:block}
  .gn__hd{margin-bottom:0}
  .gn__it{display:block;margin-top:44px}
  .gn__ttl{border-top:0;padding:0;opacity:1 !important;flex-wrap:wrap}
  .gn__ja{margin-left:0;flex-basis:100%;padding-left:42px;margin-top:-2px}
  .gn__m{aspect-ratio:4/3;opacity:1 !important;transform:none !important;margin-top:18px;will-change:auto}
  .gn__desc{opacity:1 !important;translate:none !important;margin-top:16px;max-width:none}
  /* ===== SELECTED PROGRAMS：SP は「1枚のロゴパネル」に畳む（2026-09-22） =====
       PC は「1ロゴ＝1枚の大きな面」を見出しの周りに散らす構成。
       これを SP にそのまま落とすと大きな面が1枚ずつ縦に積まり、
       この区画だけで 1135px（PC の 712px より長い）のスクロールになる。
       その結果「たくさん手がけてきた」ではなく「1本ずつ紹介している」ように見えていた。
       SP は白い面を 1 枚だけ置き、その中に小さなロゴを敷き詰める
       （TOP の WORKS「番組制作実績」カードと同じ考え方＝量で見せる）。
       ・面の中に面（カードの中のカード）は作らない
         → パネル内のロゴは背景・影・光沢を外して平らに置く
       ・display:contents で見出し／リード／リンクをパネル直下の並びに引き出す
         → HTML は 1 文字も触らないので PC の見え方は変わらない
       ・番組ロゴは改変不可（権利者のご許諾条件）。等比のまま平たい枠に収めるだけ */
  .lf{
    display:flex;flex-wrap:wrap;justify-content:center;gap:5px 9px;margin-top:22px;
    padding:22px 16px 18px;border-radius:16px;background:#fff;text-align:left;
    box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),0 14px 30px rgba(20,21,26,.07);
  }
  /* ラッパーの箱だけを消し、中身をパネル直下の項目にする */
  .lf__hd,.lf__hd .sv-hd{display:contents}
  .lf__hd{text-align:left}   /* 親の text-align:center を戻す（箱は消えても継承は残る） */
  .lf .sv-hd__en{flex:0 0 100%;order:1;font-size:25px;line-height:1.08;margin:0}
  .lf .sv-hd__ja{flex:0 0 100%;order:2;font-size:13px;color:var(--ink2);margin:11px 0 6px}
  /* ロゴは 4 列。gap 9px × 3 を差し引いて 1 列分の幅を出す */
  .lf__lg{flex:0 0 calc(25% - 6.75px);order:3;margin:0 !important;opacity:1;
    transform:none !important}   /* js/motion.js の視差はインラインで入るので打ち消す（密集した盤がバラつくため） */
  .lf .sv-hd__lead{flex:0 0 100%;order:4;text-align:left;max-width:none;margin:13px 0 0;font-size:15px;line-height:1.9}
  .lf__hd .more{flex:0 0 100%;order:5;margin:11px 0 0}
  /* パネル内のロゴ：面を持たせない（白い地はパネルと共有） */
  .lf__lg .mtile--logo,.lf__lg--6 .mtile--logo,.lf__lg--7 .mtile--logo{
    aspect-ratio:4/3;background:transparent;box-shadow:none;border-radius:6px;padding:3px}
  .lf__lg .mtile--logo::before{display:none}
  .lf__lg .mtile--logo img{width:100%;height:100%}
  /* 4つの力：1列 */
  .st__list{grid-template-columns:1fr;gap:0;margin-top:20px}
  .st__it{padding:22px 0 24px}
  .st__tx{max-width:none}
  /* ブリッジ */
  .brg{margin-top:88px}
  .brg__in{grid-template-columns:1fr;padding:28px 22px;gap:20px}
  .brg__vis{order:-1}
  .brg__ttl{font-size:32px}
  /* 土台へ戻る導線：縦積み。CTA はコピーの下 */
  .xr{margin-top:72px}
  .xr__in{grid-template-columns:1fr;gap:20px;padding:34px 0 36px}
  .xr__ttl{font-size:26px}
  .xr__in .more{padding-bottom:0}
  /* ===== 制作体制：SP も「中心＋まわりに機能が集まる」図にする（2026-09-22）=====
       旧版は環を崩して縦積みのピル一覧にしていたが、この区画の意図
       「目的に合わせて、必要なチームを組む」が伝わらなかった。
       PC は極座標（角度 --a × 半径 --R）で環の上に置くが、SP 幅では
       半径だけが小さくなりカード幅は縮まないので、必ず隣同士が重なる。
       そこで SP は角度ではなく「上／斜め上／斜め下／下」の辺で置き、
       左右のカードは端に固定する（←幅がどんな端末でもはみ出さない）。
       斜めの 4 枚は上下端から固定距離で置くので、中心円と横に並ばずに済む */
  .ps__ring{
    position:relative;width:100%;max-width:430px;margin:24px auto 0;
    aspect-ratio:1/1.15;
    /* 高さの下限：中心円（枠幅の 46%）＋上下 2 段分。これを割ると
       斜めのカードが中心円に触るので、狭い端末ではこちらが効く。
       SP の両端余白は 20px 固定（--gut）なので、枠幅＝100vw - 40px */
    min-height:calc(min(100vw - 40px,430px) * .46 + 232px);
  }
  /* 構造の補助線：「中心のまわりに編成されている」ことを感じさせるだけの薄い楕円。
     カードの後ろに回るので、重なったところはカードが隠す */
  .ps__ring::before{display:block;inset:8% 17%;border-style:dashed;border-color:rgba(20,21,26,.17)}
  /* 中心：この区画の主役。円のまま残し、影も PC と同じ */
  .ps__core{
    position:absolute;left:50%;top:50%;translate:-50% -50%;
    width:46%;aspect-ratio:1/1;border-radius:50%;padding:5%;
    /* ↑% のパディングは「自分の幅」ではなく「親（.ps__ring）の幅」基準。
       10% にすると 35px も入り、中の幅が 91px まで痩せて文言が 4 行に割れた */
  }
  .ps__core small{font-size:9px;letter-spacing:.16em;line-height:1.4;margin-bottom:5px}
  .ps__core b{font-size:clamp(11px,3.4vw,13.5px);line-height:1.5}
  .ps__mods{display:block;margin:0}   /* 並べるのをやめ、子を環の上に置く */
  .ps__mod{
    position:absolute;inset:auto;transform:none;flex-direction:column;align-items:center;gap:1px;
    padding:8px 11px;border-radius:11px;max-width:46%;
  }
  /* ↑inset:auto と transform:none で PC の極座標配置を消す。
     消さないと対する辺を同時に指定したときに箱が引き伸ばされる */
  /* 行間を明示する。body の 1.85 を継承すると 2 行のカードが 60px になり、図全体が大きくなる */
  .ps__ic{width:58px;height:46px}
  .ps__mod b{font-size:9.5px;letter-spacing:.1em;line-height:1.2}
  .ps__mod span{font-size:12px;line-height:1.35}
  /* 位置：上2 → 斜め上2 → 斜め下2 → 下1 で環を一周する。
     並びは HTML の順番（1企画 2構成 3演出 4撮影 5編集 6キャスティング 7運用・分析）に対応。
     .rv の出現は translate を使うので、位置合わせは transform 側で行う（PC と同じ考え方） */
  .ps__mod:nth-child(1){right:50%;top:0;margin-right:5px}      /* 企画：上左 */
  .ps__mod:nth-child(2){left:50%;top:0;margin-left:5px}        /* 構成：上右 */
  .ps__mod:nth-child(6){left:0;top:60px}                       /* キャスティング：左上 */
  .ps__mod:nth-child(3){right:0;top:60px}                      /* 演出：右上 */
  .ps__mod:nth-child(5){left:0;bottom:60px}                    /* 編集：左下 */
  .ps__mod:nth-child(4){right:0;bottom:60px}                   /* 撮影：右下 */
  .ps__mod:nth-child(7){left:50%;bottom:0;transform:translateX(-50%);max-width:96%}   /* 運用・分析：下中央（長いので幅を使える位置に） */

  /* ===== ※上の配置は「極小幅用の退避図」。360px 未満だけこれを使う =====
       幅 340px を割ると、横方向（3時／9時）にノードを置いた時点で
       中心円に残る幅が 70px 前後しかなく、中心の文言が入らない（実測で確認）。
       その幅だけは斜め寄せの配置のままにする */
}
@media (max-width:640px){
  .svh__ttl{font-size:clamp(40px,12vw,56px)}
  .svh__copy{font-size:21px}
  .svh__tags{letter-spacing:.12em}
  .svi .chap__en{font-size:36px}
  .gn__en{font-size:24px}
  .brg__in{padding:30px 22px}
  .brg__ttl{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  .gn__m,.gn__desc,.gn__ttl{transition:none}
}

/* ============================================================
   WORKS 配下（2026-09-09）：works.html / works-tv.html / works-corporate.html / works-digital.html
   「何ができるか」ではなく「何をつくってきたか」を見せる。写真・番組ロゴ・案件ビジュアルを主役に、
   同じデザインシステム（.svh ヒーロー／.sv-hd 見出し／.mtile／.chap__cta 矢印／.ct3）で、内容ごとに見せ方を変える。
   映像は .mslot の img を <video> に差し替えるだけ（hover 再生＝data-hover-video／画面内再生＝data-autoplay。js/works.js）
   ============================================================ */

/* ---------- 共通：矢印つきリンク行の hover（.lk を付けた要素で使う） ---------- */
.lk:hover .chap__arw,.lk:focus-within .chap__arw{background:var(--red)}
.lk:hover .chap__arw svg,.lk:focus-within .chap__arw svg{stroke:#fff;transform:translateX(5px)}
.lk:hover .chap__cta-tx b,.lk:focus-within .chap__cta-tx b{color:var(--red)}
.lk:hover .mtile img{transform:scale(1.02)}

/* ---------- 共通：ヒーローのリード文（原稿の一文）と小見出し ---------- */
.svh__lead{font-size:16px;line-height:2.05;color:var(--ink2);margin-top:22px;max-width:38em}
.wsub{font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.01em;padding-bottom:14px;border-bottom:2px solid var(--ink);display:flex;align-items:baseline;gap:14px;margin-top:88px}
.wsub small{font-size:12px;font-weight:700;color:var(--ink2)}
.live .wsub{border-color:#fff;margin-top:72px}
.live .wsub small{color:#aeb3c2}

/* ---------- 共通：一覧（局名・クライアント ＋ タイトル）。1行＝<li>。追加は <li> をコピーするだけ ---------- */
.wlist{list-style:none}
.wlist li{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line)}
.wlist__k{font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--ink3)}
.wlist__t{font-size:15px;font-weight:700;line-height:1.6}
.wlist__wait{font-size:12.5px;color:var(--ink3);padding:16px 0 4px}                  /* 未支給：空欄で放置せず「準備中」と分かるように */

/* ---------- 共通：他カテゴリーへの導線（主＝白い面／従＝線だけ） ---------- */
.wnext{margin-top:120px;padding-top:36px;border-top:1px solid var(--line)}
/* 番組制作実績ページ：ON AIR → ARCHIVE → NEXT → CONTACT の間隔を詰める（他ページは従来どおり） */
.wnext--tight{margin-top:72px}
.ct3--tight{margin-top:56px}
.wnext__lb{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.wnext__lead{margin-top:12px;font-size:17px;font-weight:700;line-height:1.7;color:var(--ink)}   /* 2026-09-18：先方原稿の導線文（service-tv） */
.wnext__list{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.wnext__it{
  position:relative;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:28px 30px;border-radius:var(--tile-r);background:#fff;box-shadow:var(--shadow-s);color:inherit;
  transition:box-shadow var(--dur-soft) var(--ease-soft),transform var(--dur-soft) var(--ease-soft);
}
.wnext__it:hover{box-shadow:var(--shadow-m);transform:translateY(-3px)}
.wnext__it--sub{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.wnext__it--sub:hover{box-shadow:inset 0 0 0 1px var(--line),var(--shadow-s)}
.wnext__it b{display:block;font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.wnext__it small{display:block;font-size:12px;font-weight:700;color:var(--ink2);margin-top:6px}

/* ---------- WORKS INDEX：ショーケース（平面の Large / Medium / Small） ---------- */
.wsh{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 22px;align-items:start;margin-top:64px}
.wsh__it{display:block;color:inherit}
.wsh__it .mtile{aspect-ratio:var(--ar,16/10)}
/* 行を明示する（自動配置だと後ろの要素が次の行へ落ちて縦に間延びする） */
.wsh--1{grid-column:3/11;grid-row:1;--ar:16/9}
.wsh--2{grid-column:1/5;grid-row:2;--ar:4/3}
.wsh--4{grid-column:5/9;grid-row:2;--ar:1/1;margin-top:64px}
.wsh--3{grid-column:9/13;grid-row:2;--ar:4/3;margin-top:24px}
.wsh--5{grid-column:1/8;grid-row:3;--ar:16/9;margin-top:8px}
.wsh--6{grid-column:8/13;grid-row:3;--ar:4/3;margin-top:72px}

/* ---------- WORKS INDEX：3カテゴリーへの大きな導線（行全体がリンク＝stretched link） ---------- */
.wcat{margin-top:112px;border-top:1px solid var(--line)}
.wcat__it{
  position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:38px 28px;margin:0 -28px;border-radius:var(--tile-r);transition:background var(--dur-soft) var(--ease-soft);
}
.wcat__it::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:1px;background:var(--line)}
.wcat__it:hover,.wcat__it:focus-within{background:rgba(255,255,255,.62)}
.wcat__no{font-size:clamp(20px,2.2vw,28px);font-weight:900;color:var(--red);letter-spacing:-.02em}
.wcat__en{font-size:clamp(28px,4.2vw,58px);font-weight:900;letter-spacing:-.03em;line-height:1}
.wcat__ja{font-size:14px;font-weight:700;color:var(--ink2);margin-top:10px}
.wcat__it .chap__cta{position:static}

/* ---------- IMAGE HERO（SERVICE / WORKS 下層共通・2026-09-14）：ページタイトル＋直下のメイン画像を1つに統合 ----------
   目的は圧縮。100vh の巨大ヒーローにはせず、コンテンツ幅内・PC 約 400px／SP 320px。
   画像は <img>（absolute・cover）。object-position はページごとに --pos（PC）/ --pos-sp（SP）。
   文字は左下・白。overlay は左側だけ暗くする gradient（写真を潰さない）。装飾はラベル＋細い赤線のみ */
.svh--pvh{padding-top:calc(var(--hdr) + 22px)}
.svh--pvh .crumb{margin-bottom:14px}
.pvh{position:relative;height:clamp(360px,29vw,420px);border-radius:18px;overflow:hidden;background:#dfe2e8;box-shadow:0 10px 28px rgba(20,21,26,.10);isolation:isolate}
.pvh__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);display:block}
.pvh__ov{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.34) 42%,rgba(0,0,0,.10) 68%,rgba(0,0,0,0) 84%),
             linear-gradient(0deg,rgba(0,0,0,.26) 0%,rgba(0,0,0,0) 46%)}
.pvh__ct{position:absolute;left:0;bottom:0;z-index:2;padding:34px 40px 36px;max-width:min(62%,660px);color:#fff}
.pvh__lb{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:900;letter-spacing:.2em;color:#fff;opacity:.92;margin-bottom:14px}
.pvh__lb::before{content:"";width:18px;height:2px;background:var(--red)}
.pvh__ttl{font-size:clamp(34px,4.3vw,58px);font-weight:900;letter-spacing:-.035em;line-height:.98;color:#fff;text-shadow:0 1px 18px rgba(0,0,0,.25)}
.pvh__ttl small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:12px;color:#fff}
.pvh__copy{font-size:clamp(16px,1.5vw,20px);font-weight:900;line-height:1.5;letter-spacing:-.01em;margin-top:16px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.3)}
.pvh__lead{font-size:15px;line-height:1.85;color:rgba(255,255,255,.9);margin-top:12px;max-width:40em}
.pvh__tags{font-size:10.5px;font-weight:900;letter-spacing:.18em;color:rgba(255,255,255,.82);margin-top:14px;line-height:2}
.pvh__tags i{font-style:normal;color:var(--red-l);margin:0 .2em}
.svh--pvh + main > .sv-sec:first-child,.svh--pvh + main > .oa{margin-top:56px}
@media (max-width:860px){
  .svh--pvh{padding-top:calc(var(--hdr) + 16px)}
  .svh--pvh .crumb{margin-bottom:12px}
  .pvh{height:320px;border-radius:14px}
  .pvh__img{object-position:var(--pos-sp,var(--pos,50% 50%))}
  .pvh__ov{background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.40) 50%,rgba(0,0,0,.22) 100%),
                      linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 58%)}
  .pvh__ct{max-width:none;padding:22px 20px 24px}
  .pvh__lb{margin-bottom:10px}
  .pvh__ttl{font-size:clamp(30px,9vw,38px)}
  .pvh__ttl small{margin-top:9px;font-size:12px}
  .pvh__copy{font-size:15px;margin-top:12px}
  .pvh__lead{font-size:14.5px;line-height:1.7;margin-top:10px;max-width:none}
  .pvh__lead br{display:none}   /* SPは自然な折り返しに任せる（<br>との二重がけで語中が切れるのを防ぐ） */
  .pvh__tags{font-size:9.5px;letter-spacing:.12em;margin-top:10px}
  .svh--pvh + main > .sv-sec:first-child,.svh--pvh + main > .oa{margin-top:40px}
}

/* ---------- SERVICE 共通：summary（ヒーロー直下の導入。独立した INTRO 見出しにしない） ----------
   左＝短いリード（38%）／右＝本文（62%）。カード・囲み・背景色は使わず、下に hairline だけ */
.pvh__sum{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:12px 56px;align-items:start;margin-top:22px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.pvh__sum-lead{font-size:clamp(17px,1.5vw,21px);font-weight:900;line-height:1.55;letter-spacing:-.01em}
.pvh__sum-tx{font-size:16px;line-height:1.95;color:var(--ink2);max-width:min(83%,46em)}   /* ★2026-09-28 先方ご指示「右隣の説明文は、下の番組ロゴの右側の真ん中くらいまで横にのばす」。 36em（540px）で頭打ちになり、画面が広いほどロゴ中央に届かなかった（1600pxで84px不足）。 桁の上限 46em（＝和文46字・行長の上限）は残しつつ、列幅の83%で追従させる */

@media (max-width:860px){
  .pvh__sum{grid-template-columns:1fr;gap:8px;margin-top:18px;padding-bottom:20px}
  .pvh__sum-lead{font-size:16px}
  .pvh__sum-tx{font-size:15.5px;line-height:1.9;max-width:none}
}
/* ---------- 制作体制：370px 以上の SP は「正円の構造図」にする（2026-09-22） ----------
   縦長の楕円に見えるのをやめ、枠を正方形・破線を正円にし、
   7 つのノードを円周上に等間隔（360/7 = 51.43°）で並べる。
   下中央（180°）に運用・分析が来るよう 25.7° 回してあるので、
   縦軸に対して左右対称になる（上は 11 時と 1 時に 2 枚）。
   中心円を小さくして外周を内側へ寄せ、図として締める。
   差し込む位置は left/top の % –– % は包含ブロック基準なので枠の幅に追従する。
   （transform の % は自分の箱基準なので半径には使えない） */
@media (min-width:360px) and (max-width:860px){
  /* 図版は両端余白より 16px ずつ外側まで使う。正円にすると 9 時半のノードが
     中心に迫り、中心円に文言が入る幅が残らないため、横を 32px 稼ぐ */
  .ps__ring{aspect-ratio:1/1;min-height:0;width:calc(100% + 32px);max-width:none;margin:24px -16px 0}
  /* 破線は正円。半径はノード中心を置く円と同じ 35% なので、ノードが線の上に乗る */
  .ps__ring::before{
    inset:auto;left:50%;top:50%;translate:-50% -50%;
    width:70%;height:auto;aspect-ratio:1/1;border-radius:50%;
    border:1px dashed rgba(20,21,26,.17);
  }
  /* 中心円：46% → 34%。小さくした分だけ外周を内側に寄せられる。
     パディングは px（% は親の幅基準になって過大になるため） */
  .ps__core{width:min(38%,calc(50% - 56px));padding:12px}
  /* ↑狭い端末では「半径 − 60px」が効き、中心円が自動で小さくなる。
     9 時半の「キャスティング」が一番幅を取るので、その内側に必ず隔たりを残す */
  .ps__core small{font-size:8.5px;margin-bottom:4px}
  .ps__core b{font-size:clamp(11px,3.2vw,14px);line-height:1.45}
  /* ノード：円周に乗せるため少し小ぶりにし、大きさを揃える */
  .ps__mod{padding:6px 10px;gap:1px;border-radius:10px;max-width:none}
  .ps__ic{width:52px;height:42px}
  .sv-hd__row{gap:12px}
  .sv-hd__ic{width:54px;height:54px}
  .ps__mod b{font-size:9px}
  .ps__mod span{font-size:11px}
  /* 位置：中心から半径 35% の円周上。dx = 35% × sinθ、dy = -35% × cosθ
     （11時＝334.3° / 1時＝25.7° / 2半＝77.1° / 4半＝128.6° / 6時＝180° / 7半＝231.4° / 9半＝282.9°） */
  .ps__mod{transform:translate(-50%,-50%)}
  .ps__mod:nth-child(1){left:34.81%;top:18.46%;right:auto;bottom:auto;margin:0}   /* 企画：11 時 */
  .ps__mod:nth-child(2){left:65.19%;top:18.46%;right:auto;bottom:auto;margin:0}   /* 構成：1 時 */
  .ps__mod:nth-child(3){left:min(calc(100% - 52px),84.12%);top:42.21%;right:auto;bottom:auto}   /* 演出：3 時寄り */
  .ps__mod:nth-child(4){left:77.36%;top:71.82%;right:auto;bottom:auto}            /* 撮影：4 時半 */
  .ps__mod:nth-child(5){left:22.64%;top:71.82%;right:auto;bottom:auto}            /* 編集：7 時半 */
  .ps__mod:nth-child(6){left:max(52px,15.88%);top:42.21%;right:auto;bottom:auto}  /* キャスティング：9 時半 */
  /* 運用・分析：6 時。横長だと下の重心が強くなり楕円に見えるので、
     英字を 2 行に折って幅を他のノード並みに押さえる */
  .ps__mod:nth-child(7){left:50%;top:84%;right:auto;bottom:auto;white-space:normal;max-width:116px;text-align:center}
}
/* 幅に余裕が出たら図版は 430px で止め、中央に戻す */
@media (min-width:500px) and (max-width:860px){
  .ps__ring{width:430px;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
}

/* ---------- TV PROGRAM：カテゴリの色（ON AIR と ARCHIVE で共有） ----------
   色を使うのは「見出しの短い縦線」「見出しの英字」「面のごく薄い下地」だけ。本文・一覧は黒／濃灰のまま */
.cat-variety{--c:#e4002b;--cbg:rgba(228,0,43,.045)}
.cat-sports{--c:#2b6cc4;--cbg:rgba(43,108,196,.055)}
.cat-news{--c:#1f8a5b;--cbg:rgba(31,138,91,.055)}
.cat-info{--c:#b56a08;--cbg:rgba(181,106,8,.07)}   /* 白地で 4.2:1（#d8850e は 2.9:1 で不足） */
/* カテゴリ見出し：縦線＋英字＋小さな日本語。大きくしない */
.ch{position:relative;display:flex;align-items:baseline;gap:12px;padding-left:14px;font-size:16px;font-weight:900;letter-spacing:.06em;line-height:1;color:var(--c,var(--ink))}
.ch::before{content:"";position:absolute;left:0;top:0;width:3px;height:1em;background:var(--c,var(--ink));border-radius:2px}
.ch small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--ink2)}

/* ---------- TV PROGRAM：ON AIR（4カテゴリを 2×2 のパネルで一望。9/13 クライアント参考画像の配置） ----------
   上段は VARIETY 3件：SPORTS 2件 ＝ 7:5、下段は NEWS 2件：INFORMATION 2件 ＝ 1:1。
   パネルはカテゴリ色をごく薄く混ぜた白（サイトの白／薄灰の基調は崩さない）。番組ロゴは改変せず白い面に等比で収める */
.oa{margin-top:64px;scroll-margin-top:calc(var(--hdr) + 20px)}
.oz{display:grid;gap:18px;margin-top:30px}
.oz__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.oz__row--top{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.oz__zone{background:#fff;background:color-mix(in srgb,var(--c) 5%,#fff);border-radius:14px;padding:22px 22px 24px;scroll-margin-top:calc(var(--hdr) + 20px)}
.oz__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin-top:18px}
.oz__zone--3 .oz__g{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 番組カード：横長のロゴ面 → 局・時間 → 番組名 → 説明 → 小さな公式リンク。カード自体に枠や影は付けない */
.prg{display:flex;flex-direction:column;min-width:0}
/* 番組画像は現行サイト取得の 432×432（白地）。4:3 の白い面に等比で全体表示（cover で切らない）。余白 12px、枠線なし */
/* 画像は枠に絶対配置して寸法を枠の内寸に固定する（aspect-ratio 由来の高さに対する height:100% は
   ブラウザによって原寸に解釈され、下にはみ出して見切れるため grid＋% 指定は使わない） */
.prg__vis{position:relative;aspect-ratio:4/3;background:#fff;border-radius:10px;overflow:hidden}
.prg__vis img{position:absolute;inset:0;width:100%;height:100%;padding:12px;box-sizing:border-box;object-fit:contain;object-position:50% 50%;display:block}
.prg__mt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:12px}
.prg__net{font-size:10.5px;font-weight:900;letter-spacing:.06em;color:var(--ink3)}
.prg__tm{font-size:11px;font-weight:900;color:var(--red);letter-spacing:.02em}
.prg__ttl{font-size:14.5px;font-weight:900;line-height:1.4;margin-top:4px}
.prg__ttl small{display:block;font-size:11px;font-weight:700;color:var(--ink2);margin-bottom:2px}
.prg__tx{font-size:14.5px;line-height:1.75;color:var(--ink2);margin-top:8px}
.prg .more{margin-top:auto;padding-top:12px;font-size:10.5px;gap:8px}
.prg .more svg{width:16px}

/* ---------- TV PROGRAM：ARCHIVE（大きな見出し＋一覧性。周囲にロゴを静かに置く） ---------- */
.arc{margin-top:84px;position:relative}
.arc__deco{position:absolute;right:0;top:-16px;display:flex;align-items:flex-end;gap:18px;z-index:0}
.arc__d1{width:160px;translate:0 -30px}
.arc__d2{width:210px}
.arc__d3{width:140px;translate:0 26px}
.arc__g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 72px;margin-top:56px}
/* ★過去の制作実績（9/13 受領）：クライアント本文の指示どおり
   「バラエティ・スポーツ・報道の3つ並びで、報道の下に情報・ドキュメンタリー」。
   件数が 29／26／18+9=27 なので3列がほぼ揃う */
.arc__g--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 30px;margin-top:34px}
/* ★3列にすると右上の装飾ロゴ（辻井・24時間テレビ・DayDay）が3列目の見出しに被る。
   2列時代の右上の空きを前提にした飾りなので、3列版では出さない（同じロゴは ON AIR に出ている） */
.arc--3 .arc__deco{display:none}
.arc__sub{margin-top:30px}
/* 報道の下の見出しは英字が長く、3列の幅では日本語の小見出しが右で折り返す。英字の下に落とす */
.arc__sub .ch{flex-direction:column;align-items:flex-start;gap:7px}
/* 文字一覧として一望できる密度：1番組＝1行（局名｜番組名）、行の高さは約 30px */
.arc__g--3 .wlist li{grid-template-columns:minmax(72px,auto) minmax(0,1fr);gap:10px;padding:7px 0;border-bottom-color:rgba(20,21,26,.055)}   /* 表に見えないよう線はさらに薄く */
.arc__g--3 .wlist__k{font-size:10px;font-weight:700;color:var(--ink3)}
.arc__g--3 .wlist__t{font-size:12.5px;line-height:1.5}
.arc__g--3 .wlist__more{font-size:11.5px;padding:10px 0 0}
/* 一覧の末尾「他多数」（原文の語をそのまま） */
.wlist__more{font-size:12px;font-weight:700;color:var(--ink3);letter-spacing:.06em;padding:14px 0 0;text-align:right}
.live .wlist__more{color:#8b90a0}
/* 列の見出し：小型3Dアイコン＋番号＋英字／日本語。面はカテゴリ色を 6% 混ぜた白、下に細い色線（4枚のカードにはしない） */
.arc__hd{display:flex;align-items:center;gap:12px;padding:8px 14px 10px 8px;background:#fff;background:color-mix(in srgb,var(--c) 6%,#fff);border-radius:8px 8px 0 0;border-bottom:2px solid var(--c)}
.arc__ic{width:56px;height:56px;flex:none;mix-blend-mode:multiply}   /* 白地の生成画像を面に馴染ませる（画像は加工しない） */
.arc__col .ch{padding-bottom:0;border-bottom:0;padding-left:0}
.arc__col .ch::before{display:none}   /* アイコンが色の目印になるので縦線は重ねない */
.arc__col .wlist{margin-top:4px}

/* ---------- CORPORATE：ケーススタディ（一案件＝一章、左右交互） ---------- */
.wcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;padding:84px 0;border-top:1px solid var(--line)}
.wcase:first-of-type{border-top:0;padding-top:40px}
.wcase--rev .wcase__tx{order:2}
.wcase--rev .wcase__vis{order:1}
.wcase__no{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.wcase__ttl{font-size:clamp(28px,3.4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.15;margin-top:14px}
.wcase__type{font-size:14px;font-weight:700;color:var(--ink2);margin-top:10px}
.wmeta{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line);max-width:32em}
.wmeta dt{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--red);padding-top:.5em}
.wmeta dd{font-size:14px;line-height:2;color:var(--ink)}
.wcase__vis .mtile{aspect-ratio:16/10}
.wcase:hover .mtile img{transform:scale(1.02)}

/* ---------- YOUTUBE：数字とチャンネルを主役に（YouTube の UI は模倣しない） ---------- */
.ytc{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center;padding:80px 0;border-top:1px solid var(--line)}
.ytc:first-of-type{border-top:0;padding-top:48px}
.ytc--rev .ytc__tx{order:2}
.ytc--rev .ytc__vis{order:1}
.ytc__no{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.ytc__num{font-size:clamp(56px,8vw,120px);font-weight:900;letter-spacing:-.05em;line-height:.95;color:var(--red);margin-top:14px;font-variant-numeric:tabular-nums}
.ytc__num small{display:block;font-size:11px;font-weight:900;letter-spacing:.22em;color:var(--ink3);margin-top:12px}
.ytc__ttl{font-size:clamp(24px,2.8vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-top:26px}
.ytc__role{margin-top:26px}
.ytc__role b{display:block;font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--red);margin-bottom:10px}
.ytc__role ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ytc__role li{padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:700;background:linear-gradient(158deg,#ffffff,#eef0f5);
  box-shadow:0 1px 1px rgba(255,255,255,.9) inset, 0 4px 12px rgba(20,21,26,.06)}
.ytc__tx .more{margin-top:26px}
.ytc__vis .poster{aspect-ratio:16/10}
.ytc:hover .mtile img{transform:scale(1.02)}

/* ---------- LIVE STREAMING：黒い帯に 16:9 を大きく（現場感・臨場感） ---------- */
.live{position:relative;margin-top:128px;padding:96px 0 104px;color:#fff;
  width:100vw;margin-left:calc(50% - 50vw);
  background:linear-gradient(160deg,#2a2c34 0%,#16171c 55%,#0e0f13 100%)}
.live>.wrap{position:relative}
.live .sv-hd__en,.live .sv-hd__ja{color:#fff}
.live .sv-hd__lead{color:#c6cad6}
.lv{display:grid;grid-template-columns:repeat(12,1fr);gap:56px 24px;margin-top:64px}
.lv__it{display:block;color:inherit}
.lv__it .mtile{aspect-ratio:16/9;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14), 0 34px 60px rgba(0,0,0,.5)}
.lv__it:hover .mtile img{transform:scale(1.02)}
.lv--1{grid-column:1/-1}
.lv--2{grid-column:5/13}
.lv--3{grid-column:1/9}
.lv__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-top:18px}
.lv__no{font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--red-l)}
.lv__ttl{font-size:clamp(18px,2vw,26px);font-weight:900;letter-spacing:-.01em;line-height:1.3}
.lv__sub{font-size:12.5px;font-weight:700;color:#aeb3c2}
.lv__tx{flex-basis:100%;font-size:13.5px;color:#c6cad6}
.live .wlist{margin-top:28px}   /* ★2026-09-28 先方「LIVE ARCHIVE の下の横線と実績記載部分の間のスペースが広すぎるので、もう少し上に寄せる」64→28px */
.live .wlist li{border-color:rgba(255,255,255,.14)}
.live .wlist__k{color:#8b90a0}
.live .wlist__t{color:#fff}
.live .wlist__wait{color:#8b90a0}

/* ============================================================
   WORKS 配下：レスポンシブ（同詳細度は後勝ち。必ずこのブロックを末尾に置く）
   ============================================================ */
@media (max-width:1080px){
  .wsh{gap:20px 16px}
  .wcat__it{padding:30px 20px;margin:0 -20px}
  .wcat__it::after{left:20px;right:20px}
  .wcase,.ytc{gap:40px;padding:64px 0}
  .oz__row--top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .oz__zone--3 .oz__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arc__g{gap:40px}
  .arc__g--3{gap:32px 22px}
  .arc__d1{width:130px} .arc__d2{width:170px} .arc__d3{width:110px}
}
@media (max-width:860px){
  /* INDEX：1列中心。Large は画面幅いっぱい */
  .wsh{gap:22px 14px;margin-top:40px}
  .wsh--1,.wsh--5{grid-column:1/-1;grid-row:auto;margin:0 -20px;--ar:16/10}
  .wsh--1 .mtile,.wsh--5 .mtile{border-radius:14px}
  .wsh--2{grid-column:1/7;grid-row:auto;margin:0}
  .wsh--3{grid-column:7/13;grid-row:auto;margin:0}
  .wsh--4{grid-column:1/-1;grid-row:auto;margin:0;--ar:16/10}
  .wsh--6{grid-column:1/-1;grid-row:auto;margin:0;--ar:16/10}
     /* 2列の狭いタイルではラベルと名前を縦に */
    .wcat{margin-top:72px}
  .wcat__it{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:14px 16px;padding:28px 0;margin:0;border-radius:0;background:none !important}
  .wcat__it::after{left:0;right:0}
  .wcat__no{grid-row:1}
  .wcat__tx{grid-column:2;grid-row:1}
  .wcat__it .chap__cta{grid-column:2;grid-row:2;justify-content:space-between;width:100%}
  .wcat__en{font-size:30px}
  /* TV：ON AIR はゾーンを縦に並べ、各ゾーンの番組カードは 2列（巨大カードへ戻さない） */
  .oa{margin-top:44px}
  .oz{gap:14px;margin-top:22px}
  .oz__row,.oz__row--top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
  .oz__zone{padding:18px 16px 20px;border-radius:12px}
  .oz__g,.oz__zone--3 .oz__g{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:16px}
  .prg__ttl{font-size:14px}
  .prg__tx{font-size:15px;line-height:1.7}
  /* ARCHIVE：ロゴは見出しの下に並べる */
  .arc{margin-top:60px}
  .arc__deco{position:static;justify-content:flex-start;margin-top:24px;gap:12px}
  .arc__d1,.arc__d2,.arc__d3{translate:none;width:31%}
  .arc__g,.arc__g--3{grid-template-columns:1fr;gap:30px;margin-top:28px}
  .arc__sub{margin-top:28px}
  .arc__g--3 .wlist__t{font-size:13px}
  .arc__ic{width:48px;height:48px}
  /* CORPORATE：CASE／CLIENT → 写真 → 内容 の順 */
  .wcase{grid-template-columns:1fr;gap:0;padding:52px 0}
  .wcase:first-of-type{padding-top:24px}
  .wcase__tx,.wcase--rev .wcase__tx{display:contents}
  .wcase__hd{order:1}
  .wcase__vis,.wcase--rev .wcase__vis{order:2;margin-top:22px}
  .wmeta{order:3;max-width:none;margin-top:22px}
  .wmeta dd{font-size:13.5px}
  /* YOUTUBE：登録者数 → タイトル → 写真 → 担当 */
  .ytc{grid-template-columns:1fr;gap:0;padding:56px 0}
  .ytc:first-of-type{padding-top:28px}
  .ytc__tx,.ytc--rev .ytc__tx{display:contents}
  .ytc__no{order:1}
  .ytc__num{order:2}
  .ytc__ttl{order:3}
  .ytc__vis,.ytc--rev .ytc__vis{order:4;margin-top:22px}
  .ytc__role{order:5;margin-top:22px}
  .ytc__tx .more{order:6;margin-top:20px}
  /* LIVE：16:9 を画面幅いっぱいに */
  .live{margin-top:88px;padding:64px 0 72px}
  .lv{gap:40px 0;margin-top:40px}
  .lv--1,.lv--2,.lv--3{grid-column:1/-1;margin:0 -20px}
  .lv__it .mtile{border-radius:14px}
  .lv__cap{margin-top:14px;padding:0}
  .live .wlist{margin-top:24px}
  /* 共通 */
  .wnext{margin-top:80px}
  .wnext--tight{margin-top:56px}
  .wnext__list{grid-template-columns:1fr;gap:14px}
  .wnext__it{padding:22px 22px}
  .wlist li{grid-template-columns:1fr;gap:4px;padding:13px 0}
}
/* TV：ON AIR のゾーンを縦に（761px 以上は 2×2 を保つ。640〜760 で 2×2 だとタイルが 125px 台まで痩せる） */
@media (max-width:760px){
  .oz__row,.oz__row--top{grid-template-columns:1fr}
  .oz__zone--3 .oz__g{grid-template-columns:repeat(3,minmax(0,1fr))}   /* 縦積み直後の幅では VARIETY は 3 つ横に */
}
@media (max-width:640px){
  .wcat__en{font-size:28px}
  .oz__zone--3 .oz__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oz__g,.oz__zone--3 .oz__g{gap:14px 10px}
  .ytc__num{font-size:60px}
}
/* 極端に狭い端末はカード1列（640px 以下の規則より後に置く） */
@media (max-width:374px){
  .oz__g,.oz__zone--3 .oz__g{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .wnext__it{transition:none}
}

/* ============================================================
   WORKS：STATIC FIRST（2026-09-09 追記）
   動画が無い状態を完成形にする。メディアの種類は .mslot の data-media で切り替える（js/works.js の説明を参照）
   ============================================================ */
/* 写真の切り取り位置は --pos で案件ごとに。hover でごくわずかに寄る（拡大しすぎない） */
.mslot img{object-position:var(--pos,50% 50%);transition:transform var(--dur-soft) var(--ease-soft),object-position 1.2s var(--ease-soft)}
.lk:hover .mslot img,.wcase:hover .mslot img,.ytc:hover .mslot img{object-position:var(--pos-h,var(--pos,50% 50%))}

/* TYPE B：静止画の連続。重ねて opacity だけで切り替える（左右スライドはしない） */
.mslot[data-media="sequence"] img{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease-soft),transform var(--dur-soft) var(--ease-soft)}
.mslot[data-media="sequence"] img.is-on{opacity:1}

/* TYPE C：動画はポスターの上に重ね、再生できたときだけ現れる */
.mslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-soft);pointer-events:none}
.mslot.is-playing video{opacity:1}

/* 写真の意味づけラベル（BEHIND THE SCENES / PRODUCTION SCENE / カテゴリー）。画像の上に載せる情報はこれだけ */
.mlb{position:absolute;left:18px;bottom:16px;z-index:3;display:flex;flex-direction:column;gap:3px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);pointer-events:none;opacity:.92;transition:opacity var(--dur-soft) var(--ease-soft)}
.mlb b{font-size:10px;font-weight:900;letter-spacing:.16em}
.mlb i{font-style:normal;font-size:12.5px;font-weight:700}
.mlb--top{bottom:auto;top:16px}
.lk:hover .mlb,.wcase:hover .mlb{opacity:1}
/* 下にラベルを置く写真は、足元だけごく薄く落として読めるようにする */
.has-lb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.34));transition:opacity var(--dur-soft) var(--ease-soft)}
.lk:hover .has-lb::after{opacity:.85}

/* ---------- POSTER：ロゴしか無い番組・チャンネルを「一枚のグラフィックポスター」として見せる ---------- */
/* 薄い色調の面・細い内枠・ジャンルのラベル・局名。ロゴは等比のまま大きく（ファイルは改変しない） */
/* 面は白のまま（ロゴPNGは白地が焼き込まれているので、色調が背後まで届くと白い矩形が見える）。色調は角だけに */
.poster{position:relative;display:grid;place-items:center;grid-template-rows:100%;grid-template-columns:100%;padding:13% 12%;background:#fff}
.poster::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 96% 4%, var(--tint,rgba(228,0,43,.08)) 0%, rgba(255,255,255,0) 26%),radial-gradient(circle at 4% 100%, rgba(20,21,26,.06) 0%, rgba(255,255,255,0) 30%)}
.poster__fr{position:absolute;inset:14px;border:1px solid rgba(20,21,26,.09);border-radius:calc(var(--tile-r) - 10px);pointer-events:none;z-index:2}
.poster img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;max-width:560px}
.poster .mlb{color:var(--ink2);text-shadow:none;left:26px;top:22px}
.poster__net{position:absolute;right:26px;bottom:20px;z-index:3;font-size:10px;font-weight:900;letter-spacing:.14em;color:var(--ink3)}
.poster--gold{--tint:rgba(212,160,23,.16)}
.poster--red{--tint:rgba(228,0,43,.11)}
.poster--ink{--tint:rgba(20,21,26,.10)}
.poster--purple{--tint:rgba(122,63,196,.13)}
/* ロゴが無い番組：タイトルのタイポグラフィをポスターに */
.poster__t{position:relative;z-index:2;font-size:clamp(22px,2.4vw,34px);font-weight:900;line-height:1.3;letter-spacing:-.01em;text-align:center;color:var(--ink)}
.poster__t small{display:block;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red);margin-bottom:12px}
/* 小さなポスター（ARCHIVE の飾り）は余白を px で */
.arc__deco .poster{padding:16px 14px}
.arc__deco .poster .poster__fr{inset:8px;border-radius:12px}

/* ---------- 出現：マスクで現れる（写真・動画スロット用。.rv と同じ IO で is-in が付く） ---------- */
/* ★clip-path は監視対象（.rv 自身）には付けない：IntersectionObserver が切り取られた要素を「画面外」と判定し、出現が一生発火しなくなる。
   切り取るのは子の .mtile。監視する要素（親）は切り取られていないので判定が通る */
.rv--mask{opacity:1;translate:none}
.rv--mask>.mtile{clip-path:inset(-80px -80px 100% -80px);transition:clip-path 1.3s var(--ease-soft)}
.rv--mask.is-in>.mtile{clip-path:inset(-80px)}

/* ---------- WORKS INDEX：ポスターウォール（サイズ差を強め、ラベルは画像の中に） ---------- */
.wsh{margin-top:56px;gap:26px 22px}
.wsh--1{grid-column:2/12;grid-row:1;--ar:21/9;margin:0}
.wsh--2{grid-column:1/5;grid-row:2;--ar:4/3;margin:0}
.wsh--3{grid-column:9/13;grid-row:2;--ar:4/3;margin-top:56px}
.wsh--4{grid-column:5/9;grid-row:3;--ar:16/9;margin-top:-96px}
.wsh--5{grid-column:2/5;grid-row:4;--ar:4/3;margin-top:8px}
.wsh--6{grid-column:7/12;grid-row:4;--ar:16/10;margin-top:56px}
.wsh__it .mtile img{transition:transform 1.2s var(--ease-soft),object-position 1.2s var(--ease-soft)}
.lk:hover .wsh__it .mtile img,.wsh__it:hover .mtile img{transform:scale(1.02)}

/* ---------- LIVE：見出しの下に「リアルタイム制作」の意味づけ ---------- */
.live .sv-hd__tag{font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--red-l);margin-top:18px}

@media (max-width:860px){
  .wsh{margin-top:36px}
  .wsh--1,.wsh--4{grid-column:1/-1;grid-row:auto;margin:0 -20px;--ar:16/10}
  .wsh--2{grid-column:1/7;grid-row:auto;margin:0;--ar:1/1}
  .wsh--3{grid-column:7/13;grid-row:auto;margin:0;--ar:1/1}
  .wsh .poster{padding:30% 10% 14%}                     /* 小さなポスターはラベルの下にロゴを置く */
  .wsh .poster .mlb i{display:none}
  .wsh--5{grid-column:1/7;grid-row:auto;margin:0;--ar:1/1}
  .wsh--6{grid-column:7/13;grid-row:auto;margin:0;--ar:1/1}
  .mlb{left:14px;bottom:12px}
  .mlb--top{top:12px}
  .mlb i{font-size:11.5px}
  .poster{padding:12%}
  .poster .mlb{left:16px;top:14px}
  .poster__fr{inset:9px;border-radius:12px}
  .poster__net{right:16px;bottom:12px}
  .rv--mask>.mtile{clip-path:none;transition:none}
}
@media (prefers-reduced-motion:reduce){
  .rv--mask>.mtile{clip-path:none;transition:none}
  .mslot img{transition:none}
}

/* ============================================================
   ABOUT（2026-09-09 作り替え）：about.html
   リズムは 静（HERO）→ 強（OUR VALUES）→ 静（MESSAGE）→ 静（COMPANY BRIDGE）。
   OUR VALUES はクライアント参考画像（立体文字の生成AIイメージ）を Web に落とし込む：
   文字本体＝レンダ済み透過 WebP（images/values/）、床・反射・影・ラベル・関係線・動きは HTML/CSS。
   ============================================================ */
/* ---------- HERO：見出しを左、写真は1点だけ右下に ---------- */
/* ★2026-09-23 街録①を1枚追加（先方ご指示）。左＝見出し／中＝街録①／右＝海辺 の3列。
   街録①は海辺より小さく、下端を 52px 上げて置く（同じ大きさで並べない） */
.svh--ab .svh__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,.55fr) minmax(0,.9fr);gap:40px;align-items:end}
.svh--ab .svh__sub{align-self:end;margin-bottom:52px}
.svh--ab .svh__sub .mslot{--ar:3/2}
.svh--ab .svh__media{margin-top:0;padding-top:120px}   /* 写真を少し下げ、見出しの視線の先に置く */
.svh--ab .svh__media .mslot{--ar:4/3}
.svh--ab .svh__copy{max-width:14em}

/* ---------- OUR VALUES：舞台（全幅の明るいスタジオ） ---------- */
.ov{margin-top:112px}
.ov__stage{
  position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:96px 0 100px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#fafbfc 0%,#eef0f4 42%,#e7e9ef 100%);
}
/* 右上から落ちる斜めの光の帯（参考画像の背景） */
.ov__light{
  position:absolute;right:-8%;top:-40%;width:44%;height:170%;rotate:22deg;z-index:0;pointer-events:none;opacity:.8;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 48%,rgba(255,255,255,0) 100%);
}
/* 左右のぼけた球（FVと同じ球をぼかして奥に置く） */
.ov__orb{position:absolute;z-index:0;pointer-events:none;filter:blur(12px);opacity:.6}
.ov__orb--l{left:-70px;bottom:26%;width:200px;height:200px}
.ov__orb--r{right:-30px;top:20%;width:140px;height:140px;opacity:.7}
.ov__orb--r2{right:-80px;bottom:18%;width:170px;height:170px}
.orb--white{background:radial-gradient(circle at 34% 28%, #ffffff 0%, #f3f4f7 34%, #c6c9d3 100%)}
.ov__stage .wrap{position:relative;z-index:1}

/* 見出し：OUR VALUES（赤・字間広・左右に罫）／ PASSION と 7 が赤 */
.ov__hd{text-align:center}
.ov__en{display:inline-flex;align-items:center;gap:22px;font-size:12px;font-weight:900;letter-spacing:.34em;color:var(--red)}
.ov__en::before,.ov__en::after{content:"";width:64px;height:1px;background:rgba(20,21,26,.28)}
.ov__ttl{font-size:clamp(30px,4.2vw,58px);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-top:22px}
.ov__ttl em{font-style:normal;color:var(--red);letter-spacing:.01em}
.ov__br{display:none}                               /* SP だけ「7つの価値。」を2行目に */

/* 7列：ラベル（上）→ 立体文字（下）。--cap が文字の高さ（参考画像：行幅の約15%） */
.ov__word{display:none}
.ov__list{--cap:clamp(96px,14.6vw,190px);list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;margin-top:72px;position:relative;z-index:1}
/* 床：文字の足元（=リストの下端）から下へ、白く光る床が広がる */
.ov__list::before{
  content:"";position:absolute;left:50%;top:calc(100% - 36px);width:100vw;height:260px;translate:-50% 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#ffffff 14%,rgba(255,255,255,.5) 34%,rgba(255,255,255,0) 78%);
}
.ov__it{display:flex;flex-direction:column;justify-content:flex-end;min-width:0;outline:none}
.ov__it:focus-visible .ov__meta{outline:2px solid var(--red);outline-offset:8px;border-radius:6px}
/* ラベル：左に細い縦罫、その下端に文字へつなぐ点 */
.ov__meta{position:relative;border-left:1px solid rgba(20,21,26,.28);padding:2px 12px 20px 16px;margin-right:8px;transition:opacity .9s var(--ease-soft),border-color .9s var(--ease-soft)}
.ov__meta::after{content:"";position:absolute;left:-3.5px;bottom:-3px;width:6px;height:6px;border-radius:50%;background:var(--ink);transition:background .9s var(--ease-soft),box-shadow .9s var(--ease-soft)}
.ov__name{font-size:15px;font-weight:900;letter-spacing:-.01em;line-height:1.15;color:var(--ink)}
.ov__name b{font-size:1.9em;color:var(--red);line-height:.8;margin-right:.02em}
.ov__name small{display:block;font-size:13px;font-weight:900;margin-top:8px;letter-spacing:.02em}
.ov__desc{font-size:13.5px;line-height:1.9;color:var(--ink2);margin-top:12px}
/* 立体文字：高さを揃えて下端（床）に揃える。幅は文字ごと */
.ov__fig{position:relative;height:var(--cap);margin:12px 0 0;display:flex;align-items:flex-end;justify-content:center;transition:opacity .9s var(--ease-soft),filter .9s var(--ease-soft)}
.ov__img{position:relative;z-index:2;height:100%;width:auto;max-width:none;transition:translate .9s var(--ease-soft),filter .9s var(--ease-soft)}
/* 床反射：同じ画像を上下反転し、足元から離れるほど薄く（mask は変形前の座標なので、下側を濃くしてから反転する） */
.ov__ref{
  position:absolute;left:50%;top:100%;z-index:1;height:70%;width:auto;max-width:none;translate:-50% 0;scale:1 -1;transform-origin:50% 0;pointer-events:none;opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.8) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 22%,rgba(0,0,0,.8) 100%);
}
/* 接地影：足元の楕円。赤い文字は影がわずかに赤い */
.ov__fig::before{
  content:"";position:absolute;left:2%;right:2%;bottom:-4px;height:22px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at center, var(--sh,rgba(20,21,26,.34)) 0%, rgba(20,21,26,0) 70%);filter:blur(7px);
}
.ov__it:has(.ov__alt--red) .ov__fig{--sh:rgba(160,0,30,.34)}
/* 画像が読めないとき：同じ位置に CSS の文字（押し出しは影の積層）。JS が .is-noimg を付ける */
.ov__alt{display:none;position:relative;z-index:2;font-size:calc(var(--cap) * 1.02);font-weight:900;line-height:.82;letter-spacing:-.04em}
.ov__alt--red{color:#e4002b;text-shadow:1px 1px 0 #c30024,2px 2px 0 #b0001f,3px 3px 0 #9c001b,4px 4px 0 #880017,6px 8px 18px rgba(228,0,43,.35)}
.ov__alt--white{color:#f4f5f8;text-shadow:1px 1px 0 #d9dbe2,2px 2px 0 #c9ccd5,3px 3px 0 #b9bcc7,4px 4px 0 #a9adb9,6px 8px 18px rgba(20,21,26,.22)}
.ov__alt--clear{color:rgba(255,255,255,.55);-webkit-text-stroke:1.5px rgba(20,21,26,.28);text-shadow:2px 2px 0 rgba(255,255,255,.7),4px 4px 0 rgba(20,21,26,.08),6px 8px 18px rgba(20,21,26,.18)}
.ov__it.is-noimg .ov__img,.ov__it.is-noimg .ov__ref{display:none}
.ov__it.is-noimg .ov__alt{display:block}

/* フォーカス：注目した文字はそのまま、他をわずかに沈める（PASSION 全体は常に読める） */
.ov__list.is-focus .ov__it:not(.is-on) .ov__fig{opacity:.62;filter:saturate(.82)}
.ov__list.is-focus .ov__it:not(.is-on) .ov__meta{opacity:.4}
.ov__it.is-on .ov__img{translate:0 -6px;filter:brightness(1.05) contrast(1.04)}
.ov__it.is-on .ov__meta{border-left-color:var(--red)}
.ov__it.is-on .ov__meta::after{background:var(--red);box-shadow:0 0 0 4px rgba(228,0,43,.14)}

/* 締めの一文 */
.ov__end{text-align:center;font-size:clamp(20px,2.6vw,34px);font-weight:900;letter-spacing:.04em;margin-top:118px;position:relative;z-index:2}
.ov__end em{font-style:normal;color:var(--red);letter-spacing:.08em}

/* ---------- MESSAGE：引用の一文／大きな肖像／本文／署名（エディトリアル） ---------- */
.msg2__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);grid-template-rows:auto 1fr;gap:40px 80px;margin-top:56px;align-items:start}   /* 1行目＝引用の高さだけ。本文は引用の直下に */
.msg2__quote{grid-column:1;grid-row:1;font-size:clamp(26px,3vw,42px);font-weight:900;line-height:1.5;letter-spacing:-.01em;padding-top:16px}
.msg2__quote em{font-style:normal;color:var(--red)}
.msg2__ph{grid-column:2;grid-row:1/3}
.msg2__portrait{aspect-ratio:4/5;background:#fff}
.msg2__wait{position:absolute;inset:16px;display:grid;place-content:center;justify-items:center;gap:8px;border:1px dashed rgba(20,21,26,.22);border-radius:calc(var(--tile-r) - 8px)}
.msg2__wait span{font-size:13px;font-weight:700;color:var(--ink3)}
.msg2__wait small{font-size:11px;color:var(--ink3)}
.msg2__body{grid-column:1;grid-row:2;align-self:start;max-width:34em;margin-top:8px}
.msg2__p{font-size:16.5px;line-height:2.15}
.msg2__p+.msg2__p{margin-top:1.4em}
.msg2__pending{font-size:12.5px;line-height:1.9;color:var(--ink3);padding:18px 20px;border:1px dashed rgba(20,21,26,.2);border-radius:14px}
.msg2__sig{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:36px}
/* ★2026-09-26 先方原文の署名は「株式会社パッション／代表取締役社長　榮永英幸」。会社名の行を足した */
.msg2__co{flex:0 0 100%;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:-4px}
.msg2__role{font-size:12px;font-weight:700;color:var(--ink2)}
.msg2__name{font-size:18px;font-weight:900;letter-spacing:.06em}
/* ★2026-09-26 先方「直筆サインは無し」で確定。下2つは現在どこからも使っていない
     （方針が変わったときのために残している） */
.msg2__sign{height:64px;width:auto;margin-left:auto}
.msg2__signwait{font-size:11px;color:var(--ink3);border:1px dashed rgba(20,21,26,.2);border-radius:9px;padding:14px 32px;margin-left:auto}

/* ---------- COMPANY BRIDGE：ブロック全体がリンク ---------- */
.cbr-sec{margin-top:128px}
/* ★2026-09-18 未使用：配下間の遷移は .wnext に統一（.cbr は廃止。定義は残置） */
.cbr{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px 64px;align-items:center;
  padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:inherit;position:relative;
}
.cbr__lb{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.cbr__en{display:block;font-size:clamp(44px,6.4vw,96px);font-weight:900;letter-spacing:-.035em;line-height:1;margin-top:12px;transition:color var(--dur-soft) var(--ease-soft)}
.cbr__ja{font-size:15px;font-weight:700;line-height:1.9;margin-top:22px}
.cbr__cta{margin-top:36px}
.cbr__cta::after{content:none}                     /* ブロック自体が <a> なので stretched link は不要 */
.cbr:hover .cbr__en,.cbr:focus-visible .cbr__en{color:var(--red)}
.cbr:focus-visible{outline:2px solid var(--red);outline-offset:10px;border-radius:8px}
.cbr__vis .mtile{aspect-ratio:4/3}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .ov__list{--cap:clamp(80px,13.5vw,170px)}
  .ov__meta{padding:2px 8px 22px 12px;margin-right:6px}
  .ov__name{font-size:13.5px}
  .ov__name small{font-size:12px}
  .ov__desc{font-size:13px}
  .msg2__grid{gap:32px 48px}
}
@media (max-width:960px){
  .ov__name{font-size:12.5px}
  .ov__name small{font-size:11px}
  .ov__desc{font-size:12.5px;line-height:1.8}
}
@media (max-width:860px){
  .svh--ab .svh__in{grid-template-columns:1fr;gap:28px;align-items:start}
  /* SP：街録①は幅を抑えて横長に。ヒーローが縦に伸びすぎないようにする */
  .svh--ab .svh__sub{width:66%;margin:4px 0 0}
  .svh--ab .svh__sub .mslot{--ar:16/9}
  .svh--ab .svh__media{padding-top:0;margin-top:8px}
  .svh--ab .svh__copy{max-width:none}
  .svh--ab .svh__media .mslot{--ar:4/3}

  /* OUR VALUES：見出し → PASSION 全体 → P/A/S/S/I/O/N を縦に（大きな文字＋説明）。カードにはしない */
  .ov{margin-top:80px}
  .ov__stage{padding:72px 0 56px}
  .ov__light{width:70%;right:-20%}
  .ov__orb--l{width:150px;height:150px;left:-60px;bottom:auto;top:30%}
  .ov__orb--r{width:100px;height:100px;top:12%}
  .ov__orb--r2{width:140px;height:140px;right:-70px;bottom:-30px}   /* 締めの一文の下へ（本文に重ねない） */
  .ov__en{font-size:11px;gap:14px}
  .ov__en::before,.ov__en::after{width:32px}
  .ov__ttl{font-size:26px;margin-top:16px;letter-spacing:-.01em}
  .ov__br{display:inline}
  .ov__word{display:flex;justify-content:center;align-items:flex-end;gap:1.8vw;margin-top:34px;padding:0 4px}
  .ov__word img{height:12.2vw;width:auto;max-width:none;filter:drop-shadow(0 8px 10px rgba(20,21,26,.2))}
  .ov__list{--cap:clamp(104px,27vw,150px);display:block;margin-top:44px}
  .ov__list::before{display:none}
  .ov__it{display:grid;grid-template-columns:calc(var(--cap) * .9) minmax(0,1fr);gap:18px;align-items:center;padding:26px 0;border-top:1px solid rgba(20,21,26,.1)}
  .ov__it:first-child{border-top:0}
  .ov__fig{order:-1;margin:0;height:var(--cap)}
  .ov__fig::before{left:6%;right:6%;bottom:-6px;height:18px;filter:blur(5px)}                 /* SP でも床に置かれた感じを残す */
  .ov__ref{display:none}
  .ov__meta{border-left:0;padding:0;margin:0}
  .ov__meta::after{display:none}
  .ov__name{font-size:17px}
  .ov__name b{font-size:2em}
  .ov__name small{font-size:13px;margin-top:6px}
  .ov__desc{font-size:14.5px;margin-top:10px;word-break:auto-phrase}
  .ov__name{transition:color .9s var(--ease-soft)}
  .ov__name small{color:var(--ink)}
  .ov__list.is-focus .ov__it:not(.is-on) .ov__fig{opacity:.82;filter:none}
  .ov__list.is-focus .ov__it:not(.is-on) .ov__meta{opacity:1}
  .ov__list.is-focus .ov__it:not(.is-on) .ov__name{color:rgba(20,21,26,.58)}
  .ov__list.is-focus .ov__it:not(.is-on) .ov__name b{opacity:.82}
  .ov__it.is-on .ov__img{translate:none;scale:1.015;filter:brightness(1.05) contrast(1.04) drop-shadow(0 10px 10px rgba(20,21,26,.14))}
  .ov__name b{transition:opacity .9s var(--ease-soft)}
  .ov__end{margin-top:48px;font-size:20px;letter-spacing:.02em;line-height:1.6}

  .msg2__grid{grid-template-columns:1fr;grid-template-rows:none;gap:26px;margin-top:36px}
  .msg2__quote{grid-column:1;grid-row:auto;padding-top:0;font-size:24px}
  .msg2__ph{grid-column:1;grid-row:auto}
  .msg2__body{grid-column:1;grid-row:auto;max-width:none}
  .msg2__signwait,.msg2__sign{margin-left:0}

  .cbr-sec{margin-top:88px}
  .cbr{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .cbr__ja{font-size:14px;margin-top:16px}
  .cbr__cta{margin-top:24px;display:flex;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .ov__img,.ov__fig,.ov__meta,.ov__meta::after,.cbr__en{transition:none}
  .ov__it.is-on .ov__img{translate:none}
}

/* ============================================================
   COMPANY（2026-09-09 作り替え）：company.html
   サイト内で最も静かなページ。大きな文字・細い罫線・余白・正確な会社情報で信頼感をつくる。
   演出は .rv の出現と地図のマスク出現のみ
   ============================================================ */
/* ---------- 共通：外部リンクの印（↗）と読み上げ用テキスト ---------- */
.ext{display:inline-block;width:.62em;height:.62em;margin-left:.45em;vertical-align:.05em;
  background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4002b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19 19 5M8 5h11v11'/%3E%3C/svg%3E");
  transition:translate var(--dur-soft) var(--ease-soft)}
a:hover .ext{translate:2px -2px}
/* 語中で折れては困る語を固める（日本語は文字単位で折り返すため、幅次第で「責任／感」のように割れる） */
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pc{display:inline}

/* ---------- HERO：COMPANY のみ（「株式会社PASSION」の大見出しは 9/11 打合せで削除）。会社概要を早く見せるため直後の余白を詰める ---------- */
.svh--co + main > .sv-sec:first-child{margin-top:18px}   /* パンくず → PROFILE（h1）。見出しが無いぶん詰める */

/* ---------- PROFILE：番号＋英語ラベル｜大きな値。行ごとに細い罫線 ---------- */
.cpf{margin-top:30px;border-top:1px solid var(--line)}
.cpf__row{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:16px 40px;padding:34px 0;border-bottom:1px solid var(--line)}
.cpf dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--ink)}
.cpf dt small{flex-basis:100%;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.cpf dd{font-size:15px;line-height:1.9}
.cpf__v{display:inline-block;font-size:clamp(20px,2.2vw,28px);font-weight:900;letter-spacing:-.01em;line-height:1.3}
.cpf__k{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:4px}
.cpf__note{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ink2);margin-left:6px}
.cpf__addr{font-style:normal;font-size:clamp(16px,1.6vw,20px);font-weight:700;line-height:1.7}
.cpf__tel{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:12px;font-size:13.5px;font-weight:700;letter-spacing:.04em;color:var(--ink2)}
.cpf__tel a{color:var(--ink)}
.cpf__names{list-style:none;display:flex;flex-wrap:wrap;gap:6px 32px;font-size:clamp(17px,1.7vw,22px);font-weight:900;letter-spacing:.02em}

/* ---------- BUSINESS：5行を大きめの文字で。番号と細い罫線 ---------- */
.cbz{list-style:none;margin-top:36px;border-top:1px solid var(--line)}
.cbz li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.cbz i{font-style:normal;font-size:clamp(18px,1.8vw,24px);font-weight:900;letter-spacing:0;color:var(--red);line-height:1}
.cbz p{font-size:clamp(17px,1.8vw,23px);font-weight:900;letter-spacing:-.01em;line-height:1.55;word-break:auto-phrase}

/* ---------- AFFILIATION / BANK：2列。文字だけで成立 ---------- */
.caf{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px 64px}
.caf__hd{font-size:clamp(22px,2.4vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:14px}
.caf__hd small{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.caf__list{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.caf__it{padding:20px 0;border-bottom:1px solid var(--line)}
.caf__it a{display:block;color:inherit;transition:color var(--dur-soft) var(--ease-soft)}
.caf__it a:hover{color:var(--red)}
.caf__it b{display:block;font-size:clamp(18px,1.8vw,22px);font-weight:900;letter-spacing:.02em;line-height:1.2}
.caf__it span{display:block;font-size:13.5px;font-weight:700;line-height:1.7;margin-top:6px;color:var(--ink2)}
.caf__it a span{color:inherit}
.caf__it a .ext{margin-left:0;position:absolute;right:0;top:24px}
.caf__it a{position:relative;padding-right:28px}
.caf__list--bank .caf__it span{margin-top:0;font-size:clamp(16px,1.6vw,20px);font-weight:900;color:var(--ink)}

/* ---------- CLIENTS：文字の面（COMPANY の中で少し強い）。ロゴ壁にはしない・動かさない ---------- */
.ccl{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;margin-top:36px;border-top:2px solid var(--ink);
  font-size:clamp(20px,1.9vw,26px);font-weight:900;letter-spacing:-.01em;line-height:1.25}   /* 法人名は見出しではなく「大きめの一覧」。集合として一つの面に見せる */
.ccl li{position:relative;padding:24px 0 22px 22px;border-bottom:1px solid var(--line)}
.ccl li::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red);translate:0 -50%}
.ccl__etc{font-size:.8em;font-weight:700;color:var(--ink2);align-self:end;padding:24px 0 22px 22px}   /* 「ほか」は法人名の約80%・同じ行の並びに */
.ccl__etc::before{display:none}


/* ---------- OFFICE VISUAL：左に所在ラベル、右に大きな写真（会社の実在感の「面」） ---------- */
.cov{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;margin-top:120px}
.cov__lb{grid-column:1/4;display:flex;flex-direction:column;gap:6px;padding-bottom:8px}
.cov__lb b{font-size:clamp(22px,2.4vw,32px);font-weight:900;letter-spacing:.06em;line-height:1}
.cov__lb span{font-size:11px;font-weight:900;letter-spacing:.3em;color:var(--ink3)}
.cov__lb small{font-size:12px;font-weight:700;color:var(--ink2);margin-top:12px}
.cov__vis{grid-column:4/13}
.cov__vis .mslot{--ar:16/8}   /* 2026-09-17：16/9 → 16/8。詰めるため（第3回打合せ 0-4） */

/* ---------- ACCESS：左1/3（住所・駅・リンク・写真）／右2/3（地図） ---------- */
.cac{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:32px 56px;align-items:stretch}
.cac .sv-hd__ja{margin-top:12px}
.cac__addr{font-style:normal;font-size:clamp(16px,1.5vw,19px);font-weight:700;line-height:1.75;margin-top:28px;padding-top:24px;border-top:1px solid var(--ink)}
.cac__st{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.cac__st li{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.cac__line{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--ink2)}
.cac__st b{font-size:14.5px;font-weight:900}
.cac__link{display:inline-flex;align-items:center;margin-top:24px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.cac__ph{margin-top:32px;aspect-ratio:3/2;width:min(100%,220px)}
.cac__map{min-height:560px;background:#e9ebf1}   /* 左列と同じ高さまで伸びる大きな地図 */
.cac__map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .cpf__row{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:12px 28px;padding:28px 0}
  .caf{gap:32px 40px}
  .cac{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:28px 36px}
}
@media (max-width:860px){
  .pc{display:none}
  .svh--co + main > .sv-sec:first-child{margin-top:12px}
  /* PROFILE：1項目ずつ縦（ラベル → 値） */
  .cpf{margin-top:28px}
  .cpf__row{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .cpf dd{font-size:15px}
  .cpf__v{font-size:22px}
  .cpf__addr{font-size:17px}
  .cpf__names{gap:4px 22px;font-size:18px}
  .cbz{margin-top:24px}
  .cbz li{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:20px 0}
  .cbz p{font-size:16.5px}
  .caf{grid-template-columns:1fr;gap:44px}
  .caf__it b{font-size:18px}
  .ccl{grid-template-columns:1fr;column-gap:0;margin-top:22px;font-size:18px}
  .ccl li{padding:16px 0 15px 18px}
  .ccl__etc{align-self:auto;padding:14px 0 0 18px;border-bottom:0}
  .cov{display:flex;flex-direction:column-reverse;gap:16px;margin-top:64px}
  .cov__vis{width:100vw;margin-left:calc(50% - 50vw)}
  .cov__vis .mtile{border-radius:0}
  /* ★2026-09-17：ここは長らく 4/3 と書かれていたが、company.html 側のインライン --ar に
     負けていて一度も効いていなかった（実際に出ていたのは 16/9）。インラインを外すにあたり、
     狭い画面の見た目を変えないよう実態の 16/9 を明記する。4/3 に戻すなら要デザイン判断 */
  .cov__vis .mslot{--ar:16/9}
  .cov__lb{padding:0 0 4px}
  .cac__ph{width:min(100%,200px)}
  /* ACCESS：住所 → 駅 → リンク → 地図 → 写真 */
  .cac{display:flex;flex-direction:column;gap:22px}
  .cac__tx{display:contents}
  .cac .sv-hd__en,.cac .sv-hd__ja,.cac__addr,.cac__st,.cac__link{order:0}
  .cac__map{order:1;aspect-ratio:auto;height:min(72vw,420px);width:100%}
  .cac__ph{order:2;margin-top:0}
  .cac__addr{margin-top:20px}
  .cac__link{margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .ext,.caf__it a{transition:none}
}

/* ============================================================
   CONTACT（2026-09-09 作り替え）：contact.html
   写真・動画なし。フォームの部品（区分・入力欄・textarea・同意・送信）そのものがデザイン。
   PC は 左＝連絡先（sticky）／右＝フォーム。SP は 1 列
   ============================================================ */
.cm{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:40px 80px;align-items:start;margin-top:40px}
/* ---------- LEFT：説明と電話 ---------- */
.cm__info{align-self:stretch;min-width:0}                /* aside を列の高さいっぱいに＝この範囲だけ sticky が効く（NOTES 以降は追従しない） */
.cl{position:sticky;top:calc(var(--hdr) + 48px);padding-top:6px}
.cl__lead{font-size:clamp(16px,1.5vw,19px);font-weight:900;line-height:1.8}
.cl__sub{font-size:15.5px;color:var(--ink2);margin-top:12px;line-height:1.9}
.cl__tel{margin-top:40px;padding-top:28px;border-top:1px solid var(--ink)}
.cl__lb{display:flex;align-items:baseline;gap:12px;font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.cl__lb small{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.cl__no{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:900;letter-spacing:.01em;line-height:1.2;margin-top:12px;color:var(--ink);transition:color var(--dur-soft) var(--ease-soft)}
.cl__no:hover{color:var(--red)}
.cl__time{display:flex;align-items:baseline;gap:12px;margin-top:12px;font-size:13px;font-weight:700;color:var(--ink2)}
.cl__time b{font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--ink3)}

/* ---------- FORM ---------- */
.cf{display:block;min-width:0}
.cf__req{display:flex;align-items:baseline;gap:12px;padding-bottom:18px;border-bottom:1px solid var(--ink)}
.cf__req b{font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--red)}
.cf__req span{font-size:12px;font-weight:700;color:var(--ink3)}
.cf__sec{margin:0;padding:40px 0 0;border:0;min-width:0}
.cf__sec+.cf__sec{margin-top:60px;padding-top:48px;border-top:1px solid var(--line)}
.cf__hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;padding:0;margin-bottom:24px;font-size:inherit;font-weight:inherit}
.cf__hd i{font-style:normal;font-size:12px;font-weight:900;letter-spacing:.06em;color:var(--red)}
.cf__hd b{font-size:clamp(20px,2vw,26px);font-weight:900;letter-spacing:-.02em;line-height:1}
.cf__hd span{flex-basis:100%;font-size:13.5px;font-weight:700;color:var(--ink2)}
legend.cf__hd{float:left;width:100%}                 /* legend を見出しと同じ並びにする */

/* 区分：6つを最初から見せる（radio）。選択は赤の枠・小さな印・薄い地色で明確に */
.kd__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;clear:both}
.kd{position:relative;display:block;cursor:pointer}
.kd input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.kd__box{
  display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 18px 14px 18px;
  font-size:14.5px;font-weight:700;line-height:1.4;color:var(--ink);
  background:#fff;border:1px solid rgba(20,21,26,.16);border-radius:12px;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.kd__box::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(20,21,26,.3);background:#fff;transition:border-color .3s,box-shadow .3s}
.kd:hover .kd__box{border-color:rgba(20,21,26,.4)}
.kd input:checked+.kd__box{border-color:var(--red);background:rgba(228,0,43,.035);box-shadow:inset 0 0 0 1px var(--red)}
.kd input:checked+.kd__box::before{border-color:var(--red);box-shadow:inset 0 0 0 4.5px var(--red)}
.kd input:focus-visible+.kd__box{outline:2px solid var(--red);outline-offset:3px}

/* 入力欄：白い面＋細い枠。高さ 60px。フォーカスは赤い枠 */
.cf__grid{display:grid;grid-template-columns:1fr;gap:20px;max-width:640px}   /* 会社名→お名前→メール→電話を上から下へ */
.fld{display:flex;flex-direction:column;min-width:0}
.fld label{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.fld label b{font-size:11px;font-weight:900;letter-spacing:.16em}
.fld label span{font-size:13px;font-weight:700;color:var(--ink2)}
.fld input,.fld textarea{
  width:100%;height:60px;padding:0 18px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid rgba(20,21,26,.16);border-radius:12px;outline:none;
  transition:border-color .3s,box-shadow .3s;
}
.fld textarea{height:auto;min-height:240px;padding:16px 18px;line-height:1.9;resize:vertical}
.fld input:hover,.fld textarea:hover{border-color:rgba(20,21,26,.36)}
.fld input:focus,.fld textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.12)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:2px solid transparent}
.fld--msg label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* 見出し「03 MESSAGE お問い合わせ内容」が見えるラベルの役割を担うので、入力欄のラベルは読み上げ専用 */

/* エラー：項目の直下に文で。枠と見出しを赤に。入力値は消さない */
.cf__err{display:none;font-size:12.5px;font-weight:700;color:var(--red);margin-top:8px;line-height:1.6}
.is-error .cf__err,.cf__err.is-on{display:block}
.fld.is-error input,.fld.is-error textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.1)}
.fld.is-error label b,.fld.is-error label span{color:var(--red)}
.cf__sec.is-error .kd__box{border-color:rgba(228,0,43,.5)}

/* 同意：大きめのチェック（24px）。リンクは別の要素にして操作を分ける */
.cf__agree{margin-top:56px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.ag{position:relative;display:inline-flex;align-items:center;gap:14px;cursor:pointer;min-height:44px}
.ag input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ag__box{flex:none;width:24px;height:24px;border-radius:7px;border:1.5px solid rgba(20,21,26,.36);background:#fff;transition:border-color .3s,background .3s;position:relative}
.ag__box::after{content:"";position:absolute;left:7px;top:3px;width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s}
.ag input:checked+.ag__box{background:var(--red);border-color:var(--red)}
.ag input:checked+.ag__box::after{opacity:1}
.ag input:focus-visible+.ag__box{outline:2px solid var(--red);outline-offset:3px}
.ag__tx{font-size:15px;font-weight:700}
.ag__link{display:inline-flex;align-items:center;min-height:44px;font-size:12.5px;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:4px}
.cf__agree.is-error .ag__box{border-color:var(--red);box-shadow:0 0 0 3px rgba(228,0,43,.12)}
.cf__agree .cf__err{flex-basis:100%;margin-top:0}

/* 送信：ページで一番強いCTA。横幅いっぱい。未達成は aria-disabled（存在は分かる・押すと不足箇所を示す） */
.cf__send{
  display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:80px;margin-top:32px;padding:0 28px 0 32px;
  background:var(--black);color:#fff;border:0;border-radius:16px;cursor:pointer;text-align:left;
  transition:background var(--dur-soft) var(--ease-soft),opacity .3s,transform var(--dur-soft) var(--ease-soft);
}
.cf__send{margin-top:40px}
.cf__send-tx b{display:block;font-size:clamp(17px,1.7vw,22px);font-weight:900;letter-spacing:.06em;line-height:1.1}
.cf__send-tx small{display:block;font-size:12px;font-weight:700;margin-top:6px;opacity:.78}
.cf__send-arw{flex:none;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:background var(--dur-soft) var(--ease-soft),border-color var(--dur-soft) var(--ease-soft)}
.cf__send-arw svg{width:22px;height:8px;stroke:#fff;fill:none;stroke-width:1.6;transition:transform var(--dur-soft) var(--ease-soft)}
.cf__send:hover,.cf__send:focus-visible{background:var(--red)}
.cf__send:hover .cf__send-arw,.cf__send:focus-visible .cf__send-arw{border-color:#fff;background:rgba(255,255,255,.14)}
.cf__send:hover .cf__send-arw svg{transform:translateX(6px)}
.cf__send:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.cf__send.is-off{opacity:.5;cursor:not-allowed}
.cf__send.is-off:hover{background:var(--black)}
.cf__send.is-off:hover .cf__send-arw svg{transform:none}
.cf__send.is-busy{opacity:.7;cursor:progress}
.cf__status{display:none;margin-top:16px;padding:16px 18px;border-radius:12px;font-size:13.5px;font-weight:700;line-height:1.8}
.cf__status.is-on{display:block}
.cf__status.is-fail{background:rgba(228,0,43,.06);color:var(--red)}
.cf__status.is-info{background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.cf__status a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 送信完了 */
.cf__done{padding:40px 0;border-top:1px solid var(--ink)}
.cf__done b{font-size:clamp(28px,3vw,44px);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--red)}
.cf__done-ttl{font-size:clamp(18px,1.8vw,24px);font-weight:900;margin-top:18px}
.cf__done-tx{font-size:14px;line-height:2;color:var(--ink2);margin-top:14px}

/* ---------- NOTES：静かに ---------- */
.cnt{margin-top:120px;text-align:center}   /* ★2026-09-28 先方ご指示：NOTES 全体をセンターに移動 */
.cnt__hd{display:flex;justify-content:center;align-items:baseline;gap:14px;font-size:clamp(22px,2.4vw,32px);font-weight:900;letter-spacing:-.02em;line-height:1}
.cnt__hd small{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink2)}
.cnt__list{list-style:none;margin-top:22px;border-top:1px solid var(--line);max-width:52em;margin-inline:auto;text-align:left}   /* ★箱は中央・中の文章は左揃えのまま（読みやすさ） */
.cnt__list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.cnt__list i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--red);padding-top:4px}
.cnt__list p{font-size:15.5px;line-height:1.95;color:var(--ink2)}
.cnt__list a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

/* ---------- レスポンシブ ---------- */
@media (max-width:1080px){
  .cm{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:32px 44px}
  .kd__grid{grid-template-columns:1fr}
}
@media (max-width:860px){
  .cm{grid-template-columns:1fr;gap:36px;margin-top:0}
  .cl{position:static;padding-top:0}
  .cl__tel{margin-top:26px;padding-top:22px}
  .cf__req{padding-bottom:14px}
  .cf__sec{padding-top:30px}
  .cf__sec+.cf__sec{margin-top:40px;padding-top:32px}
  .cf__hd{margin-bottom:18px}
  .kd__grid{grid-template-columns:1fr;gap:10px}
  .kd__box{min-height:56px;font-size:14px}
  .cf__grid{grid-template-columns:1fr;gap:18px;max-width:none}
  .fld input{height:56px;font-size:16px}          /* iOS のズームを避けるため 16px */
  .fld textarea{min-height:200px;font-size:16px}
  .cf__agree{margin-top:40px;padding:24px 0;gap:10px 0}
  .ag__link{min-height:40px}
  .cf__send{min-height:72px;padding:0 20px 0 22px;margin-top:26px}
  .cf__send-arw{width:44px;height:44px}
  .cnt{margin-top:80px}
  .cnt__list li{grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 0}
}
@media (prefers-reduced-motion:reduce){
  .cf__send,.cf__send-arw,.cf__send-arw svg,.kd__box,.kd__box::before,.ag__box,.fld input,.fld textarea{transition:none}
}



/* ============================================================
   2026-09-15 クライアント指摘の反映（TOP）
   ① FV：横方向をもっと使う（hero だけ .wrap の上限を外す）／タイトルの左に余白／3D は js/fv-alt.js 側で拡大
   ② NOW ON AIR：枠を一段小さく（PC のみ。SP は全幅のまま）
   ③ 2つの事業：4キューブを拡大（canvas を広げ、拡大自体は js/biz3d.js のカメラで行う＝CSS の scale は使わない）
   ④ HISTORY：リード文を追加（構成は横一列のまま）
   ★同詳細度は後勝ちなので、このブロックはファイル末尾に置く。SP（≤860）は各所で元の値に戻す
   ============================================================ */

/* ---------- ① FV ---------- */
/* hero の内側だけ 1280px の上限を外し、画面幅（左右 24px を残す）まで使う。上限 1800px は超ワイド画面の保険 */
/* ★2026-09-21 先方「左に寄りすぎ・両脇の余白」：hero も本文と同じ --wide（1920 で 1280px・両脇 320px）。タイトルはヘッダーのロゴと同じ左端に揃う。
   旧：.hero>.wrap{width:min(100% - 48px,1800px)}／.hero__copy,.nowair{margin-left:clamp(48px,6vw,132px)} */
.hero>.wrap{width:var(--wide)}
.hero__copy,.nowair{margin-left:0}
/* 3D の枠（.mbs）は css/fv-alt.css の left/right:-80px のまま＝hero の幅＋ガター。右端の一部が viewport の外へ出るのは許容（横スクロールは .hero の overflow で出ない） */
@media (max-width:860px){
  .hero>.wrap{width:var(--wide)}
  .hero__copy,.nowair{margin-left:0}
}

/* ---------- ② NOW ON AIR（PC のみ：外枠 312px → 264px＝約 85%） ---------- */
@media (min-width:861px){
  .nowair{max-width:264px}
  .disp__frame{padding:7px 7px 13px;border-radius:11px}
  .disp__frame::after{width:28px;bottom:5px}
  .disp__screen{border-radius:6px}
  .disp__slide{padding:10px 12px 50px}
  .oa-lg img{max-width:186px;max-height:76px}   /* ロゴは枠に比例して縮める（文字は下記のとおり最小限） */
  .oa-band{left:8px;right:8px;bottom:8px;padding:6px 9px;gap:8px}
  /* 番組名は 12px を維持し、長いもの（ZIP! ペッコリ妄想移住ファイル 等）は 2 行まで折り返す（…で切らない） */
  .oa-band__t{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .oa-band__m{font-size:10px}
  .disp__cube--a{width:19px;height:19px;left:-11px;bottom:22px}
  .disp__cube--b{width:11px;height:11px;right:-14px;bottom:44px}
  .disp__cube--c{width:8px;height:8px;left:30px;bottom:-12px}
  .disp__dots{margin-top:8px}
  .disp::after{bottom:-8px;height:10px}
}

/* ---------- ③ 2つの事業：canvas を広げる（拡大はカメラ側）。テキスト列との間隔は 16px 確保（Codex 指摘） ---------- */
.biz{gap:12px 20px}
.bz{gap:0 16px}
.bz__obj{width:clamp(300px,30.5vw,440px)}
@media (max-width:1080px){ .bz__obj{width:clamp(320px,40vw,420px)} }
@media (max-width:860px){ .bz__obj{width:min(100%,380px)} }

/* ---------- ④ HISTORY：リード文（横一列は変えない） ---------- */
.hist{grid-template-columns:minmax(170px,230px) minmax(0,1fr)}
.hist__lead{margin-top:10px;font-size:13.5px;line-height:1.75;color:var(--ink2);font-weight:500;word-break:auto-phrase}
@media (max-width:1080px){ .hist{grid-template-columns:minmax(150px,200px) minmax(0,1fr)} .hist__lead{font-size:13px} }
@media (max-width:860px){ .hist__lead{margin-top:6px;max-width:26em} }


/* ============================================================
   2026-09-15 TOP：FV 以降の区画を FV と同じ幅にそろえ、要素を少しずつ大きく（クライアント指摘「余白」）
   ・区画の左右端＝FV のタイトル左端（24px＋clamp(48px,6vw,132px)）。ただし従来の 1280px より狭くはしない
     → 1366: 1280（従来どおり）／1536: 1304／1920: 1570／2560: 1536（FV のタイトルと同じ位置）
   ・大きさは幅に比例して 1.0〜約 1.15 倍（clamp）。1080px 以下は従来の指定のまま
   ・要素を大きくする指定（下の @media）は TOP だけ。ヘッダー・フッターは変えない

   2026-09-17（第3回打合せ 0-2）：区画の幅は下層ページにも広げた。
   「下層も左端を TOP と同じ位置まで入れ、左右のバランスを揃える」というご指示。
   対象は本文（main.wrap）と下層ヒーローの中身（.svh > .wrap）の2つ。
   この2つをそろえないと、下層は見出し（h1）だけ内側に残って本文と段違いになる。
   1366px 以下は計算結果が 1280px（従来値）に張り付くので、実質 1367px 以上だけが変わる。
   ============================================================ */
/* 幅は :root の --wide に集約した（.wrap・.hdr__in が使う）。ここでは何も指定しない */
@media (min-width:1081px){
  /* 見出し */
  /* 見出しは配下の .bz__ja（2.05vw・上限36px）の 1.22 倍で並走させる。
     旧 clamp(23px,2.6vw,33px) は 1270px 以上で 33px に張り付き、中身（36px）に抜かれていた */
  body.is-top .sec-hd h2{font-size:clamp(28px,2.5vw,44px)}
  body.is-top .sec-hd p{font-size:clamp(15.5px,1.09vw,17.5px)}
  /* 2つの事業 */
  body.is-top .bz__no{font-size:clamp(17px,1.25vw,22px)}
  body.is-top .bz__ja{font-size:clamp(25px,2.05vw,36px)}
  body.is-top .bz__en{font-size:clamp(10px,.72vw,12.5px)}
  body.is-top .bz__lead{font-size:clamp(14.5px,1.07vw,16.5px)}
  body.is-top .bz__cta{font-size:clamp(10.5px,.75vw,12px);padding:clamp(8px,.6vw,10px) clamp(12px,.9vw,15px)}
  body.is-top .bz{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}   /* 文字列:キューブ＝1:1.3。区画幅に追随するのでどの画面幅でも比が崩れない */
  body.is-top .bz__obj{width:100%}
  body.is-top .biz{gap:12px clamp(20px,2vw,40px)}
  /* WORKS */
  body.is-top .wks__ttl{font-size:clamp(25px,2.25vw,40px)}   /* .sec-hd h2 の 0.9 倍（欧文大文字ぶん控えめ）。配下の .wkc__ja より確実に大きい */
  body.is-top .wks__ttl small{font-size:clamp(11px,.8vw,12.5px)}
  body.is-top .wks__grid{gap:clamp(18px,1.4vw,26px)}
  body.is-top .wkc__cap{padding:clamp(20px,1.45vw,26px) clamp(18px,1.3vw,24px) clamp(14px,1vw,18px)}
  body.is-top .wkc__en{font-size:clamp(10px,.7vw,11.5px)}
  body.is-top .wkc__ja{font-size:clamp(19px,1.55vw,27px)}
  body.is-top .lgw__it{width:clamp(92px,6.4vw,110px);height:clamp(92px,6.4vw,110px)}
  /* HISTORY */
  body.is-top .hist{padding:clamp(30px,2.2vw,40px) clamp(28px,2.2vw,40px) clamp(26px,2vw,34px);gap:0 clamp(28px,2.4vw,44px);grid-template-columns:minmax(170px,clamp(230px,14.5vw,280px)) minmax(0,1fr)}   /* 見出し「20 YEARS HISTORY」が大きくなっても 1 行に収まる幅 */
  body.is-top .hist__ttl{font-size:clamp(17px,1.5vw,25px)}
  body.is-top .hist__sub{font-size:clamp(11px,.8vw,12.5px)}
  body.is-top .hist__lead{font-size:clamp(13.5px,1vw,15.5px)}   /* ★2026-09-29 先方「20年の歩みの説明文も他と同じようにひとまわり大きく」。元の値から+2px（1280で11.5→13.5／1920で13.5→15.5） */
  /* ★2026-09-19：先方指定の立体アイコン6点に差し替え。細部（2015 のボール等）が潰れないよう一段大きく（72→84・下限 56→62） */
  body.is-top .hist__ic{width:clamp(62px,4.4vw,84px);height:clamp(62px,4.4vw,84px)}
  body.is-top .hist__row::before{top:calc(clamp(62px,4.4vw,84px) - 3px)}
  body.is-top .hist__yr{font-size:clamp(15px,1.05vw,18px)}
  body.is-top .hist__lb{font-size:clamp(11.5px,.85vw,13.5px)}
  /* ABOUT／CONTACT */
  body.is-top .btm{gap:clamp(20px,1.5vw,28px)}
  body.is-top .btm__p{padding:clamp(30px,2.3vw,42px) clamp(28px,2.2vw,42px)}   /* ★2026-09-29 説明文を +2px にしたら TOP の CONTACT リードの1行目が 4〜6px 足りず3行になった。 左右の余白を少し詰めて2行（先方ご指定の改行位置）を保つ */
  body.is-top .abp__en,body.is-top .ctp__en{font-size:clamp(11px,.8vw,12.5px)}
  body.is-top .abp__ttl{font-size:clamp(21px,1.95vw,30px)}   /* ★2026-09-26 新コピーで「む。」が孤立したため */
  body.is-top .abp__lead{font-size:clamp(15px,1.09vw,17px)}
  body.is-top .ctp__ttl{font-size:clamp(19px,1.7vw,28px)}
  body.is-top .ctp__lead{font-size:clamp(14.5px,1.04vw,16.5px)}
  body.is-top .more{font-size:clamp(11px,.8vw,12.5px)}
  body.is-top .btn-ct--lg{height:clamp(56px,3.6vw,62px);font-size:clamp(14px,1vw,15.5px);padding:0 clamp(30px,2.2vw,38px)}
}


/* ============================================================
   2026-09-17（第3回打合せ 4・5）COMPANY／CONTACT のヒーロー右上の飾り
   ・ABOUT の OUR VALUES と同じ立体文字。7点（images/values/v-*.webp・合計約920KB）を
     表示サイズで1枚に合成した images/deco/word-passion.webp（1643×260・約124KB）を使う
   ・「薄く背景として」というご指示なので、見出しより前に出ない濃さに留める
   ・.wrap を基準に右寄せ＝本文の右端にそろう（区画幅を変えても追随する）
   ============================================================ */
.svh{position:relative}
.svh > .wrap{position:relative}
.svh .crumb,.svh__ttl,.svh__in{position:relative;z-index:1}   /* 文字は必ず飾りの上 */
.phw{
  position:absolute;right:0;top:-6px;z-index:0;
  width:clamp(300px,42%,640px);height:auto;
  opacity:.18;pointer-events:none;user-select:none;
}
@media (max-width:1080px){ .phw{width:clamp(260px,46%,460px);opacity:.15} }
@media (max-width:860px){ .phw{display:none} }   /* SP は見出しと重なるので出さない */


/* ============================================================
   2026-09-17（第3回打合せ 0-4・4・5）COMPANY／CONTACT を詰める
   ご指摘「一つひとつが大きい。項目を一つずつ大きく並べなくてよい（見に来た人の負担を減らす）」

   ★ min-width:1081px で囲うのは、SP・タブレット用の指定（max-width:1080/860px）が
     ファイルの前方にあり、ここを裸で書くと後勝ちで狭い画面まで巻き込むため。
     ご指摘はデスクトップ表示のものなので、狭い画面は従来のまま。
   ============================================================ */
@media (min-width:1081px){

  /* ----- 区画どうしの間隔（COMPANY のみ。SERVICE／WORKS は 0-4 の回で別途） ----- */
  .cpf-sec,.cbz-sec,.caf-sec,.ccl-sec,.cac-sec{margin-top:56px}

  /* ----- PROFILE の表 -----
     ラベル列が .36fr だと区画 1570px では 550px になり、値まで遠い。
     上限を決めた固定幅にして値を左へ寄せ、行の上下も詰める */
  .cpf__row{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:12px 40px;padding:22px 0}
  .cpf__v{font-size:clamp(19px,1.6vw,23px)}
  .cpf__addr{font-size:clamp(16px,1.35vw,18px)}
  .cpf__names{font-size:clamp(17px,1.4vw,19px)}

  /* ----- オフィス写真：段の間隔を詰める -----
     ★列を 4/13→5/13 と細くする手もあるが、それだと写真の左に空き列ができて
       「左右が大きく空く」というご指摘と逆行する。列幅は保ち、比率で詰めた。
       比率（--ar）は .cov__vis .mslot の既定を 16/9→16/8 に変更済み（上方） */
  .cov{margin-top:64px}

  /* ----- BUSINESS ----- */
  .cbz{margin-top:26px}
  .cbz li{padding:18px 0}

  /* ----- AFFILIATION／BANK ----- */
  .caf__list{margin-top:18px}
  .caf__it{padding:15px 0}
  .caf__it a .ext{top:18px}

  /* ----- CLIENTS：区画が広くなったので 2 列→3 列。行数が減って縦が縮む ----- */
  .ccl{margin-top:26px;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:48px}
  .ccl li{padding:16px 0 15px 20px}
  .ccl__etc{padding:16px 0 15px 20px}

  /* ----- ACCESS ----- */
  .cac__addr{margin-top:22px;padding-top:20px}
  .cac__st{margin-top:18px}
  .cac__st li{padding:11px 0}

  /* ----- CONTACT：フォームの段の間隔（入力欄の作りは変えない） ----- */
  .cm{margin-top:28px}
  .cf__sec{padding:28px 0 0}
  .cf__sec+.cf__sec{margin-top:40px;padding-top:32px}
  .cnt{margin-top:72px}
}


/* ============================================================
   2026-09-17（第3回打合せ 2）SERVICE ヒーロー ─ C案「写真入りキューブ帯」
   ・写真 1 枚のヒーロー（.pvh）に代わり、横に流れるキューブの帯を背景に、
     文字（SERVICE／ページ名／コピー）を左に置く
   ・canvas は区画をはみ出して画面幅いっぱいに広げる。帯が画面の外へ抜けていく絵にするため。
     横スクロールは html,body の overflow-x:clip が抑える
   ・描画は js/svh3d.js。WebGL が無い環境では .shero__poster（静止画）に差し替わる
   ============================================================ */
.shero{position:relative;min-height:clamp(300px,22vw,400px);display:flex;align-items:center}
.shero__cv,.shero__poster{
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:100vw;height:100%;display:block;z-index:0;pointer-events:none;
}
.shero__poster{object-fit:cover;object-position:60% 50%;max-width:none}   /* ★グローバルの img{max-width:100%} に当たると 100vw まで広がらない */
.shero__poster[hidden]{display:none}   /* ★上の display:block が hidden 属性に勝ってしまうため明示 */
.shero__tx{position:relative;z-index:1;max-width:min(52%,620px)}
/* 立体が描けるまでの一瞬だけ、文字だけが見える状態になる。ちらつかせない */
.shero__cv{opacity:0;transition:opacity .5s var(--ease-soft)}
.shero.is-ready .shero__cv{opacity:1}
/* ★2026-09-17 ご指示：帯の左端は背景として薄くする。
   文字（左 54%・最大 660px）にかかる側を淡くし、右へ進むほど本来の濃さに戻す。
   キューブ側の材質は触らず、canvas にマスクをかけるだけ＝立体の計算はそのまま */
/* ★ポスターにも同じマスクを掛ける（2026-09-22）。
     ポスターを「3D の中身だけ」の透過画像にしたため、
     マスクが無いと WebGL 無効時だけ左端のキューブが濃く出て文字にかぶる */
.shero__cv,.shero__poster{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 16%,rgba(0,0,0,.42) 32%,#000 56%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.10) 16%,rgba(0,0,0,.42) 32%,#000 56%);
}

.shero__lb{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--ink2);margin-bottom:14px}
.shero__lb::before{content:"";width:18px;height:2px;background:var(--red)}
.shero--cp .shero__lb::before{background:#4a6491}
.shero__ttl{font-size:clamp(34px,4.3vw,58px);font-weight:900;letter-spacing:-.035em;line-height:.98}
.shero__ttl small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:12px;color:var(--ink2)}
.shero__copy{font-size:clamp(16px,1.5vw,20px);font-weight:900;line-height:1.5;letter-spacing:-.01em;margin-top:18px}
.shero__tags{font-size:10.5px;font-weight:900;letter-spacing:.18em;color:var(--ink3);margin-top:16px;line-height:2}
.shero__tags i{font-style:normal;color:var(--red);margin:0 .2em}

@media (max-width:1080px){
  .shero{min-height:clamp(320px,34vw,400px)}
  .shero__tx{max-width:min(58%,520px)}
}
@media (max-width:860px){
  /* SP：帯は文字の下を横切る。文字に被せない */
  .shero{min-height:auto;display:block;padding-bottom:clamp(180px,50vw,250px)}
  .shero__cv,.shero__poster{top:auto;bottom:0;height:clamp(180px,50vw,250px)}
  /* SP は帯が文字の下で重ならないので、端をなじませる程度に留める */
  .shero__cv,.shero__poster{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 26%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 10%,#000 26%);
  }
  .shero__tx{max-width:none}
  .shero__ttl small{margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .shero__cv{transition:none}
}


/* ============================================================
   2026-09-17（第3回打合せ 3）WORKS ヒーロー ─ ロゴが浮く
   河野さん作成の試作（prototypes/works-hero-float/）の A案をそのまま本番へ。
   ・札の置き場所（.wkf__stage）は枠の外へ少しはみ出させる。端の札が切れて見えないように
   ・PC は左 44% を文字の領域として札を置かない（配置は js/wkfloat.js 側で担保）
   ・SP は文字の下に高さ 300px の枠
   ============================================================ */
.wkf{position:relative;height:clamp(380px,31vw,480px)}
.wkf__stage{position:absolute;inset:-40px -24px -30px 0;z-index:0}
.wkf__stage canvas{width:100%;height:100%;display:block}
.wkf__poster{position:absolute;inset:0;z-index:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:70% 50%}
.wkf__poster[hidden]{display:none}   /* ★上の指定が hidden 属性に勝ってしまうため明示 */
.wkf__ct{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;max-width:min(42%,520px)}
.wkf__lb{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:900;letter-spacing:.2em;color:var(--ink);margin-bottom:14px}
.wkf__lb::before{content:"";width:18px;height:2px;background:var(--red)}
.wkf__ttl{font-size:clamp(34px,4.3vw,58px);font-weight:900;letter-spacing:-.035em;line-height:.98;color:var(--ink)}
.wkf__ttl small{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;margin-top:12px;color:var(--red)}
.wkf__copy{font-size:clamp(16px,1.5vw,20px);font-weight:900;line-height:1.5;margin-top:18px}
.wkf__lead{font-size:15px;line-height:1.85;color:var(--ink2);margin-top:12px;max-width:34em}
/* 立体が出るまでのちらつきを抑える */
.wkf__stage{opacity:0;transition:opacity .5s var(--ease-soft)}
.wkf.is-ready .wkf__stage{opacity:1}

@media (max-width:860px){
  .wkf{height:auto;display:flex;flex-direction:column-reverse}
  .wkf__ct{max-width:none;padding-top:6px}
  .wkf__stage{position:relative;inset:auto;height:300px;margin:8px -16px 0}
  .wkf__poster{position:relative;inset:auto;height:300px;margin:8px -16px 0}
}
@media (prefers-reduced-motion:reduce){ .wkf__stage{transition:none} }


/* ============================================================
   2026-09-17 下層ページの見出しの上下関係をそろえる
   ご指摘「H1 と下のヘッドラインのサイズが逆転していないか」（SERVICE・WORKS）

   実測（1920px）：H1 58px に対し区画見出し .sv-hd__en が 64px＝逆転。
   COMPANY は PROFILE（h1）も BUSINESS 等も同じ .sv-hd__en で 64px＝同寸。

   ★新しい数値は作らない。下層の「ページ名」の大きさは ABOUT・CONTACT が使っている
     .svh__ttl（clamp(40px,6vw,84px)）で既に決まっているので、そこへ寄せて1つに揃える。
     SERVICE・WORKS が 58px だったのは、元が写真の上に載る白抜き文字だったため。
     ヒーローを立体に変えて地の上の黒文字になった時点で見直すべきだった。
   ============================================================ */
.shero__ttl,.wkf__ttl,h1.sv-hd__en{font-size:clamp(40px,6vw,84px)}
/* 区画見出しは H1 の約 0.57 倍まで下げる。階層が戻るうえ、縦も詰まる（0-4） */
.sv-hd__en{font-size:clamp(28px,3.4vw,48px)}

/* 大きくなったぶん、ヒーローの文字欄を少し広げる（ページ名が不自然に折れないように） */
@media (min-width:861px){
  .shero__tx{max-width:min(54%,660px)}
  .wkf__ct{max-width:min(45%,580px)}
}


/* ============================================================
   2026-09-17（第3回打合せ 3）ケーススタディを横並びに
   ご指示「TV PROGRAM WORKS を参考に、ケーススタディは ON AIR、その他実績はアーカイブを参考に」

   ・ケース＝ON AIR と同じ .prg カード。1件＝ビジュアル＋メタ＋タイトル＋説明＋リンク。
     これを横並びのグリッド（.csg）に入れる。件数ぶんだけ列を作る
   ・その他実績＝ARCHIVE と同じ小さな一覧。1列だと縦に伸びるので多段（.wlist--cols）に
   ============================================================ */
.csg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 20px;margin-top:30px}
/* ★2件のときは 1fr で分けると1枚が 740px になり、中のロゴが巨大化する。
   カードはカードの大きさに留め、左に寄せる */
.csg--2{grid-template-columns:repeat(2,minmax(0,1fr))}   /* ★2026-09-28 先方「スペースが空きすぎてる印象を薄めたい」「横幅をかせぐ？？」。 460px 固定だと 1088px の枠に 148px 余っていた。1fr にして幅いっぱいに使い、 和田ラボのタグ7個（必要497px）が1行に収まるようにする。使用は works-digital の1箇所のみ */
/* ロゴの札は面いっぱいに伸ばさない（ON AIR は札が小さいので既定の余白で足りていた） */
.csg .prg:not(.prg--photo) .prg__vis img{padding:13%}

/* ON AIR の .prg は「白い面にロゴを等比で収める」作り。ケースの写真は面いっぱいに使う */
.prg--photo .prg__vis{aspect-ratio:16/10;background:#dfe2e8}
.prg--photo .prg__vis img{padding:0;object-fit:cover;object-position:var(--pos,50% 50%)}

/* 暗い帯（LIVE STREAMING）の中に置く場合の文字色 */
.live .prg__vis{background:rgba(255,255,255,.06)}
.live .prg__ttl{color:#fff}
.live .prg__tx{color:#c6cad6}
.live .prg__net{color:#8b90a0}
.live .prg__vis img{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}

/* その他実績：多段組み。段の中は上から下へ読む＝原文の並びがそのまま残る
   （grid で横に流すと並びが変わってしまう） */
.wlist--cols{columns:3;column-gap:44px}
.wlist--cols li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:1080px){ .wlist--cols{columns:2;column-gap:32px} .csg{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){
  .wlist--cols{columns:1}
  .csg,.csg--2{grid-template-columns:1fr;gap:22px}
}


/* ============================================================
   2026-09-17（ご指摘）SERVICE／ABOUT の「次へ」ブロックが大きすぎる
   ・高さを決めていたのは写真（4:3）。隣の文字列より 175〜200px 高く、
     その差は隣に何も無い空白だった → 比率を横長にして空白だけ取り除く
   ・写真の幅（654px／678px）は変えない。文字も変えない
   ・上下の余白も 64→48px／60→48px に（帯の中身が低くなったぶん）
   ============================================================ */
@media (min-width:861px){
  /* ★2026-09-17（C案）：締めの帯から写真を外し、文字だけの帯にした。
     写真は隣の文字列より 175〜200px 高く、その差が空白になっていたため。
     左＝ラベル＋見出し／右＝リード＋リンク の2列。高さは文字だけで決まる */
  .brg__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;
           padding-top:44px;padding-bottom:44px}
  .brg__hd{min-width:0}
  .brg__tx{min-width:0}
  .brg__lead{margin-top:0}
  .brg{margin-top:64px}

  .cbr{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;
       padding-top:44px;padding-bottom:44px}
  .cbr__hd{min-width:0}
  .cbr__tx{min-width:0}
  .cbr__ja{margin-top:0}
  .cbr__cta{margin-top:24px}
  .cbr-sec{margin-top:96px}
}


/* ============================================================
   2026-09-18 ON AIR（works-tv）を詰める
   実測：カード 278x369〜447（説明文の行数で差が出る）／画像枠 278x208（4:3）／
         文字側 161px のうち文字は 115px＝46px が余白
   ・画像枠を 16:10 に。ロゴは contain なので 184→150px になるが、432px の原本なので読める
   ・文字側の余白（メタ・説明・リンクの上マージン）を詰める
   ★ここだけに効かせる。.prg は works-digital／works-corporate のケースカードでも
     使っており、そちらの比率（.prg--photo＝16:10、ロゴ＝4:3）は変えない
   ============================================================ */
@media (min-width:861px){
  .oz__zone .prg__vis{aspect-ratio:16/10}
  .oz__zone .prg__mt{margin-top:8px}
  .oz__zone .prg__tx{margin-top:6px}
  .oz__zone .prg .more{padding-top:8px}
  .oz__zone{padding:18px 20px 20px}
}

/* ★検討して見送り：ARCHIVE（works-tv）の 3列→4列
   区画の高さは「一番長い列（VARIETY 29件）」で決まる。列を増やしても項目は
   再配分されず（カテゴリごとに別の <ul>）、列が狭くなって折り返しが増えるだけ。
   実測：1920px 1,187→1,205px／1366px 1,205→1,275px と **かえって高くなる**。
   カテゴリ3列の並びは先方のご指示（HP追加②）なので、この区画は現状が下限。 */

/* ============================================================
   ABOUT：圧縮案D「見出し左固定型」を本番に（2026-09-19・河野さん経由で先方了承・ABOUT のみ）
   .hsec＝左に見出し（320px・sticky）／右に本文。PC のみ。SP は従来の縦の連なりのまま
   数値は prototypes/compress-compare/compress.css の案D と同じ
   ============================================================ */
@media (min-width:1081px){
  .hsec{display:grid;grid-template-columns:320px minmax(0,1fr);gap:0 56px;align-items:start}
  .hsec__hd{position:sticky;top:calc(var(--hdr) + 24px)}
  .hsec__hd .sv-hd{margin:0}
  .hsec__body{min-width:0}

  /* OUR VALUES：右列でも 7 文字は横1列（列幅 ≈ 165px）。立体文字は約100px */
  .ov--row .ov__stage{padding:64px 0 60px}
  .ov--row .ov__hd{text-align:left}
  .ov--row .ov__br{display:none}
  .ov--row .ov__list{--cap:clamp(84px,5.6vw,104px);margin-top:0;gap:22px 12px;align-items:start}
  .ov--row .ov__list::before{display:none}
  .ov--row .ov__it{justify-content:flex-start}
  .ov--row .ov__fig{order:-1;margin:0 0 12px}
  .ov--row .ov__meta{border-left:0;padding:0;margin:0}
  .ov--row .ov__meta::after{display:none}
  .ov--row .ov__name{font-size:14px;line-height:1.2;border-left:1px solid rgba(20,21,26,.28);padding-left:10px;transition:border-color .9s var(--ease-soft)}
  .ov--row .ov__name small{font-size:11px;font-weight:700;color:var(--ink2);margin-top:4px}
  .ov--row .ov__desc{font-size:14px;line-height:1.75;margin-top:8px;padding-left:9px}
  .ov--row .ov__it.is-on .ov__name{border-left-color:var(--red)}

  /* ★2026-09-26 先方ご指示（HP追加④）
       「現在のコメント用のスペースが狭いので、コメント用スペースの始まりをもっと MESSAGE の文字よりにする。
        上の OUR VALUES の隣の横棒終わりの位置に合わせずに、もっと左よりから始まるように」
       「写真を現在より小さめに」
     実測（CSS幅1280）：文の列が 288px しかなく、引用が「社会に感動と価/値を。」と語中で折れていた。
     → ① MESSAGE だけ左の見出し列を 320→240px・段間を 56→36px にして、本文の始まりを 472→372px へ100px 左に
       ② 肖像を 360→280px に細く
       文の列は 288→476px になり、行長・折り返しとも落ち着く。
     ★見出し列 240px は「MESSAGE」が最大サイズ（64px）でも収まる幅（実測 約215px）。
       ここを詰めすぎると広い画面で見出しがはみ出す */
  .msg2 .hsec{grid-template-columns:240px minmax(0,1fr);gap:0 36px}
  /* ★2026-09-28 先方ご指示「MESSAGE の文言部分にあと4文字分ほど横に入るように。
       写真と文字がはなれすぎてるのを少しでも解消するため」
       写真列 280px→248px・文字との間隔 56px→28px で、1行あたり約4字ぶん広がる。
       ★.msg2__grid 本体の fr 指定はこの行に上書きされるので、直すのはここ */
  /* ★2026-09-29 河野さんご指摘「MESSAGE の本文テキストを右に」。
       ご意図は「テキストと写真との隙間を小さくするため」（ユーザーご確認）。
     ★実測すると、本文を右にずらしても隙間は変わらなかった。
       写真の左端は 936px で固定（器の右端1184 − 写真の幅248）なので、
       隙間 ＝ 936 − 文字の右端。左端を動かすと右端も同じだけ動くため隙間は不変。
       → 本文の左端は元（372px）に戻し、隙間そのものを詰める。
     ★詰め方は2つ必要だった（実測）。
       ① 列間 28px → 12px
       ② 本文の最大幅 34em → 40em
          34em（544px）のままだと列間をいくら詰めても文字が 544px で止まり、
          隙間は 20px までしか縮まなかった。
       結果（1280）：文字 372〜924px（552px・約33.5字）／写真 936px／隙間 12px。
       1920 は列間が効かず最大幅だけで決まる：文字 640px（約38.8字）／隙間 212→116px。 */
  .msg2 .hsec__body .msg2__grid{margin-top:0;grid-template-columns:minmax(0,1fr) 248px;gap:32px 12px}
  .msg2 .hsec__body .msg2__body{max-width:40em}
  /* 肖像：先方トリミング版の比率（1261×2241）そのまま */
  .msg2 .hsec__body .msg2__portrait{aspect-ratio:1203/1743}
  .msg2__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
}
@media (max-width:1080px){
  .hsec{display:block}
  /* SP も案D と同じ：7つの価値を 2 列のカード状に（立体文字 72px を上、名前・説明を下） */
  .ov--row .ov__list{--cap:72px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;margin-top:24px}
  .ov--row .ov__it{display:flex;flex-direction:column;gap:0;padding:0;border-top:0;min-width:0}
  .ov--row .ov__fig{order:-1;margin:0 0 8px;height:var(--cap)}
  .ov--row .ov__meta{border-left:0;padding:0;margin:0}
  .ov--row .ov__name{font-size:14px;font-weight:900;line-height:1.2}
  .ov--row .ov__name small{font-size:11px;color:var(--ink2);margin-top:4px}
  .ov--row .ov__desc{font-size:14px;color:var(--ink2);margin-top:6px}
}

/* ============================================================
   COMPANY：圧縮案D「見出し左固定型」を本番に（2026-09-19・ユーザー指示「company も D に」）
   ＋ 文字サイズの体系化（同「フォントサイズがバラバラ。値の文字が大きい」）
   体系：H1 84 ／ H2 48 ／ H3 24（AFFILIATION・BANK・TOKYO）／ 値 18（会社名・事業内容・取引先 など）／ 補足 13.5 ／ ラベル 11
   ============================================================ */
@media (min-width:1081px){
  /* PROFILE：右列の表。見出しの上端と 01 の行を揃える */
  .cpf-sec.hsec .cpf{margin-top:0;border-top:0}
  .hsec .cpf__row{grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px 40px;padding:18px 0}
  .hsec .cpf__row:first-child{padding-top:0}
  /* 見出しの下のオフィス写真（旧 .cov） */
  .hsec__ph{margin-top:26px}
  .hsec__ph .mtile{aspect-ratio:4/3}
  .hsec__ph .mtile img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
  .hsec__ph .cov__lb{margin-top:14px;padding-bottom:0}
  /* BUSINESS／CLIENTS：右列。上の罫と余白は見出し側に任せる */
  .hsec .cbz{margin-top:0;border-top:0}
  .hsec .cbz li{padding:16px 0}
  .hsec .cbz li:first-child{padding-top:0}
  .hsec .ccl{margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hsec .ccl li{padding:14px 0 13px 20px}
  .hsec .ccl__etc{padding:14px 0 13px 20px}
  /* ACCESS：地図は 16:9（左列に合わせて伸ばさない） */
  .cac__map{aspect-ratio:16/9;min-height:0;align-self:start}
}
/* 文字サイズの体系（PC・SP 共通の考え方。SP は下で一段小さく） */
.cpf__v,.cpf__names,.cpf__addr,.cbz p,.ccl li,.caf__it b,.caf__list--bank .caf__it span,.cac__addr{font-size:clamp(17px,1.05vw,19px)}
.cbz i{font-size:13px;letter-spacing:.08em}
.caf__hd,.cov__lb b{font-size:24px}
.cpf__k,.cpf__note,.cpf__tel,.caf__it span,.cac__st b{font-size:13.5px}
.ccl__etc{font-size:13.5px}
@media (max-width:1080px){
  .hsec__ph{margin:18px 0 6px}
  .hsec__ph .mtile{aspect-ratio:16/9}
  .hsec__ph .mtile img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
  .hsec__ph .cov__lb{margin-top:10px;padding:0}
  .cpf-sec.hsec .cpf{margin-top:20px}          /* 写真の下 → 表 */
  .cpf__v,.cpf__names,.cpf__addr,.cbz p,.ccl li,.caf__it b,.caf__list--bank .caf__it span,.cac__addr{font-size:17px}
  .ccl{font-size:17px}
  .caf__hd,.cov__lb b{font-size:22px}
}
@media (max-width:1080px){
  .msg2__portrait{aspect-ratio:1203/1743;max-width:420px;margin-inline:auto}
  .msg2__portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
}

/* ★2026-09-19：HISTORY アイコンのサイズは上の body.is-top .hist__ic（TOP 専用の可変サイズ）で調整。ここでは触らない */

/* ============================================================
   TOP ON AIR：ガラスの枠（2026-09-20・先方「ON AIR差し替え用.png」）
   ・半透明の白い板（backdrop-filter で後ろのキューブ・球がにじむ）＋上辺の光の帯＋外周の細い光
   ・枠内：左＝白いタイルにロゴ／右＝局名・番組名・罫・放送時間
   ・旧ディスプレイ（.disp__frame／.disp__screen）は使わない。JS 用の .disp__slide／.disp__dot はそのまま
   ★見た目を変えるときは、このブロックではなく下の「2026-09-21 先方画像に近づける」版を直すこと。
     同じ詳細度の .glass / .glass__in が後ろにもう一度あり、後勝ちでそちらが効いている。
   ============================================================ */
.nowair--glass{max-width:440px}
@media (min-width:861px){ .nowair--glass{max-width:440px} }
.glass{position:relative;border-radius:18px;padding:10px;
  background:linear-gradient(160deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.42) 60%,rgba(255,255,255,.30) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(20,21,26,.06),
    0 24px 44px rgba(20,21,26,.14),0 2px 8px rgba(20,21,26,.06),0 0 0 6px rgba(255,255,255,.18)}
/* 上辺・左辺の光の帯（ガラスの厚みの映り込み） */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 78%,rgba(255,255,255,.35) 100%)}
/* 板の下の映り込み（床への反射） */
.glass::after{content:"";position:absolute;left:8%;right:8%;bottom:-22px;height:22px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,255,255,.9) 0%,rgba(228,0,43,.10) 45%,rgba(20,21,26,0) 75%);filter:blur(6px)}
.glass__in{position:relative;border-radius:11px;background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1px 6px rgba(20,21,26,.05)}
.nowair--glass .disp__track{list-style:none;position:relative;height:auto;aspect-ratio:auto;min-height:132px}
.nowair--glass .disp__slide{position:absolute;inset:0;display:grid;grid-template-columns:44% minmax(0,1fr);gap:0 16px;align-items:center;padding:12px 14px 12px 12px}
.nowair--glass .oa-lg{display:flex;align-items:center;justify-content:center;height:100%;min-height:104px;border-radius:9px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),0 1px 2px rgba(20,21,26,.05)}
.nowair--glass .oa-lg img{max-width:86%;max-height:86px;width:auto;height:auto;object-fit:contain}
.oa-info{display:flex;flex-direction:column;min-width:0}
.oa-info__m{font-size:12px;font-weight:700;color:var(--ink2);letter-spacing:.02em}
.oa-info__t{display:block;font-size:17px;font-weight:900;line-height:1.3;letter-spacing:-.01em;margin-top:2px;word-break:auto-phrase}
.oa-info__tm{font-size:13px;font-weight:700;margin-top:8px;padding-top:8px;border-top:1px solid rgba(20,21,26,.12);letter-spacing:.02em}
.oa-info__tm small{display:block;font-size:10.5px;font-weight:700;color:var(--ink2);margin-top:2px}
.nowair--glass .disp__dots{justify-content:center;margin-top:12px}
@media (max-width:860px){
  .nowair--glass{max-width:100%}
  .nowair--glass .disp__slide{grid-template-columns:40% minmax(0,1fr);padding:10px 12px 10px 10px}
  .nowair--glass .oa-lg{min-height:92px}
  .nowair--glass .oa-lg img{max-height:76px}
  .oa-info__t{font-size:16px}
}
/* ★2026-09-20 ユーザー指摘「ON AIR の文字が背後の赤キューブに被って読みにくい」：
   ラベルに白い半透明の下地（ガラスと同じ質感）。幅によってキューブとの位置関係が変わっても読める */
.nowair--glass .oa-live{position:relative;z-index:2;display:inline-flex;padding:5px 10px 5px 8px;border-radius:999px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2px 6px rgba(20,21,26,.08);margin-bottom:8px}
@media (max-width:860px){ :root{--gut:20px} }   /* SP は従来どおり両端 20px */

/* ★2026-09-21 先方FB「ON AIR の枠が大きすぎる」：文字を小さく／ロゴは DEEP のロゴ（正方形 432px を約 60px で表示）と同じ見え方に揃え、
   白いタイル（余白）を外して全体をコンパクトに。枠幅 440→340px */
.nowair--glass{max-width:340px}
@media (min-width:861px){ .nowair--glass{max-width:340px} }
.glass{padding:7px;border-radius:14px}
.glass__in{border-radius:9px}
.nowair--glass .disp__track{min-height:84px}
.nowair--glass .disp__slide{grid-template-columns:72px minmax(0,1fr);gap:0 12px;padding:8px 12px 8px 10px}
.nowair--glass .oa-lg{min-height:0;height:64px;border-radius:0;background:none;box-shadow:none}
.nowair--glass .oa-lg img{max-width:64px;max-height:64px}
.oa-info__m{font-size:10px}
.oa-info__t{font-size:13.5px;margin-top:1px}
.oa-info__tm{font-size:11px;margin-top:5px;padding-top:5px}
.oa-info__tm small{font-size:9.5px}
.nowair--glass .disp__dots{margin-top:8px}
.nowair--glass .oa-live{margin-bottom:6px}
@media (max-width:860px){
  .nowair--glass{max-width:100%}
  .nowair--glass .disp__slide{grid-template-columns:64px minmax(0,1fr);padding:8px 10px}
  .nowair--glass .oa-lg{height:56px}
  .nowair--glass .oa-lg img{max-width:56px;max-height:56px}
  .oa-info__t{font-size:13px}
}

/* ★2026-09-21 先方FB「WORKS の CASE はロゴが先で何を見せる所か分からない」：YouTube・ライブ配信／企業・自治体の CASE カードは
   情報（CASE 番号・登録者数・チャンネル名／企業名）を先に大きく、ロゴ・写真は小さな飾りに（.csg--case） */
.csg--case .prg{display:grid;grid-template-columns:minmax(0,1fr) 72px;grid-template-areas:"mt vis" "ttl vis" "tx vis" "more vis";gap:0 18px;align-items:start;padding:22px 0 24px;border-top:1px solid var(--line)}
.csg--case .prg:first-child{border-top:0;padding-top:0}
.csg--case .prg__mt{grid-area:mt;margin-top:0}
.csg--case .prg__net{font-size:12px;color:var(--red)}
.csg--case .prg__tm{font-size:15px;color:var(--ink)}
.csg--case .prg__ttl{grid-area:ttl;font-size:clamp(22px,1.8vw,30px);line-height:1.25;margin-top:8px}
.csg--case .prg__tx{grid-area:tx;margin-top:10px;max-width:34em}
/* ★2026-09-28 先方「和田ラボのキャスティングも上の行と一緒にして並べて横幅をかせぐ？？」。
     34em（425px）は“本文の行長”の制限で、タグの並びには不要。カード幅 516px を使い切れるよう外す */
.csg--case .prg__role{max-width:none}

/* ============================================================
   ★2026-09-29 先方「HP修正依頼⑦」LIVE STREAMING
     「CASE０１〜０３が縦並びでなく、横並びでお願いしたいです」
   ★⑥の「CASE０１〜０３を１列に並べる」を“縦1列”と読み違えていた。
     正しくは“横1行に3件”（⑥以前は 2 列で CASE03 だけ2行目に残っていた）。
     works-corporate で同じ事情に使った .csg--3up を HTML 側に付けて3列に戻す。
   ★⑥の「写真は左側に移動」＝写真を先に見せたい、というご意図なので、
     横並びでは写真をカードの一番上に置く（works-corporate は「説明文の下」＝別のご指示）。
     実測：3列だと1枚 341px。写真を左に置くと文字が 193px しか残らず、
     CASE01 の見出しが「公認大／会」と割れるため、上に置いて幅いっぱいに使う。
   ★⑥で入れた「説明文を大きく（16.5px）」「見出しと近づける」はこの形でも維持する。
   ★LIVE は h4 と写真が .prg__nm に包まれているので display:contents で
     カードの grid に直接載せる（HTML の入れ子は触らない）。
   ============================================================ */
.live .csg--case .prg{grid-template-areas:"vis" "mt" "ttl" "tx" "more"}
.live .csg--case .prg__nm{display:contents}
.live .csg--case .prg__vis,
.live .csg--case .prg--photo .prg__vis{aspect-ratio:16/9;margin:0 0 14px;align-self:start}
.live .csg--case .prg__mt{margin-top:0}
.live .csg--case .prg__ttl{grid-area:ttl;font-size:clamp(18px,1.6vw,21px);margin-top:6px}
.live .csg--case .prg__tx{grid-area:tx;margin-top:8px;font-size:16.5px;max-width:none}

/* ============================================================
   ★2026-09-28 ユーザーご指示：YOUTUBE/SNS の CASE は画像を左側に大きめに置き、
     CASE01 と CASE02 の間に隙間が生じないようにする。
   実測（変更前・1280）：カードは 516px あるのに CASE01 の名前＋ロゴの行は 423px で終わり、
     そこから CASE02 の左端 572px まで 149px が空いていた。
   ★ロゴは左の列に置くが、タグの行は全幅を使う（grid-area を "vis mt" "vis ttl" "tx tx" "more more" にする）。
     タグを狭い列に入れると和田ラボの7個が2行に戻ってしまうため。
   ★HTML は触らず .prg__nm を display:contents にしてカードの grid に直接載せる（LIVE と同じ手）。
   ============================================================ */
@media (min-width:861px){
  #youtube .csg--case.csg--2{gap:0 32px}
  /* ★先方の Word の位置関係に合わせる（2026-09-29 ユーザーご指示）：
       CASE01 … ロゴの上に全幅で
       ロゴ   … 左。右に「登録者◯万人以上」と「チャンネル名」を上下に
       その下に「チャンネル企画・運用」とタグを全幅で
     .prg__mt（CASE01＋登録者）と .prg__nm（名前＋ロゴ）はどちらも display:contents にして、
     中の4つをカードの grid に直接置く。 */
  #youtube .csg--case .prg{grid-template-columns:180px minmax(0,1fr);
    grid-template-areas:"net net" "vis tm" "vis ttl" "tx tx" "more more";gap:0 20px;align-items:start}
  #youtube .csg--case .prg__mt,#youtube .csg--case .prg__nm{display:contents}
  #youtube .csg--case .prg__net{grid-area:net;margin-bottom:8px}
  #youtube .csg--case .prg__tm{grid-area:tm;align-self:end}
  #youtube .csg--case .prg__vis{grid-area:vis;width:180px;flex-basis:180px;align-self:start}
  #youtube .csg--case .prg__ttl{grid-area:ttl;margin-top:2px;align-self:start}
  #youtube .csg--case .prg__role{margin-top:14px}
}
@media (max-width:860px){
  /* ★2026-09-29 ⑦で横並び（写真は上）に変えたので、写真を左の列に置く上書きは外した */
}
.csg--case .more{grid-area:more;margin-top:14px;padding-top:0}
.csg--case .prg__vis{grid-area:vis;aspect-ratio:1/1;width:72px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(20,21,26,.08)}
.csg--case .prg__vis img{padding:12%}
.csg--case .prg--photo .prg__vis{aspect-ratio:1/1;width:72px}   /* ★2026-09-23 ロゴ側は 72px にしていたが、写真側にこの上書きが残っていた（9/21 指示は「写真も 72px にそろえる」） */
.csg--case .prg--photo .prg__vis img{padding:0}
.csg--case.csg,.csg--case.csg--2{grid-template-columns:1fr;gap:0;margin-top:26px}
@media (min-width:1081px){
  .csg--case.csg--2,.csg--case.csg{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
  .csg--case .prg:nth-child(2){border-top:0;padding-top:0}
}

/* ============================================================
   ★2026-09-21 ユーザー「ON AIR は先方の画像（ON AIR差し替え用.png）に近づける」
   先方画像の構造：厚みのあるガラスの外枠 → 白い内カード（右上に ●●● ）→ 左＝白いタイルに大きなロゴ／右＝局名（小）・番組名（太・大）・罫・放送時間（太）
   → 下に赤い丸長のページ送り＋灰の点。周りのキューブは js/fv-alt.js の衛星（枠の実座標に追従）。
   幅は先方「大きすぎる」を踏まえ 372px（〜1400px 幅では 344px）。上の 9/21 コンパクト版の値をここで上書き
   ============================================================ */
.nowair--glass{max-width:372px}
@media (min-width:861px){ .nowair--glass{max-width:372px} }
@media (min-width:861px) and (max-width:1400px){ .nowair--glass{max-width:344px} }
/* ★2026-09-23 先方「ON AIRの枠がクリアの透明でなく、白いハーフになってしまっている。
     外枠は透明のクリアでお願いします」
   ★2026-09-24 第2版：面の白を薄める直し方（.62→.14）では「薄い白い板」のままで、
     先方にも「まだ色の半透明に見える」とお戻しをいただいた。考え方を変える。
     透明なガラスは面では見えない。見えるのは縁だけ。
     → 面は完全に透明（background なし・backdrop-filter なし）にして、
       ①縁の光（上下左右で明暗を変える＝厚みのある板）
       ②角のごく狭い映り込み
       ③板が落とす影
       の3つだけでガラスに見せる。にじみは入れない（クリアなガラスは後ろをぼかさない）。
   中の白いカード（.glass__in .94）は文字の読みやすさのため据え置き（ご指示も外枠のみ）
   ★透明かどうかは「帯の明るさ」ではなく「後ろの赤いキューブが枠越しに何色で見えるか」で測る。
     枠の外の赤 (248,83,95) に対し、枠の中の赤は 9/20版(254,241,242)＝ほぼ白 →
     .14に薄めた版(255,176,183) → この版(251,104,117)。帯の明るさだけ見ていると直ったつもりになる。 */
/* ★2026-09-24 先方「透明な枠に光沢感を表現できますか」
   → 面を白くすると透明でなくなるので、光沢は「細い光の筋」と「縁の明暗差」で出す。
     ・斜めに走る細い光の筋を2本（それぞれ幅 3% 前後）。面は覆わない
     ・上辺と左辺をより明るく、下辺と右辺をより暗くして、磨かれたガラスの厚みを出す */
.glass{padding:11px;border-radius:22px;
  background:linear-gradient(118deg,
    rgba(255,255,255,0) 0%,rgba(255,255,255,0) 36%,
    rgba(255,255,255,.66) 39.5%,rgba(255,255,255,.20) 41.5%,rgba(255,255,255,0) 44%,   /* 上の帯（40.1%）に光の筋 */
    rgba(255,255,255,0) 84%,rgba(255,255,255,.26) 88%,rgba(255,255,255,0) 92%,         /* 右の帯（88.2%）に弱い照り返し */
    rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:
    /* ① 縁：上と左は光を受けて明るく、下と右は影になる。これだけで「厚みのある板」に見える */
    inset 0 1.5px 0 rgba(255,255,255,1),inset 1.5px 0 0 rgba(255,255,255,.88),
    inset 0 -1.5px 0 rgba(20,21,26,.15),inset -1.5px 0 0 rgba(20,21,26,.11),
    inset 0 0 0 1px rgba(255,255,255,.34),
    /* ③ 板が落とす影。浮いて見えるのはこれのおかげなので残す */
    0 26px 48px rgba(20,21,26,.13),0 3px 10px rgba(20,21,26,.05)}
/* ② 角の映り込み：左上と右下の端だけ。面まで届かせない（届かせると白い板に戻る） */
.glass::before{background:linear-gradient(118deg,rgba(255,255,255,.50) 0%,rgba(255,255,255,.06) 2.5%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 96%,rgba(255,255,255,.18) 100%)}
/* 床への映り込み。枠が透明になったぶん白く光らせすぎない */
.glass::after{left:6%;right:6%;bottom:-26px;height:26px;filter:blur(8px);
  background:radial-gradient(ellipse,rgba(255,255,255,.55) 0%,rgba(228,0,43,.07) 45%,rgba(20,21,26,0) 75%)}
.glass__in{border-radius:14px;background:rgba(255,255,255,.94);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,1),0 1px 2px rgba(20,21,26,.05),inset 0 -1px 0 rgba(20,21,26,.04)}
/* ★2026-09-23 先方「枠内の右上にある３つの丸（・・・）は無しに」
   → 内カード右上の飾り（.glass__in::before）を削除。あわせて右の内余白を少し詰める（同ご依頼） */
.nowair--glass .disp__track{min-height:136px}
.nowair--glass .disp__slide{grid-template-columns:41% minmax(0,1fr);gap:0 14px;padding:13px 10px 13px 13px}
.nowair--glass .oa-lg{height:100%;min-height:110px;border-radius:11px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),inset 0 2px 10px rgba(20,21,26,.06)}
.nowair--glass .oa-lg img{max-width:84%;max-height:92px}
.oa-info__m{font-size:12px;color:var(--ink)}
.oa-info__t{font-size:18px;margin-top:2px;line-height:1.25}
.oa-info__tm{font-size:13.5px;margin-top:8px;padding-top:8px;border-top-color:rgba(20,21,26,.16)}
.oa-info__tm small{font-size:10.5px}
.nowair--glass .disp__dots{gap:8px;margin-top:14px}
.nowair--glass .disp__dot{width:8px;height:8px;background:#cdd0d8}
.nowair--glass .disp__dot.is-on{width:24px;border-radius:4px}
.nowair--glass .oa-live{margin-bottom:8px}
@media (min-width:861px) and (max-width:1400px){
  .nowair--glass .disp__track{min-height:124px}
  .nowair--glass .disp__slide{padding:11px 9px 11px 11px;gap:0 12px}
  .nowair--glass .oa-lg{min-height:100px}
  .nowair--glass .oa-lg img{max-height:82px}
  .oa-info__t{font-size:16.5px}
  .oa-info__tm{font-size:12.5px}
}
@media (max-width:860px){
  .nowair--glass{max-width:100%}
  .glass{padding:9px;border-radius:18px}
  .nowair--glass .disp__track{min-height:112px}
  .nowair--glass .disp__slide{grid-template-columns:38% minmax(0,1fr);gap:0 12px;padding:10px 9px 10px 10px}
  .nowair--glass .oa-lg{height:100%;min-height:92px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),inset 0 2px 8px rgba(20,21,26,.06)}
  .nowair--glass .oa-lg img{max-width:84%;max-height:76px}
  .oa-info__t{font-size:16px}
  .oa-info__tm{font-size:12.5px}
}

/* ★2026-09-21 ユーザー「ON AIR のロゴはもう少し小さく」：タイルはそのまま、ロゴの上限を下げる */
.nowair--glass .oa-lg img{max-width:72%;max-height:74px}
@media (min-width:861px) and (max-width:1400px){ .nowair--glass .oa-lg img{max-height:66px} }
@media (max-width:860px){ .nowair--glass .oa-lg img{max-width:72%;max-height:62px} }

/* ★2026-09-21 ユーザー「縦長ロゴがはみ出す。縦の MAX を決めて収める」
   原因は 2 つ：①スライドが絶対配置で枠の高さが固定（文字の長い番組では中身が枠を超える）②タイルの高さがスライドに連動して伸びていた。
   → スライドは同じマスに重ねる grid（枠の高さは一番長いスライドに追従・切替のフェードはそのまま）。
     タイルは固定高さ・ロゴはタイルの内側に収まる上限（縦横とも）で、縦長でも横長でも同じ見た目の大きさに揃う */
.nowair--glass .disp__track{display:grid;min-height:0;height:auto}
.nowair--glass .disp__slide{position:relative;inset:auto;grid-area:1/1;align-items:center}
.nowair--glass .oa-lg{height:96px;min-height:0;align-self:center;overflow:hidden}
.nowair--glass .oa-lg img{max-width:74%;max-height:68px;width:auto;height:auto}
@media (min-width:861px) and (max-width:1400px){
  .nowair--glass .oa-lg{height:88px}
  .nowair--glass .oa-lg img{max-height:62px}
}
@media (max-width:860px){
  .nowair--glass .oa-lg{height:84px;min-height:0}
  .nowair--glass .oa-lg img{max-width:74%;max-height:58px}
}

/* ★2026-09-21 ユーザー「WORKS の黒いカードの見出しが 2 行になる（余白を取って幅が狭くなったため）」：
   カード幅に応じた文字サイズ（コンテナクエリ単位）＋折り返し禁止。1280 幅（カード 351px）で 18px 前後、狭いほど小さく */
.wkc{container-type:inline-size}
.wkc__ja{white-space:nowrap;font-size:clamp(15px,5.3cqw,27px)}
body.is-top .wkc__ja{font-size:clamp(15px,5.3cqw,27px)}
@media (max-width:860px){ .wkc__ja{white-space:normal;font-size:clamp(19px,5.2vw,24px)} }

/* ★2026-09-21 SP：FV の圧縮に合わせて NOW ON AIR を上へ寄せる（ユーザー指示「FV と NOW ON AIR の距離を詰める」） */
@media (max-width:860px){
  .nowair{margin-top:18px}
  .hero{padding-bottom:6px}
}

/* ★2026-09-22 SP の見出し階層（ユーザー指摘）：
   「PASSIONの2つの事業」「WORKS」は、その配下の「テレビ番組制作」「企業向けコンテンツ制作」より上位。
   SP では 23px < 26px と逆転していたため、セクション見出しを大きく、配下を一段下げる */
@media (max-width:860px){
  body.is-top .sec-hd h2{font-size:30px}          /* 2つの事業・ABOUT など */
  body.is-top .wks__ttl{font-size:28px}           /* WORKS（欧文大文字ぶん控えめ） */
  body.is-top .bz__ja{font-size:22px}             /* テレビ番組制作／企業向けコンテンツ制作 */
  body.is-top .bz__no{font-size:16px}
}

/* SELECTED PROGRAMS（service-tv）：SP パネルは画面が広いほど列を増やす。
   4 列のままだと 820px で 1 枚 180px になり、「高密度に並べる」というこの区画の目的から外れるため。2026-09-22 */
@media (min-width:601px) and (max-width:860px){
  .lf__lg{flex:0 0 calc(16.666% - 7.5px)}   /* gap 9px × 5 を差し引いた 6 列 */
}

/* ============================================================
   ★2026-09-23 WORKS の CASE（先方 9/23 メール「YouTubeの登録者は添付⑤のように目立たせて」）
   添付⑤＝ 9/21 に先方へお送りした案C（99_雑フォルダ/20260921_CASE見せ方_比較/05_…png）。
   先方の元のご指摘は「最初にロゴが来てしまって何を見せる所かわからない。ロゴは飾り」。
   指定は 20260921_修正指示_WORKSのCASEの見せ方（登録者数を主役に）.md の案C に従う。
   原則：登録者数の数字は、チャンネル名と同じか、やや小さいまでが上限（河野さん 9/21）
   ============================================================ */
.csg--case .prg__mt{display:block}                       /* CASE番号と登録者数を横並びにしない */
.csg--case .prg__net{font-size:13px;font-weight:900;color:var(--red)}
.csg--case .prg__tm{display:block;margin-top:6px;line-height:1.25;color:var(--ink)}
.prg__tm-lb{font-size:14px;font-weight:700;color:var(--ink2)}
.prg__tm-no{font-size:26px;font-weight:900;letter-spacing:-.01em;margin:0 .08em 0 .3em}
.prg__tm-un{font-size:16px;font-weight:700}
/* チャンネル名・社名：1280 以上で 30px（先方がご覧になる幅）。狭い画面では 24px まで落とす */
.csg--case .prg__ttl{font-size:clamp(24px,2.35vw,30px);margin-top:4px}

/* ★2026-09-23 先方「全体設計／企画／撮影／編集／投稿管理／分析／キャスティングは、四角ベースにいれる？など、
   　チャンネル企画・運用と並列にならないようにお願いします」
   → 役割（チャンネル企画・運用）を見出しにし、作業の内訳は小さな四角いタグで下の行に置く */
.prg__role{margin-top:8px}   /* ★2026-09-28 先方「スペースが空きすぎてる印象を薄めたい」 */
.prg__role-hd{font-size:13px;font-weight:900;line-height:1.5;color:var(--ink);letter-spacing:.01em}
.prg__tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.prg__tags li{font-size:11.5px;font-weight:700;line-height:1;color:var(--ink2);padding:6px 9px;border-radius:4px;
  background:var(--card);box-shadow:inset 0 0 0 1px rgba(20,21,26,.10)}
@media (max-width:860px){
  .prg__tm-no{font-size:23px}
  .prg__tags li{font-size:11px;padding:5px 8px}
}

/* ============================================================
   ★2026-09-24 先方「CASE01・02 ともにチャンネルロゴとチャンネル名が離れすぎているので
   　ロゴをもう少し大きくして近づけて欲しい／企画・撮影・編集なども、もう少し大きく」
   ロゴは右上の隅に離れて浮いていた（72px・4行ぶんの列の先頭）。
   → ロゴの置き場所をチャンネル名の行だけに移し、名前と上下の中心をそろえて対にする。
     大きさは 72 → 104px。番組ロゴと同じく等比のまま（改変しない）
   ============================================================ */
.csg--case .prg{grid-template-areas:"mt" "ttl" "tx" "more";grid-template-columns:minmax(0,1fr);gap:0}
/* チャンネル名とロゴを1つの行に組み、上下の中心をそろえて隣どうしに置く */
.prg__nm{grid-area:ttl;display:flex;align-items:center;gap:18px}
.csg--case .prg__nm .prg__ttl{margin-top:0}
/* チャンネルロゴは横長（225×125・212×44）。正方形の枠に等比で収めると枠の半分も使えないので、
   枠を 4:3 にして内側の余白も詰め、ロゴそのものを大きく見せる（等比のまま・改変はしない） */
.csg--case .prg__vis{width:136px;flex:0 0 136px;aspect-ratio:16/9;align-self:center}   /* ★2026-09-28 先方「登録者とチャンネル名の行間を少し狭める」。
     ロゴは 225×125（比1.80）と 212×44（比4.82）でどちらも横長。4:3 の枠だと下に 26px の死に領域ができ、
     名前の行が 102px になって行間が開いていた。16:9 にすると描画サイズはそのままで行が 76px に詰まる */
.csg--case .prg__vis img{padding:6%}
.csg--case .prg--photo .prg__vis{width:136px;aspect-ratio:4/3}
/* 作業の内訳タグと、その見出しをひとまわり大きく */
.prg__role-hd{font-size:15.5px}   /* ★2026-09-28 先方「チャンネル企画・運用の文字を今より大きめに」14→15.5px */
.prg__tags li{font-size:14px;padding:7px 10px}   /* ★同「企画・撮影・編集・投稿管理の文字も大きめに」13→14px */
@media (max-width:860px){
  .prg__nm{gap:14px}
  .csg--case .prg__vis,.csg--case .prg--photo .prg__vis{width:112px;flex-basis:112px}
  .prg__tags li{font-size:12px;padding:6px 9px}
}

/* ============================================================
   ★2026-09-23 ABOUT / OUR VALUES（先方「HP修正依頼②」）
   「ＰＡＳＳＩＯＮをつくる、７つの価値。のサイズを MESSAGE と同じにして、その分、３ＤのＰＡＳＳＩＯＮと
    説明を大きくしてください。英語表記の意味の日本語部分は、下の説明の文字より目立つように」
   実測（CSS幅1280）：見出し 53.76px／MESSAGE 43.52px／立体文字 84px／日本語 11px < 説明 12px（逆転していた）
   → 見出しを MESSAGE と同じ clamp(28px,3.4vw,48px) にし、左の見出し列を 320→240px・段間を 56→40px に詰めて
     右へ渡す幅を増やす。その幅で立体文字と説明を大きくする
   ============================================================ */
@media (min-width:861px){ .ov__ttl{font-size:clamp(28px,3.4vw,48px)} }   /* SP（26px）は据え置き */
/* 〜1080px（SP・タブレット）も同じ逆転（日本語 11px < 説明 12px）が起きていたので、同じ考え方で直す */
@media (max-width:1080px){
  .ov--row .ov__name small{font-size:13px;font-weight:900;color:var(--ink);margin-top:5px}
  .ov--row .ov__desc{font-size:14.5px;line-height:1.85;margin-top:7px}
}
@media (min-width:1081px){
  /* ★2026-09-23 河野さん指摘：1366px 以上で見出しが「7つの価／値。」と割れる。
     原因は、文字が clamp(28px,3.4vw,48px) で画面幅とともに大きくなるのに列が 240px 固定だったこと。
     いちばん大きい 48px でも「7つの価値。」が1行に収まる幅にする（実測 約260px ＋ 余裕） */
  .ov--row .hsec{grid-template-columns:296px minmax(0,1fr);gap:0 40px}
  .ov--row .ov__list{--cap:clamp(96px,7.5vw,120px);gap:22px 8px}
  .ov--row .ov__img{max-width:100%;object-fit:contain;object-position:bottom}   /* 幅の広い文字（A・N）が隣の列へはみ出さないように */
  .ov--row .ov__ref{max-width:100%;object-fit:contain}
  /* 「プロの仕事と責任感」など英語の意味。説明より目立たせる（大きく・濃く・太く） */
  .ov--row .ov__name small{font-size:14px;font-weight:900;color:var(--ink);margin-top:5px}
  .ov--row .ov__desc{font-size:15px;line-height:1.8;margin-top:9px}
}

/* ============================================================
   ★2026-09-23 COMPANY（先方「HP修正依頼②」）
   「事業内容・加盟団体（一般社団法人のあとを改行しない）・取引銀行（1行で）・主要取引先の
    記載の仕方を、会社名や所在地と同じ並びになるように変更してください」
   → 独立3区画（.cbz / .caf / .ccl）をやめ、会社概要の表（dl.cpf）の行にした。
     値の見せ方は、会社名（.cpf__v）・取締役（.cpf__names）と同じ言葉づかいに揃える。
   ※ .cbz / .caf / .ccl の CSS は参照ゼロになったが、いったん残置（納品後に整理する）
   ============================================================ */
.cpf__lines{list-style:none;display:grid;gap:9px}
.cpf__lines li{position:relative;padding-left:18px;font-size:clamp(15px,1.05vw,17px);font-weight:700;line-height:1.6;word-break:auto-phrase}
.cpf__lines li::before{content:"";position:absolute;left:0;top:.74em;width:7px;height:1px;background:var(--red)}
.cpf__org{list-style:none;display:grid;gap:14px}
.cpf__org b{display:block;font-size:clamp(16px,1.05vw,18px);font-weight:900;letter-spacing:.02em;line-height:1.2}
.cpf__org span{display:block;font-size:13.5px;font-weight:700;line-height:1.7;margin-top:4px;color:var(--ink2)}
.cpf__org a{display:inline-block;color:inherit;transition:color var(--dur-soft) var(--ease-soft)}   /* block だと矢印が dd の右端まで飛ぶ */
.cpf__org a:hover{color:var(--red)}
.cpf__org a span{color:inherit}
/* ★2026-09-23 先方「矢印が全日本テレビ番組製作社連盟に向かっていて混乱する」
   右上に絶対配置していたため、1行上の ATP の行を指して見えていた。団体名の文字の並びに置く */
.cpf__org a .ext{margin-left:.4em;vertical-align:.02em}
.cpf__names--cl{gap:8px 26px;font-size:clamp(15px,1.05vw,17px);align-items:baseline}
.cpf__etc{font-size:.82em;font-weight:700;color:var(--ink2)}   /* 「ほか」は社名の約80%（旧 .ccl__etc と同じ考え方） */

/* ★2026-09-23 外観写真を ACCESS から PROFILE の見出し列へ（先方ご指示の2案のうち「縦並びで2枚」を採用）。
   2枚目は1枚目より少し低くして、同じ大きさが2つ並ぶ見え方にしない */
.hsec__ph{display:grid;gap:12px}
.hsec__ph .cov__lb{grid-column:1}
/* ★セレクタは .hsec__ph .hsec__ph2 にする。.hsec__ph2 だけだと、メディアクエリ内の
   .hsec__ph .mtile{aspect-ratio:4/3} のほうが詳細度が高く、2枚目の比率が効かない */
@media (min-width:1081px){ .hsec__ph .hsec__ph2{aspect-ratio:16/10} }
@media (max-width:1080px){ .hsec__ph .hsec__ph2{aspect-ratio:2/1} }
/* ★左列が画面より高くなる画面（ノートPCの 1366×768 など）では固定しない。
   固定したままだと下端の説明文が一度も画面に入らない（実測：下端 868px / 画面 768px） */
@media (min-width:1081px) and (max-height:880px){ .cpf-sec .hsec__hd{position:static} }

/* ============================================================
   ★2026-09-23 SERVICE / テレビ番組制作「OUR STRENGTHS」に 3D アイコンを置く（先方ご指示）
   ・番号と同じ行の右端、下ぞろえ。カードにはしない（この区画はタイポグラフィ中心の作り）
   ・4点は台座の見かけの幅をそろえてある → 幅を固定して並べると台座の大きさがそろう
     （高さは絵によって違うので、箱の高さを決めて下ぞろえにする）
   ============================================================ */
/* ★2026-09-24 先方お戻し（案A）：
   「０１の隣に PLANNING、その下に企画力を置いて文字を大きく。アイコンはもっと下げて左の文字に寄せる。
     ノートPCで1画面に入るように」
   ・番号と英語を同じ行に（.st__ttl）、その下に日本語（.st__ja）
   ・アイコンは右端に飛ばさず、文字のすぐ右に置く（justify-content:space-between をやめた）
   ・アイコンの最上部を番号の最上部にそろえる（align-items:flex-start） */
.st__hd{display:flex;align-items:flex-start;gap:22px}
.st__hdtx{min-width:0}
.st__ttl{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
/* ★2026-09-25 先方「企画力は01の数字と頭合わせになっているが、PLANNING の英字と頭合わせにしてほしい」。
   .st__hdtx を2列のグリッドにし、.st__ttl を display:contents にして中の2つを直接の子にする。
   01＝1列目／PLANNING と 企画力＝2列目。こうするとフォントに関係なく必ずそろう
   （margin で押すと、数字の字幅が変わったときにずれる）。
   SP は元の折り返し（flex-wrap）のままにしたいので PC 幅だけに当てる */
@media (min-width:861px){
  .st__hdtx{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline}
  .st__ttl{display:contents}
  .st__ja{grid-column:2}
}
.st__ic{flex:none;display:block}
.st__ic img{width:104px;height:auto;display:block}
@media (max-width:860px){
  .st__hd{gap:14px}
  .st__ic img{width:92px}
}

/* ============================================================
   ★2026-09-24 SERVICE の「5 GENRES」「4 AREAS」を作り替え（先方お戻し）
   「マウスを持っていけば切り替わるスタイルではなく、操作せずに各ジャンルごとに
     番組ロゴが見えるように」→ 切り替えをやめ、1行＝1ジャンルで全件を同時に見せる。
   左に文字（番号・英語・日本語・説明）、右にメディア（TV＝番組ロゴ2点／企業向け＝写真1点）。
   ============================================================ */
.sgen__list{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.sgen__it{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:0 40px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--line)}
.sgen__tx{min-width:0}
.sgen__t{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
/* ★2026-09-24 4 AREAS のタイトル脇の3Dアイコン（トップ「20年の歩み」と同じ素材）。
   白地の生成画像なので multiply で面に馴染ませる（HISTORY・ARCHIVE と同じ扱い。画像は加工しない） */
.sgen__ic{width:52px;height:52px;flex:none;align-self:center;object-fit:contain;mix-blend-mode:multiply;margin-right:-2px}
.sgen__no{font-size:13px;font-weight:900;letter-spacing:.06em;color:var(--red)}
.sgen__en{font-size:clamp(19px,1.8vw,26px);font-weight:900;letter-spacing:-.01em;line-height:1.15}
.sgen__ja{font-size:14.5px;font-weight:700;color:var(--ink2)}   /* ★2026-09-28 先方ご指示：英字の横のカタカナ表記も少し大きく（13→14.5px） */
.sgen__d{margin-top:9px;max-width:34em}
.sgen__d p{font-size:15px;line-height:1.9;color:var(--ink2)}
.sgen__d p+p{margin-top:.5em}
.sgen__tx .more{margin-top:12px}
/* メディア：TV は番組ロゴ2点、企業向けは写真1点 */
.sgen__mv{display:grid;gap:12px;min-width:0}
.sgen--tv .sgen__mv{grid-template-columns:1fr 1fr}
.sgen__lg{display:grid;place-items:center;min-width:0;min-height:0;aspect-ratio:11/6;padding:12px;
  background:var(--card);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),var(--shadow-s)}
/* ★番組ロゴは改変不可。scale-down＝面の内側に収める・原寸より大きくしない */
.sgen__lg img{width:100%;height:100%;min-width:0;min-height:0;object-fit:scale-down;object-position:center}
/* ★2026-09-28 先方ご指示：4AREAS 01 は亀チャンネルの位置に2枚（亀＋和田毅ラボ）を小さめ・斜めに。
     ロゴ自体は等比で収めるだけ（scale-down）で、傾けるのは台紙。色・比率は触らない。 */
.sgen__lg--pair{position:relative;background:transparent;box-shadow:none;padding:0;place-items:stretch}
.sgen__lgc{position:absolute;width:64%;aspect-ratio:11/6;display:grid;place-items:center;padding:9px;
  background:var(--card);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(20,21,26,.06),var(--shadow-s)}
.sgen__lgc img{width:100%;height:100%;min-width:0;min-height:0;object-fit:scale-down;object-position:center}
.sgen__lgc--a{left:0;top:2%;rotate:-4deg;z-index:1}
/* ★2026-09-29 先方「HP修正依頼⑦」：和田毅ラボが亀のイラストに重ならないようにする。
   亀のロゴ（225×125）は絵が x2〜223 / y1〜123 とほぼ全域にあり、重ねる位置を
   ずらすだけでは避けられない（従来は亀の画素の 15.2% が隠れていた＝実測）。
   → 和田のロゴは 212×44 の横長（比4.82）で 11/6 の台紙だと上下が大きく余っていたので、
     台紙を 3/1 の横長にして幅も 56% に詰めた。高さが減るぶん亀にかからなくなり、
     ロゴ自体はむしろ大きく見える。亀側（--a）の大きさは従来のまま変えていない。
   検算：和田の台紙を消した画像と通常の画像を撮り比べ、亀のインク画素の欠けが 0 であることを確認済み。 */
.sgen__lgc--b{right:0;bottom:2%;rotate:4deg;z-index:2;width:56%;aspect-ratio:3/1}
/* ★2026-09-24 先方ご指示「4つの領域それぞれに写真2枚ずつ（番組制作がロゴ2点なので）」
   → テレビ側の 5 GENRES と同じ 2 列に。1点だけだったときの 400px 上限は外す */
.sgen--cp .sgen__mv{grid-template-columns:1fr 1fr}
.sgen__ph{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#e9ebf1;box-shadow:var(--shadow-s)}
.sgen__ph img{width:100%;height:100%;object-fit:cover;display:block}
/* ★2026-09-28 先方「HP修正依頼⑤」：5 GENRES の位置揃え（4AREAS も同じ .sgen なので一緒に効く。先方「4AREAS もテレビ番組制作ページにならう」）
     実測（1280px・セクション幅1088）：見出しの字送りは 5=0 / G=34 / E=64 で、01 の左も 64。
     ＝「最初の E の位置を 5 の始まりに」は、見出しを 64px 右へ寄せて 01 の列に揃えること。
     アイコン 0→64・01 64→128・説明文の始まりも 01 に合わせて 128 へ。
     さらにロゴ群の左端を 649→620 へ寄せ、あいだの空きを 105px から詰める（先方の意図＝文言と番組ロゴを近づける）。
     ★SP（≤860px）は1カラムになるので効かせない。 */
@media (min-width:861px){
  .sgen .sv-hd{padding-left:64px}
  .sgen__tx{padding-left:64px}
  .sgen__d,.sgen__tx .more{margin-left:64px}   /* ★2026-09-28 VIEW WORKS も説明文と同じ位置に揃える（.sgen__d だけ下げて .more が左に残っていた）
     ※ .more は inline-flex なので margin-left が効く */
  .sgen__it{grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:0 20px}
  /* ★4AREAS（.sgen--cp）は説明文が2行ものなので、右へ寄せた分だけ文字列を広く取る。
       同じ比率だと2件が1行増えてしまうため（先方「4AREAS の位置は少し変わるかな」） */
  .sgen--cp .sgen__it{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}
@media (max-width:860px){
  /* SP：文字の下にメディア。1行に押し込むと写真もロゴも小さくなりすぎる */
  .sgen--cp .sgen__mv{gap:10px}
  .sgen__it{grid-template-columns:1fr;gap:14px 0;padding:18px 0}
  .sgen__en{font-size:20px}
  .sgen__ic{width:42px;height:42px}
  .sgen--tv .sgen__mv{gap:10px}
  .sgen__lg{aspect-ratio:11/6;padding:10px;border-radius:11px}
}

/* ============================================================
   ★2026-09-25 先方「HP修正依頼④」
   「ここの制作事例は、CASE3つを横並びにしてほしいです。説明文を改行して横の長さを短くして、
     写真をその説明文の下に置く形でご対応いただけますでしょうか？
     （意図：情報が少ない印象を解消するため）」

   これまでは 1081px 以上で2列だったため、3件だと CASE03 だけが次の行に取り残され、
   説明文は横いっぱいに伸び、写真（136px）は文の右下に離れて置かれていた。
   → 3列にして1列ぶんの幅で自然に折り返させ、写真は説明文の真下・列幅いっぱいに置く。
   ★この区画だけに効かせる（.csg--3up）。YouTube・ライブ配信の CASE は現状のままにする
     ご指示なので、共通の .csg--case には手を入れない。
   ============================================================ */
/* 白地の 20年の歩みアイコンを、白い地に溶かして見出しの隣に置く（画像は加工しない） */
.sv-hd__ic--paper{mix-blend-mode:multiply}
/* 写真は説明文の下・列の幅いっぱい（狭い画面で1列のときも同じ置き方にそろえる） */
.csg--3up .prg{grid-template-areas:"mt" "ttl" "tx" "vis";border-top:0;padding:18px 0 0}
.csg--3up .prg__vis,
.csg--3up .prg--photo .prg__vis{grid-area:vis;width:100%;flex:none;max-width:420px;
  aspect-ratio:4/3;margin-top:16px;align-self:start;border-radius:10px}
.csg--3up .prg--photo .prg__vis img{padding:0}
@media (min-width:1081px){
  /* 実測（CSS幅1280・本文幅1088）：1列 341px。写真は 341×256 になり、これまでの 136px から大きくなる */
  .csg--3up.csg--case.csg{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
  .csg--3up .prg{padding-top:0}
  .csg--3up .prg__tx{max-width:none}        /* 1列ぶんの幅で折り返すので、34em の制限は外す */
  .csg--3up .prg__ttl{font-size:clamp(22px,1.9vw,27px)}
}

/* ============================================================
   ★2026-09-27 迷惑メール対策の強化（Cloudflare Turnstile）の置き場所。
   フォームの data-turnstile-key が空のあいだは hidden のままで、何も表示されない。
   ============================================================ */
.cf__ts{margin-top:28px}
.cf__ts[hidden]{display:none}

/* ============================================================
   ★2026-09-29 先方ご指示：お問い合わせ送信後のサンクスページ（thanks.html）
   これまでは同じページの中で完了表示（.cf__done）に切り替えていたが、
   送信したことが分かりにくかったため、専用のページへ移る形にした。
   ============================================================ */
/* ★ヘッダーは position:fixed。中身はその下に潜るので、上の余白は
   ヘッダーの高さ（PC 86px / SP 66px）より確実に大きく取る。
   実測：この値にする前は SP で見出しがヘッダーに 2px 重なっていた。 */
.thx{padding:clamp(180px,18vw,280px) 0 clamp(80px,9vw,140px);text-align:center}
.thx__en{font-size:12px;font-weight:900;letter-spacing:.2em;color:var(--red)}
.thx__ttl{font-size:clamp(23px,2.9vw,38px);font-weight:900;letter-spacing:-.02em;line-height:1.5;margin-top:20px}
.thx__tx{font-size:16.5px;line-height:2.15;color:var(--ink2);margin-top:26px}
.thx__note{font-size:13.5px;line-height:2;color:var(--ink3);margin-top:40px;
  max-width:min(48em,100%);margin-inline:auto;padding-top:30px;border-top:1px solid var(--line)}
.thx__note a{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}
.thx__back{display:inline-flex;align-items:center;gap:12px;margin-top:44px;
  font-size:14px;font-weight:700;color:var(--ink);padding:16px 34px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(20,21,26,.16);
  transition:box-shadow .3s var(--ease-soft),color .3s var(--ease-soft)}
.thx__back svg{width:22px;height:8px;fill:none;stroke:currentColor;stroke-width:1.6}
.thx__back:hover{box-shadow:inset 0 0 0 1.5px var(--red);color:var(--red)}
@media (max-width:860px){
  .thx{padding:176px 0 64px}
  .thx__tx{font-size:15.5px}
  .thx__back{margin-top:36px;padding:15px 28px}
}

/* ===== 404（ページが見つかりません） ===== */
/* ★2026-09-29 追加。見た目はサンクスページ（.thx）を流用し、
   ここでは「主要ページへの行き先」の並びだけを足している。 */
.nf__links{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:46px;max-width:min(60em,100%);margin-inline:auto;
  background:var(--line);border:1px solid var(--line)}
.nf__links a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  background:#fff;padding:26px 12px;font-size:13.5px;font-weight:700;line-height:1.5;
  text-align:center;color:var(--ink);
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.nf__en{font-size:10.5px;font-weight:900;letter-spacing:.16em;color:var(--red)}
.nf__links a:hover{background:#fafafa;color:var(--red)}
@media (max-width:860px){
  .nf__links{grid-template-columns:repeat(2,1fr);margin-top:36px}
  .nf__links a{padding:22px 10px;font-size:13.5px}
}
@media (max-width:420px){
  .nf__links{grid-template-columns:1fr}
}