/* ══ 2026-09-26 preview 反映用の上書き（top.css の後に読む） ══
   1) ヒーロー左右の注記（FROM COMPLEXITY / TO A WORKING SYSTEM）を戻す：髙橋さん「消さないでね」
   2) 文字が無駄に大きい所を縮める：髙橋さん指示。最大値を下げ、画面幅に対する伸びも抑える */

/* 1) ヒーロー左右の注記 */
.hero-side{position:absolute;z-index:3;top:clamp(112px,12vh,150px);width:190px;color:#626777;font-size:11px;line-height:1.85;letter-spacing:.02em}
.hero-side b{display:block;color:#686d7d;font:700 10px/1.65 Archivo,sans-serif;letter-spacing:.19em}
.hero-side i{display:block;width:34px;height:1px;margin:14px 0;background:#aeb1ba}
.hero-side p{margin:0}
.hero-side-left{left:max(32px,calc((100vw - 1440px)/2 + 38px))}
.hero-side-right{right:max(32px,calc((100vw - 1440px)/2 + 38px))}
@media(max-width:1100px){.hero-side{display:none}}

/* 2) 文字サイズ：髙橋さん「全部文字がデカすぎる」（2回目）。見出し・本文とも全体を一段下げる */
.t-hero-copy h1{font-size:clamp(30px,3.4vw,50px)}
.t-hero-lede{font-size:15px}
.t-h-xxl{font-size:clamp(30px,3.6vw,52px)}
.t-h-xl{font-size:clamp(28px,3.2vw,46px)}
.t-h-l{font-size:clamp(24px,2.6vw,38px)}
.t-about-en{font-size:clamp(44px,6.4vw,96px)}
.t-about-jp{font-size:clamp(30px,3.8vw,56px)}
.t-origin-word{font-size:clamp(26px,3.4vw,50px)}
.t-origin-line{font-size:clamp(14px,1.1vw,16px)}
.t-about-what{font-size:clamp(20px,1.9vw,28px)}
.t-about-sub,.t-decide-lede,.t-band-us li{font-size:15px}
.t-stuck-label{font-size:15px}
.t-stuck-no{font-size:16px}
.t-stuck-list p{font-size:clamp(22px,2.4vw,34px)}
html.t-motion .t-stuck-no{font-size:clamp(72px,9vw,140px)}
.t-panel-no{font-size:18px}
.t-verb{font-size:clamp(44px,5vw,76px)}
.t-when p{font-size:clamp(15px,1.2vw,17px)}
.t-band-who{font-size:clamp(17px,1.5vw,21px)}
.t-band-us .t-band-who{font-size:clamp(20px,1.9vw,28px)}
.t-svc-no{font-size:clamp(34px,3.4vw,52px)}
.t-svc h3{font-size:clamp(22px,2.2vw,32px)}
.t-remain li{font-size:15px}
.t-svc-arrow{font-size:24px}
.t-portrait-mark{font-size:clamp(160px,17vw,260px)}
.t-founder-name{font-size:clamp(40px,4vw,60px)}
.t-founder-lede{font-size:clamp(18px,1.6vw,22px)}
.t-works h3{font-size:clamp(16px,1.3vw,19px)}
.t-checks li{font-size:clamp(16px,1.4vw,20px)}
.t-close{font-size:clamp(26px,3vw,44px)}
.t-ask h2{font-size:clamp(22px,2vw,30px)}
@media(max-width:767px){
  .t-hero-copy h1{font-size:clamp(24px,7vw,30px)}
  .t-origin-word{font-size:clamp(24px,7.6vw,32px)}
  .t-stuck-list p{font-size:clamp(20px,6vw,26px)}
  html.t-motion .t-stuck-no{font-size:48px}
  .t-verb{font-size:clamp(40px,12vw,56px)}
  .t-h-xxl,.t-h-xl{font-size:clamp(24px,7.4vw,32px)}
  .t-h-l{font-size:clamp(22px,6.4vw,28px)}
  .t-about-en{font-size:clamp(40px,12vw,56px)}
  .t-about-jp{font-size:clamp(26px,8vw,36px)}
  .t-founder-name{font-size:40px}
  .t-close{font-size:clamp(22px,6.6vw,30px)}
}

/* 3) ヒーローのボタン2つを同じ形に（主＝紫の塗り／副＝細い紫の枠）。矢印は文字のすぐ横：髙橋さん決定 */
.t-hero-actions{gap:16px}
.t-hero-actions .t-btn{justify-content:center;gap:12px;min-width:196px;min-height:54px;padding:0 28px;border:1px solid var(--violet);box-sizing:border-box;font-size:15px}
.t-hero-actions .t-btn b{font:500 16px var(--en)}
.t-btn-line{background:rgba(255,255,255,.72);color:var(--violet)}
.t-btn-line:hover{background:var(--violet);color:#fff}

/* 4) スマホのリード文が単語の途中で折れないように */
.t-hero-lede{word-break:auto-phrase}

/* 5) 無駄な余白を詰める：髙橋さん「無駄スペースも多すぎる」
   ・INTEPRALとは：上下の余白と、見出し→社名の図→本文の間を半分以下に
   ・止まる3場面：1場面＝1画面のスクロール演出をやめ、3つを横に並べて1画面に収める
   ・5つの選択肢：横に流れる全画面パネルをやめ、5枚を1段に並べる */
.t-about>.t-wrap{padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
.t-origin{margin-top:clamp(32px,4vw,56px);padding-top:24px;gap:32px;align-items:center}
.t-about-body{margin-top:clamp(32px,4vw,56px)}
.t-about-sub{margin:16px 0 24px}

html.t-motion .t-stuck{height:auto}
html.t-motion .t-stuck-stage{position:static;height:auto;overflow:visible}
html.t-motion .t-stuck-in{height:auto;display:block;padding:clamp(48px,5vw,72px) 0 clamp(56px,6vw,88px)}
.t-stuck-label{margin:0 0 24px}
html.t-motion .t-stuck-list,.t-stuck-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;overflow:visible}
html.t-motion .t-stuck-list li,.t-stuck-list li{grid-area:auto;display:block;padding:28px 32px 8px 0;border-top:1px solid var(--line-w);transform:none!important}
html.t-motion .t-stuck-list li+li,.t-stuck-list li+li{padding-left:32px;border-left:1px solid var(--line-w)}
html.t-motion .t-stuck-no,.t-stuck-no{display:block;margin:0 0 16px;font:700 clamp(32px,3vw,44px)/1 var(--en);color:#fff;opacity:.55;letter-spacing:-.02em}
html.t-motion .t-stuck-list p,.t-stuck-list p{font-size:clamp(18px,1.6vw,23px);line-height:1.6}
html.t-motion .t-stuck-meter{display:none}
@media(max-width:767px){html.t-motion .t-stuck-list,.t-stuck-list{grid-template-columns:1fr}html.t-motion .t-stuck-list li+li,.t-stuck-list li+li{padding-left:0;border-left:0}}

html.t-motion .t-decide{height:auto}
html.t-motion .t-decide-stage{position:static;height:auto;overflow:visible}
html.t-motion .t-track,.t-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:auto;height:auto;transform:none!important;padding:0 var(--gut) clamp(56px,6vw,88px);gap:0}
html.t-motion .t-panel-head,.t-panel-head{grid-column:1/-1;width:auto;padding:clamp(56px,6vw,88px) 0 32px}
html.t-motion .t-panel,.t-panel{height:auto;width:auto;padding:24px 20px 28px}
html.t-motion .t-panel-v{border-left:1px solid var(--line)}
.t-panel-v:first-of-type{border-left:0}
.t-verb{margin:16px 0 0;padding-top:0;font-size:clamp(26px,2.4vw,36px)!important;line-height:1.25}
.t-when{margin-top:16px;padding-top:14px;grid-template-columns:1fr;gap:6px;border-top-width:1px}
.t-when b{font-size:12px}
.t-when p{font-size:14px;line-height:1.7;font-weight:500}
html.t-motion .t-decide-hint,html.t-motion .t-decide-bar{display:none}
@media(max-width:900px){html.t-motion .t-track,.t-track{grid-template-columns:1fr 1fr}}
@media(max-width:560px){html.t-motion .t-track,.t-track{grid-template-columns:1fr}.t-panel-v{border-left:0!important;border-top:1px solid var(--line)}}
/* セクション間の余白（全体）も詰める／3場面の高さをそろえる */
:root{--sec:clamp(64px,7vw,104px)}
html.t-motion .t-stuck-list li,.t-stuck-list li{padding-top:28px!important;align-self:start}

/* 6) ヒーロー動画v5（瓦礫→リング→街区が積み上がる・1回再生で止まる）。動きを止める設定の人には完成形の1枚を出す */
@media(prefers-reduced-motion:reduce){.t-video{visibility:hidden}.t-frame-video{background:#fff url(assets/hero_v5_last.jpg?v=20260927c) center/cover no-repeat;background-image:image-set(url(assets/hero_v5_last.jpg?v=20260927c) 1x,url(assets/hero_v6b_last.jpg?v=20261006b) 2x)}}   /* 2026-10-06 高精細の画面は2560幅の止め絵 */

/* 7) ヒーローに3D空間の格子線（床＋天井）：髙橋さん「3D空間みたいに格子線。テックな雰囲気」
   動画と同じ枠（.t-frame-video）の中に置くので、画面の大きさやリングのズームに合わせて一緒に動く */
.t-grid{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.t-grid{display:none}}
/* 8) 格子のマスのホバー：カーソルのマスが紫に光り、1秒ほどで消える */
.t-grid-tile{fill:#5546A8;fill-opacity:.32;transition:fill-opacity 1.2s ease-out}
.t-grid-tile.is-off{fill-opacity:0}

/* 9) 格子を瓦礫・建物の後ろに隠す（床の上に物が載って見えるように）。型は動画の全コマから作った（assets/grid-mask.png、白＝格子を出す） */
.t-grid{-webkit-mask-image:url(assets/grid-mask.png);mask-image:url(assets/grid-mask.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* 10) リングが開く間は重い部品を外す（格子・注記のぼかし・ヘッダーのぼかし・枠ボタンのぼかし） */
/* 2026-09-28 髙橋さん「進むと平面が消える。平面の向こうへ進むジェット機の気持ちで」：拡大中も格子は残す。重さ対策として乗算の合成をやめる */
.t-grid{mix-blend-mode:normal;opacity:.85}
html.t-zooming .hero-side,html.t-zooming .t-btn-line{-webkit-backdrop-filter:none;backdrop-filter:none}
html.t-zooming .p-nav,html.t-zooming header{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.t-frame-video{will-change:transform}

/* 11) 2026-09-28 Codex指摘1：スマホはヒーロー舞台の追加スクロールを 180svh → 110svh に縮める
   （site.css の html.t-motion .t-intro より強い指定にする。流れの段階は top.js がスマホ用に前倒しで合わせる） */
@media(max-width:767px){html.t-motion body .t-intro{height:calc(100svh + 110svh)}}

/* 12) What is INTEPRAL?：社名だけロゴと同じ書体（Archivo）、Pだけ薄い紫。「INTEPRALとは」は日本語の普通の字間に（2026-09-28 髙橋さん） */
.t-wi-name{font:700 .94em/1 var(--logo,"Archivo",sans-serif);letter-spacing:.12em;margin-left:.08em}
.t-wi-p{color:#C9C3F2}
.t-wi-jp{letter-spacing:.04em!important}
/* 13) What is INTEPRAL? の社名にロゴと同じ縦棒（P の両側・不透明度42%） */
.t-wi-bar{display:inline-block;width:.06em;height:.78em;margin:0 .16em;background:#C9C3F2;opacity:.42;vertical-align:-.02em}