/* ===================================================================================== J Claw Studio TOP — デザイン v5 の層（決裁 I-1 / I-2・2026-09-25 着手・提案中） 現行 v4.73 の top.css の上に重ねる。外すと現行に戻る: ・index.html の の行を外す（恒久） ・URL に ?design=v4 を付ける（見比べ用） WebGL・スクロール演出・各モジュールの骨組みはそのまま。変えるのは文字組み・装飾ラベル・セクション冒頭の揃えと余白。 参考: Apple（iphone-duo の見出し 80/600・章見出し 48・リード 21/グレー・強調は色だけ）、Mobbin の厳選サイト。 v5 のタイポとテキストのルール 1. 大きさは 8 段: 80 ヒーロー / 48 章見出し / 24 小見出し / 20 リード・カード見出し / 18 ニュース見出し / 16 本文・ラベル / 14 補足 / 12 注記（390〜1440 は clamp で連続に縮む） 2. 太さは 2 つ: 見出し Display 800、本文 500。等幅（JetBrains Mono）は本物のデータ（URL・時刻・ログ）だけ 3. 行送り: 見出し 1.2〜1.3・リード 1.8・本文 1.75。字間: 見出しは palt で約物を詰めて 0、本文 .02em 4. 1 セクション 1 メッセージ: 見出し＝言いたいこと。分類名（「Packとは」等）は見出しの上の小さなラベルに下げる 5. 飾りを足さない: 英字の等幅ラベル・[ ]・グラデの短線・英訳の添え書き・「BENEFIT 01」のような番号は出さない 6. 改行は文節で（word-break:auto-phrase）。見出しは行の長さをそろえ（balance）、本文は最終行を短くしない（pretty） 7. 揃え: セクション冒頭は左揃え。中央はヒーローだけ。冒頭（ラベル→見出し 16px→リード 24px）→本体 80px 8. 強調は太字ではなく文字色（リードのグレーの中で、要点だけ本文色） ===================================================================================== */ :root{ --v5-ink:#0f172a; --v5-2nd:#586174; --v5-3rd:#7b8494; --v5-ink-d:#f4f6fb; --v5-2nd-d:rgba(244,246,251,.66); --v5-3rd-d:rgba(244,246,251,.46); --v5-hero:clamp(40px,5.56vw,80px); --v5-h2:clamp(30px,3.34vw,48px); --v5-h3:clamp(20px,1.67vw,24px); --v5-lead:clamp(17px,1.39vw,20px); --v5-label:clamp(14px,1.12vw,16px); --v5-sec:160px; } @media(max-width:700px){:root{--v5-sec:96px}} /* ---------- 共通の組版（ルール 2・3・6） ---------- */ :root :is(.chapter h1,.chapter h2,.chapter .jp,.ed-title,.jc-title,.jc-state,.jc-tag,.pkw-def,.v5-h,.pkt-t,.pk-card .pt,.ui-note b,.wp-t,.oi-card h3,.v5-eyebrow){ font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; line-break:strict; text-spacing-trim:trim-start; } /* リード（3 行まで）も文節で折る。長い本文は通常の折り返し（右端がそろう） */ :root :is(.ed-lead,.pkw-lead,.chapter .sub,#ch1 .jp,#ch2 .jp,.jc-body p:first-child){word-break:auto-phrase; text-spacing-trim:trim-start} :root :is(p,.ed-lead,.chapter .sub,.pkt-d,.ui-note p,.oi-card p,.jc-body p,.pd,figcaption,.n-t){ text-wrap:pretty; line-break:strict; text-autospace:normal; } /* ---------- 装飾ラベルを外す（ルール 5） ---------- */ :root :is(.idx,.chapter .kicker,.jc-sub,.pkw-en,.pk-card .pc,.un-k,.oi-card .ok,.rc-en,.mq-label){display:none} /* .jc-en（JClaw — Make any AI action-safe.）はブランドの一文なので隠さない（決裁 I-25） */ :root #ch2 .mono{display:none} /* v5 だけの要素（HTML 側は hidden 属性つき。v5 の CSS が無ければ出ない） */ :root .v5-eyebrow[hidden],:root .v5-mq-label[hidden]{display:block} /* ---------- セクション冒頭の型（ルール 4・7） ---------- */ :root .ed-pad{padding-top:var(--v5-sec);padding-bottom:var(--v5-sec)} /* 分類名＝小さなラベル */ :root :is(#packs .pkw-head .ed-title,#uishowcase .ed-title,.jc-title,.v5-eyebrow){ font-family:var(--disp); font-weight:800; font-size:var(--v5-label); line-height:1.5; letter-spacing:0; color:var(--v5-2nd); margin:0 0 16px; } :root :is(.dark .jc-title,.dark .v5-eyebrow){color:var(--v5-2nd-d)} /* 見出し＝メッセージ（章見出し 48） */ :root :is(.pkw-def,.v5-h,#whitepaper .ed-title,#news .ed-title,#openinnovation .ed-title){ display:block; font-family:var(--disp); font-weight:800; font-size:var(--v5-h2); line-height:1.25; letter-spacing:0; color:var(--v5-ink); margin:0; max-width:18em; } :root #openinnovation .ed-title{color:var(--v5-ink-d)} :root .ed-title .mincho,:root .pkw-def .mincho{font-family:inherit;font-weight:inherit} /* リード（20・グレー・行長 36 字まで） */ :root :is(.ed-lead,.pkw-lead){ font-size:var(--v5-lead); line-height:1.8; letter-spacing:.02em; color:var(--v5-2nd); max-width:36em; margin-top:24px; } :root .dark .ed-lead,:root #openinnovation .ed-lead{color:var(--v5-2nd-d)!important} /* ---------- ヒーロー（WebGL の上の文字だけ。中央揃えのまま） ---------- */ :root #ch0 h1{font-size:var(--v5-hero); line-height:1.04; letter-spacing:-.035em} :root #ch0 .jp{font-family:var(--disp); font-weight:800; font-size:clamp(20px,1.67vw,24px); letter-spacing:0; margin-top:28px; color:#fff} :root #ch0 .sub{font-size:clamp(15px,1.25vw,18px); line-height:1.8; letter-spacing:.02em; max-width:30em; margin-top:16px; color:rgba(255,255,255,.74)} :root :is(#ch1,#ch2) h2{font-size:clamp(28px,3.9vw,56px); line-height:1.28; letter-spacing:0} :root :is(#ch1,#ch2) .jp{font-family:var(--font); font-weight:500; font-size:var(--v5-lead); line-height:1.8; letter-spacing:.02em; margin-top:24px; color:rgba(255,255,255,.74)} :root .hero-hud{font-family:var(--font); font-size:12px; letter-spacing:.04em} /* ---------- 01 J Clawとは（dark） ---------- */ :root .jc-wrap{padding-top:var(--v5-sec); padding-bottom:var(--v5-sec)} :root .jc-head{display:block} :root .jc-grid{margin-top:0; gap:clamp(40px,6vw,96px); grid-template-columns:minmax(0,1fr) minmax(0,1fr)} :root .jc-state{font-size:var(--v5-h2); line-height:1.12; letter-spacing:-.03em; color:var(--v5-ink-d)} :root .jc-body p{font-size:16px; line-height:1.75; letter-spacing:.02em; color:var(--v5-2nd-d)} :root .jc-body p:first-child{font-size:var(--v5-lead); line-height:1.8; color:var(--v5-ink-d)} :root .jc-body p+p{margin-top:20px} :root .jc-body b{font-weight:500; color:var(--v5-ink-d)} :root .jc-note{margin-top:40px; padding:24px 0 0; border:0; border-top:1px solid rgba(255,255,255,.14); border-radius:0; background:none} :root .jc-note::before{display:none} :root .jc-note-k{font-family:var(--disp); font-weight:800; font-size:var(--v5-label); letter-spacing:0; color:var(--v5-ink-d); margin-bottom:8px} :root .jc-note p{font-size:14px; line-height:1.75; color:var(--v5-2nd-d)} :root .jc-foot{margin-top:96px; padding-top:40px} :root .jc-tag{font-size:var(--v5-h3); line-height:1.4} :root .jc-en{font-family:var(--font); font-size:14px; letter-spacing:.02em; color:var(--v5-2nd-d)} /* I-25: 等幅のラベルではなく本文の書体で（ルール 5） */ /* ---------- 02 Packとは（light） ---------- */ :root .pkw-head{text-align:left} :root .pkw-lead{margin-left:0; margin-right:0} :root .pkt{margin-top:80px} :root .pkt-tab .k{font-family:var(--font); font-size:14px; letter-spacing:.02em} :root .pkt-no{font-family:var(--font); font-size:14px; letter-spacing:.02em; color:var(--v5-3rd)} :root .pkt-t{font-size:var(--v5-h3); line-height:1.35; letter-spacing:0} :root .pkt-chip{font-family:var(--font); font-size:14px; letter-spacing:.02em} :root .pkt-d{font-size:16px; line-height:1.75; letter-spacing:.02em} :root .pkw-old{padding:120px 0 96px!important} :root .pkw-old .pk-intro .ed-lead{font-size:16px; line-height:1.75; color:var(--v5-2nd); max-width:40em} /* 長い段落（5 行以上）は通常の折り返し（右端をそろえる）。文節改行は見出しとリードだけ */ :root .pkw-old .pk-intro .ed-lead{word-break:normal} /* 見出しの無かった段落は、最初の一文（既存の文）を小見出しに立てる */ :root .v5-h3{display:block; font-family:var(--disp); font-weight:800; font-size:var(--v5-h3); line-height:1.5; letter-spacing:0; color:var(--v5-ink); max-width:26em; margin-bottom:16px; font-feature-settings:"palt" 1; word-break:auto-phrase; text-wrap:balance; text-spacing-trim:trim-start} :root .pk-card .pt{font-size:var(--v5-h3)} /* 2026-09-26 修正: 分類ラベル（.pc）を外した分だけ本文が上がり、右上の画像（高さ約 84px）の下に潜っていた。見出しの高さで画像の下端まで下げる */ :root .pk-card .pt{min-height:78px; align-items:flex-start} :root .pk-card .pd{font-size:16px; line-height:1.75} :root .mini-l{font-family:var(--font); letter-spacing:.02em} :root .v5-mq-label{text-align:center; font-family:var(--font); font-size:14px; letter-spacing:.02em; color:var(--v5-3rd); margin:0 0 16px} /* ---------- 03 承認ゲート（light） ---------- */ :root #uishowcase .ed-pad>.reveal:first-child{text-align:left!important} :root #uishowcase .ed-pad>.reveal:first-child .ed-lead{margin-left:0!important; margin-right:0!important; max-width:36em!important} :root #uishowcase .v5-h{margin-bottom:24px} :root #uishowcase .ed-lead{font-size:var(--v5-lead)} :root #uishowcase .ui-frame{margin-top:80px} :root .ui-mini figcaption{font-size:14px; letter-spacing:.02em; color:var(--v5-2nd)} :root .ui-note b{font-size:var(--v5-h3); line-height:1.35; margin-bottom:12px} :root .ui-note p{font-size:16px; line-height:1.75; letter-spacing:.02em; color:var(--v5-2nd)} :root #uishowcase .form-note{font-size:12px; color:var(--v5-3rd)} /* ---------- 06 ホワイトペーパー / 07 ニュース（light） ---------- */ :root .wp-grid{margin-top:80px} :root .wp-no{font-family:var(--font); font-size:14px; letter-spacing:.02em} :root .wp-badge{font-family:var(--font); font-size:12px; letter-spacing:.02em} :root .wp-t{font-family:var(--disp); font-weight:800; font-size:20px; line-height:1.45} :root .wp-card.featured .wp-t{font-family:var(--disp); font-size:var(--v5-h3)} :root .news-grid2 .nh-lead{margin-top:24px} :root .news-grid2 .news-stack{grid-row:1 / span 3; margin-top:0} :root .news-bar{flex-wrap:wrap; row-gap:12px; column-gap:16px; padding:28px 96px 28px 32px} :root .news-bar .n-t{flex:1 1 100%; order:3} :root .news-bar .n-cat{min-width:0} :root .news-bar .n-cir{position:absolute; right:28px; top:calc(50% - 19px)} :root .news-bar .n-date{font-family:var(--font); font-size:14px; letter-spacing:.02em} :root .news-bar .n-cat,:root .n-tag{font-family:var(--font); font-size:12px; letter-spacing:.02em} :root .news-bar .n-t{font-size:18px; font-weight:500; line-height:1.6; letter-spacing:.02em} /* ---------- 09 Recruit（dark） ---------- */ :root #openinnovation .v5-eyebrow{color:var(--v5-2nd-d)} :root .oi-grid{margin-top:80px} :root .oi-card h3{font-size:var(--v5-h3); line-height:1.35; margin-top:0; padding-right:64px} /* 決裁 I-61: 見出しを h4→h3（見た目は同じ） */ :root .oi-card p{font-size:16px; line-height:1.75; letter-spacing:.02em} :root .oi-card .ol{font-size:16px}