/* ============================================================ Business OS Website Top — Pre-Publication 全11Section 限定実装 2026-08-07 ★ 本ファイルはプロトタイプ専用である。本番実装ではない。 ★ master-design.css は変更していない。本ファイルは master-design.css の 後に読み込む追加・上書き層である。 ★ full-page.css ／visual-application.css ／hero-comparison.css ／ gate-2-sections.css は読み込んでいない。 ★ 色 ・幅 ・余白 ・角丸 ・影は master-design.css の既存 Token を参照する。 新しいブランド色を作っていない。 ★ CDN・外部ライブラリを使用していない。 ── 実装の根拠 ────────────────────────────── 81 Pre-Publication Section Architecture Version0.2（全11Section 構成 ／ID 方針） 82 Pre-Publication Complete Copy Version0.2（コピー） 83 Pre-Publication Visual Revision Plan Version0.2（Visual 判断） ── 11Section 化にあたっての詳細度方針 ────────────────── ★ master-design.css には 60系11Section 時代の裸 `#sN` 指定（詳細度100）が残っている。 `.pp-sec`（詳細度10）では上書きできないため、本ファイルで `#sN.pp-sec`（詳細度110） を用いて11Section 版の実効値を明示する。master-design.css は変更していない。 ★ `!important` は使用していない。すべて詳細度で解決している。 ============================================================ */ /* ============================================================ 共通 ============================================================ */ /* 9Section の padding 統制（裸 `#sN` を `#sN.pp-sec` で無効化する） ★ REAL VALUE 参考LP 比較研究の応用1 ： Section 上下余白を機械的に同一にせず、 83 第24.7節の Visual 強度に応じて一段の差をつける。 ★ 既存の 64px ／72px という2段構成を、強度2 の Section だけ 56px を加えた3段へ広げている。 新しい Spacing Token は作っていない（すべて既存の8px グリッド上の値）。 */ .pp-sec { padding: 64px 0; } #s2.pp-sec, #s5.pp-sec, #s7.pp-sec, #s9.pp-sec, #s11.pp-sec { padding: 64px 0; } /* Visual 強度3〜4 ： 標準 */ #s6.pp-sec { padding: 72px 0; } /* 新3 問題の本質 ： Visual 強度5 */ #s8.pp-sec { padding: 72px 0; } /* 新5 何が会社に残るのか ： Visual 強度5 */ #s10.pp-sec { padding: 56px 0; } /* 新8 約束すること・約束しないこと ： Visual 強度2（最も静かな Section） */ /* 見出し階層の是正 ★ master-design.css の `#s7 .h2` ／`#s11 .h2` ／`#s11 .lead` は 60系の別Section 用である。 11Section 版の Section 役割に合わせて標準値へ戻す。 */ #s7.pp-sec .h2, #s11.pp-sec .h2 { font-size: 28px; margin-top: 0; } #s11.pp-sec .lead { margin-top: 14px; font-size: 15px; } /* 転換見出し ： 新 Section 4 の方向図直後（Block 3 Q12 ＝ A）。 AI の役割見出しとの間に基本要素3件が入るため、h3 が連続しない。 */ .pp-turn-h3 { margin-top: 34px; } /* Section Label（英語 Label は Visual ／Implementation 工程で最終確認する） */ .pp-label { font-size: 11px; font-weight: 900; letter-spacing: .16em; color: var(--blue); margin-bottom: 12px; } .pp-label--dark { color: var(--on-dark-soft); } /* ★ 2026-09-03 Messaging Implementation ： #s7 の eyebrow（Service Category）は 375〜390px で行末に1〜2文字だけ残るため、この Section に限って行長を均す。 ★ `.pp-label` 全体（/pricing の PRICING など）へは適用しない。 */ #s7 .pp-head .pp-label { text-wrap: balance; } /* ★ 2026-09-03 Messaging Implementation ： #s9 ／#s11 の締め1文は、 430px ／375px で行末に2文字だけ残るため、この2箇所に限って行長を均す。 ★ `.pp-expand--center` ／`.pp-body` 全体へは適用しない。★Copy は変更していない。 */ #s9 .pp-expand--center .pp-body, #s11 .pp-expand--center .pp-body { text-wrap: balance; } /* ★ 2026-09-03 Production Visual Review（Phase M9 ／第23.8〜23.10章 Human Decision） #s11 の締めを★左カラムの CTA 直下へ置く。役割は「CTA を押す理由の補強」なので、 CTA より目立たせない ： 左寄せ ／既存の on-dark 二次白（.sec--navy .pp-body）／ 新しい色・サイズは作らない。★Copy は変更していない。 */ #s11 .s11-closing { margin-top: 22px; text-align: left; text-wrap: balance; } /* ★ #s11 H2 の「判断の目線」を行またぎさせない（第23.7章の条件）。 360px 以下でも語が割れず、320px でもはみ出さないことを実測で確認済み。 */ #s11 .s11-nw { white-space: nowrap; } /* ★ 2026-09-03 Production Visual Review Fine-tuning（Phase M8 ／第22.4章 Human Decision） #s9 の新 H2 は、Mobile で固定改行を外したうえで行長を均す。 ★ 375〜390px で「く。」が1行に孤立するのを避けるため。★Copy は変更していない。 */ #s9 .pp-head--center .h2 { text-wrap: balance; } /* 見出しブロック */ .pp-head { max-width: 860px; } .pp-head .lead + .lead { margin-top: 10px; } /* 中央寄せの見出しブロック ★ 9Section すべてが左揃えだと単調になるため、章の入口となる Section だけ中央へ寄せる。 英字 Section Label は使わない（見出しが物語の一文であり、category タグと噛み合わないため）。 ★ 見出しが短い ／下のコンテンツが左右対称、の Section に限って使うこと。 長い見出しを中央寄せにすると左端が揃わず日本語が読みにくくなる。 */ .pp-head--center { margin-left: auto; margin-right: auto; text-align: center; } .pp-h3 { font-size: 19px; font-weight: 900; line-height: 1.6; letter-spacing: -0.01em; color: var(--blue-ink); } .sec--navy .pp-h3 { color: var(--on-dark); } /* 本文 Typography ★ 無料AI体験ページ（lp/ai-taiken.html）の `.ai-body` は 16px ／line-height 1.9 で、 本文カラム幅も 720px と同一である。公開Top（lp/index.html）の `.sec-sub` も 16px ／1.9。 11Section 版 Top の本文だけが 13.5px と小さかったため、既存2ページの実測値へ揃える。 ★ 導入文 `.lead` は、公開Top の本文 15px ／1.85 へ揃える（本文より一段弱い関係を維持）。 ★ 新しい Type Token・新しい中間値は作成していない。 */ .lead { font-size: 15px; } .pp-body { margin-top: 12px; font-size: 16px; line-height: 1.9; color: var(--ink); } .pp-body:first-child { margin-top: 0; } .pp-body--em { color: var(--blue-deep); font-weight: 700; } /* Content Condensation（2026-08-09）： 意味の区切りを段階的に広げるための間合い。 gap1 ＝ 本文1行ぶん（16px × line-height 1.9 ≒ 30px）／gap2 ＝ その一段上。 font-size ／line-height は変えていない。 ★ Visual Rhythm Refinement（2026-08-09）： Desktop だけこの値を引き上げる。 右の写真が 500px あるのに本文が 378px しかなく、左が上へ固まって見えるため。 Desktop 側の指定は Media Query 内（44px ／64px）。Mobile はここの値のまま。 */ .pp-body--gap1 { margin-top: 30px; } .pp-body--gap2 { margin-top: 44px; } /* ※ 2026-08-09 ： 3ブロック目の段落間にも `--gap1` を使う（専用クラスは作らない）。 「経験 → 情報・責任・順序」の間と同じ間隔に揃えるため。 */ /* ★ 2026-08-09 ： 文中の「Business OS」だけをアクセントの青にする。 前後の文字は周囲の本文と同じ色のままにして、サービス名だけを立たせる。 ★ 欧文と和文の間のアキは margin で作っている。半角スペースを文字として入れると、 サイト全体の表記（Business OSです。／Business OSは、）と割れてしまうため。 ★ 新しい Color Token は作っていない（既存 --blue）。 */ .pp-os { color: var(--blue); margin-right: .22em; } /* ★ 2026-08-09 ： 下向き矢印（.pp-down）は S3 ／S4 ／S5 の3箇所とも削除した。 Message → Visual → Message の並びだけで流れは読めており、 矢印は補助 Cue ではなく Section の主 Visual に見えてしまっていたため。 */ .sec--navy .pp-body { color: var(--on-dark-mid); } /* Section 終端の転換文・境界文 ★ 立ち止まって考えさせる一文のため、本文（16px）より明確に上へ。 通常 Section H2（36px）とは競合させず、その下の階層に置く。 ★ 直前のカード群から離して、転換であることを間合いで示す（30px → 56px）。 */ .pp-turnline { margin-top: 56px; font-size: 22px; font-weight: 900; line-height: 1.8; color: var(--blue); text-align: center; } .pp-boundary { margin-top: 30px; padding: 18px 20px; border-left: 3px solid var(--blue-line); background: rgba(255,255,255,.72); font-size: 13px; line-height: 1.95; color: var(--ink-mid); } .sec:not(.sec--pale) .pp-boundary { background: var(--pale-2); } .pp-emline { margin-top: 30px; font-size: 15px; font-weight: 700; line-height: 1.9; color: var(--blue-ink); text-align: center; } /* Section H2 内の強調語（Brand Orange） ★ 2026-08-11 ： S7 ／S8 の H2 に共通して出てくる「使える形」を色で立てる。 Business OS が何をするのかを一語で言い当てている中心語のため。 ★ 色は Hero H1 の強調（`.hero-h1 .em` ＝`--orange-soft` #fb923c）と同じにする。 Hero の「会社で使える形にする。」と同じ語なので、同じ色で結び付けるため（編集長指定）。 ★ `.pp-h2-em` は lp/index.html にしか存在しないため、 同じ CSS を共有する lp/business-os.html には影響しない。 */ .pp-h2-em { color: var(--orange-soft); } /* ============================================================ Section 1 Hero ★ リング造形は master-design.css のまま。循環6段階のノード語は HTML から外した。 ============================================================ */ /* ※ `.pp-hero-unique` は Top からは使わなくなった（下の `.pp-hero-uni` へ置き換え）。 宣言は lp/business-os.html が旧構造で参照しているため、元のまま残している。 */ .pp-hero-unique { font-size: 13px; font-weight: 700; line-height: 1.85; color: var(--on-dark-mid); padding-left: 12px; border-left: 2px solid rgba(251,146,60,.85); margin-bottom: 16px; } /* ★ Hero Supporting Copy Refinement（2026-08-09） H1 の直下に置く独自性ブロック。 取締役とエンジニア。 ← 小見出し（なぜAIKKなのか の見出し） （中程度の余白） 両方の経験と、…プログラムです。 ← 説明本文 ★ 橙の縦罫は削除した。小見出しと本文の関係だけでまとまりが読めるため、 囲みや罫線を足さずに余白で成立させている。 ★ H1（Desktop 52px）とは競合させない。小見出し 20px ／本文 15px はいずれも既存 Scale。 新しい Type Token ／Spacing Token は作っていない。 */ .pp-hero-uni { margin-top: 30px; } .pp-hero-uni-h { font-size: 18px; font-weight: 900; line-height: 1.6; letter-spacing: -0.01em; color: var(--on-dark); } /* ★ 2026-08-14 ： Mobile 専用の改行。`.pp-br-wide`（Desktop ／Tablet 専用）の対。 Mobile で語の途中（「うま／く」「「自／分の言葉」」）で折り返さないよう、 意味の切れ目で改行を固定するために使う。 */ .pp-br-sp { display: none; } .pp-hero-uni-b { margin-top: 16px; font-size: 15px; line-height: 1.9; color: var(--on-dark-mid); } /* ★ 2026-08-09 ： Brand Tag を 12px → 14px。H1（52px）の前置きとして小さすぎたため。 letter-spacing ／色 ／weight は変更していない。14px は既存 Scale の値。 */ .pp-hero-tag { font-size: 14px; font-weight: 900; letter-spacing: .1em; color: var(--on-dark-soft); margin-bottom: 10px; } /* Hero 本文 ： Typography Human Gate Q3 ＝ B（13.5px ／13px → 15px 方向） ★ Hero 本文は2本 → 1本へ Copy 圧縮済みのため、残した1本を読ませる。 ★ 15px は現行 Application の `.lead` と同値。新しい Type Token は作っていない。 ★ Mobile の最終値は Screenshot Human Gate 対象。 */ .pp-hero-body { margin-top: 14px; font-size: 15px; line-height: 1.9; color: var(--on-dark-mid); } .pp-cta-facts { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--on-dark-soft); } .hero-assure { align-items: flex-start; line-height: 1.8; } .hero-assure svg { margin-top: 4px; } /* Business OS リングの6ノード ： 循環の6段階（Section 9 の 01〜06 の短縮ラベル） ★ 位置は HTML 側の left/top（%）でリング半径へ追従させる。 master-design.css の rotate + translateY(px) は固定半径のため、 リングが縮む幅（1025px でリング径307px）でノードが外れてしまう。 ここで transform を中心合わせだけに上書きし、% 配置を有効にする。 */ .osring-nodes--fit li { transform: translate(-50%, -50%); } /* ラベルは2〜4文字で振れるため、字間だけわずかに詰めて円内へ収める */ .osring-nodes--six span { letter-spacing: -0.01em; } /* ============================================================ Section 2 Founder Story ★ 本文が主役。写真と Timeline は補助。プロフィールページ化しない。 ============================================================ */ .pp-fs { display: grid; row-gap: 26px; } .pp-fs-head .lead { margin-top: 12px; } .pp-fs-fig { display: grid; row-gap: 18px; justify-items: start; } .pp-fs-photo { width: 168px; } .pp-fs-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-card); background: var(--paper); } .pp-tl { list-style: none; display: grid; row-gap: 12px; } .pp-tl li { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); column-gap: 10px; align-items: start; } .pp-tl li::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: -12px; width: 1px; background: var(--blue-line); } .pp-tl li:last-child::before { display: none; } .pp-tl-mark { width: 9px; height: 9px; margin: 5px 0 0 4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(30,136,229,.14); } .pp-tl p { font-size: 13px; font-weight: 700; line-height: 1.8; color: var(--blue-ink); } .pp-fs-body { max-width: 720px; } .pp-sign { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.9; color: var(--ink-mid); } /* ★ 2026-08-09 ： 写真と署名を1つのまとまりとして扱う。 本文末尾に置いていたときの区切り線・上余白は、写真の直下では不要なので外す。 `.pp-sign` の Base 宣言はそのまま（lp/business-os.html が旧レイアウトで参照しているため）。 */ .pp-fs-id { display: grid; row-gap: 12px; } .pp-fs-id .pp-sign { margin-top: 0; padding-top: 0; border-top: 0; } /* ★ 2026-08-09 ： 写真直下の署名を「写真のキャプション」ではなく 「誰のプロフィールか」を示すプロフィール署名として読ませる。 ・写真に対して中央揃え（`.pp-fs-id` の幅＝写真の幅） ・会社名 12.5 → 14.5px（13.5px では写真に対して小さく見えたため） ★ Founder Story 本文（`.pp-body` 16px）は超えない。 ★ 写真が150px幅になる 768–1024px でも、氏名は 148px ／1行で収まることを実測済み。 そのため Tablet 専用の font-size 例外は作らず、全幅 14.5px で統一している。 ★ 2026-08-09 ： 2行とも Bold（700）にする。和文の字送りはウェイトで変わらないため、 150px 列でも氏名は 148px のまま1行で収まることを 768 ／1024px で実測済み。 ★ `.pp-fs-id` は lp/index.html にしか存在しないため、 lp/business-os.html（旧レイアウトの `.pp-sign`）には影響しない。 */ .pp-fs-id .pp-sign { text-align: center; font-size: 14.5px; font-weight: 700; } /* ★ 2026-08-09 ： 会社名と役職氏名は、同じ font-size ／同じウェイトで並べる。 氏名だけを強調したり、会社名だけを弱くしたりしない。 そのため `.pp-sign-name` には font-size ／font-weight を持たせず、 `.pp-sign`（14.5px ／700）をそのまま受け継がせる。 色は既存の差をそのまま維持している（会社名 `--ink-mid` ／氏名 `--ink`）。 */ .pp-fs-id .pp-sign-name { color: var(--ink); } /* 「そのために設計したのが、Business OSです。」は独立した段落。 ★ `.pp-body--em` の Base 宣言は変えていない（lp/business-os.html が旧構造で参照しているため。 あちらは ＝inline なので margin-top は効かず、影響を受けない）。 */ /* ★ 2026-08-09 ： 文字色は周囲の本文と同じ（--ink）に戻す。 青くするのは中の「Business OS」（.pp-os）だけ。太さ（700）は結論の1文として維持する。 */ /* ★ 2026-08-09 ： 前の段落との間を1行あける。 以前は Desktop だけ 30px ／Tablet・Mobile は 0 だったが、 スマホで前の段落の続きに見えてしまうため、全幅で Desktop と同じ 30px にそろえた。 */ #s2 .pp-body--em { margin-top: 30px; color: var(--ink); } /* ============================================================ Section 3 なぜ言葉にすることが必要なのか（新設） ★ Visual Concept ： 共通の土台型（共通の判断の土台と、異なる役割の自律的な関係） ★ 中心メッセージを Section 内最大の文字要素とし、図解より先に視線が止まるようにする。 ★ 円状 ・放射状 ・矢頭 ・命令図 ・Role 間の線 ・階層組織図 ・人型は用いない。 ★ Navy ／Orange は使用しない。Animation は追加しない。 ============================================================ */ .pp-ww-head { max-width: 900px; } /* 日本語 Section 見出し ： 中心メッセージより小さく、上に添える */ .pp-ww-h { font-size: 17px; font-weight: 900; line-height: 1.75; letter-spacing: .01em; color: var(--blue); } /* 中心メッセージ ： Section 内最大。Hero H1 より弱く、問題の本質（36px）より弱い ★ master-design.css の `#s3 .h2`（詳細度110）に負けないよう `#s3.pp-sec .pp-ww-core`（詳細度120）で指定する。 */ #s3.pp-sec .pp-ww-core { margin-top: 12px; font-size: 30px; line-height: 1.5; letter-spacing: -0.02em; } .pp-ww-main { margin-top: 28px; display: grid; row-gap: 26px; align-items: start; } .pp-ww-body { max-width: 720px; } /* ── 図解 ： 判断の土台と異なる役割の参照図 ──────────────── 共通の土台（意味上の中心）に、異なる役割が並列で接続する。 中心性は「位置」ではなく「唯一の共通接続先であること」で表現する。 */ .pp-ww-fig { display: block; } .pp-ground { display: grid; row-gap: 14px; } /* 共通の判断の土台 ： 図解内の主役。Role より一段強い面にする （ただし Section の中心メッセージより強くしない） */ .pp-ground-base { background: var(--paper); border: 2px solid var(--blue-line); border-radius: var(--radius); box-shadow: var(--shadow-fig); padding: 18px 20px; } .pp-ground-base-t { font-size: 16px; font-weight: 900; line-height: 1.65; color: var(--blue-ink); } .pp-ground-terms { list-style: none; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .pp-ground-term { font-size: 12px; font-weight: 700; line-height: 1.6; color: var(--blue-deep); background: var(--pale); border-radius: 999px; padding: 5px 12px; } /* 参照関係 ： 土台と Role 群を結ぶ共通軸。矢頭を持たない */ .pp-ground-link { justify-self: center; width: 2px; height: 18px; background: var(--blue-line); border-radius: 999px; } /* Role 群 ： 一覧ではなく、ひとつの Cluster として見せる。 Cluster 全体が唯一の共通接続先（土台）へつながる */ .pp-ground-cluster { position: relative; background: var(--pale); border: 1px solid var(--blue-line); border-radius: var(--radius); padding: 12px; } .pp-ground-cluster::before { content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%); width: 64px; height: 3px; border-radius: 999px; background: var(--blue-line); } /* Role は5つ＝奇数。3列＋2列に組み、下段2件を Cluster の中央へ置く。 6列の下地を敷き、全 Role を span 2 で配置することで ★ 5件すべてが完全に同一幅になる（特定 Role だけ広い／狭いを作らない）。 */ .pp-ground-roles { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } /* padding と gap は、図解が最も狭くなる 1025px でも 「情報システム」が1行で収まる列幅になるよう決めている（font-size は下げない） */ .pp-ground-role { grid-column: span 2; font-size: 12.5px; font-weight: 700; line-height: 1.6; color: var(--blue-ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 5px; text-align: center; } /* 下段2件 ： 上段3件と同じ幅のまま、左右均等に中央へ寄る */ .pp-ground-role:nth-child(4) { grid-column: 2 / span 2; } .pp-ground-role:nth-child(5) { grid-column: 4 / span 2; } /* Section 終端 ： 結論として全幅で独立させる */ .pp-ww-end { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; } .pp-ww-end p { font-size: 15px; font-weight: 700; line-height: 1.9; color: var(--blue-ink); } .pp-ww-end p + p { margin-top: 14px; } /* ============================================================ Section 4 後回しになっている会社方針 ／Section 5 こんなことはありませんか ============================================================ */ .pp-cards3 { margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; } .pp-cards3 .card-hd { line-height: 1.65; } /* 新 Section 2 ： カード4件（Gate 4）。PC 2×2 ／Mobile 1列縦積み。 ★ 4カラム横並びよりカード1枚あたりの面積が大きく、文字を大きく組める（83 第24.9節）。 */ .pp-cards4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); } .pp-cards4 .card-hd { line-height: 1.65; } /* カード Role ： Typography Human Gate Q2 ＝ B ★ 見出し 13.5px → 16px（D-05 `font-size-h6`）／本文 13px → 14px（D-05 `font-size-body-small` PC）。 ★ 13px は 64 第14.3節で「D-05 により不採用」と明記された値。既存 Token へ戻すだけで、新規値を作っていない。 ★ Mobile の縦積み高さは Screenshot Human Gate 対象。 */ .pp-cards3 .card-hd, .pp-cards4 .card-hd { font-size: 16px; } .pp-card-t { font-size: 14px; line-height: 1.8; color: var(--ink); } /* 新2 課題カード ： 見出し左のチェック ★ 見出しが折り返しても2行目がチェックの下へ回り込まないよう grid の2カラムで組む。 ★ 補足文（.card-bd）の左端を見出し本文の左端（20 + 18 + 10 = 48px）へ揃える。 チェックが見出しだけでなくカード1枚を束ねて見えるようにするため。 */ .pp-checkcard .card-hd { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; } .pp-checkcard .card-hd svg { width: 16px; height: 16px; margin-top: 4px; color: var(--blue); } .pp-checkcard .card-bd { padding-left: 48px; } /* ------------------------------------------------------------ Visual Rhythm Refinement（2026-08-09）： 新2 は「1枚のカード」 ------------------------------------------------------------ 4項目を4枚のカードに分けると、読み手は4回「読み始め」を繰り返すことになる。 1枚のカードに束ね、行間の細い罫線だけで項目を分けることで、 「自社で起きている4つの症状」をひとまとまりとして一度に読ませる。 ★ 既存 .card ＋ 既存 .ck（チェック行）の組み合わせのみ。 新しい Design Pattern ／新しいアイコン ／新しい Color は作っていない。 ------------------------------------------------------------ */ .pp-symptoms { max-width: 860px; margin: 0 auto; } .pp-symptoms .card-bd { padding: 8px 28px; gap: 0; } .pp-symptoms .ck { grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 0; } /* 項目の区切りは既存の細い罫線のみ（新しい線色は作っていない） */ .pp-symptoms .ck + .ck { border-top: 1px solid var(--line-soft); } .pp-symptoms .ck svg { width: 16px; height: 16px; margin-top: 0; color: var(--blue); } .pp-symptoms .ck p { font-size: 16px; font-weight: 700; line-height: 1.7; color: var(--blue-ink); } /* 新2 見出しとカード群の間隔 ★ 中央寄せで見出しブロックが「章の入口」になったため、カード群の上下を同じ 56px にして、 カード4件を1つの塊として独立させる （上 56px ／カード群 ／下 56px ＝ .pp-turnline の margin-top と同値）。 ★ 元は 0px で、他Section（26〜34px）と比べてもここだけ詰まっていた。 */ #s5.pp-sec .pp-head { margin-bottom: 56px; } .pp-turn { margin-top: 32px; max-width: 860px; } /* AI 対話から原案へのプロセス図 */ .pp-flow4 { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1.15fr) 26px minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr); align-items: stretch; gap: 0 6px; } .pp-flow4-step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 14px; text-align: center; display: grid; align-content: start; row-gap: 6px; } .pp-flow4-step--out { border-color: rgba(249,115,22,.34); } .pp-flow4-ico { width: 34px; height: 34px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; background: #eaf4fe; color: var(--blue-deep); } .pp-flow4-step--out .pp-flow4-ico { background: #fff2e6; color: var(--orange); } .pp-flow4-ico svg { width: 18px; height: 18px; } .pp-flow4-t { font-size: 13.5px; font-weight: 900; line-height: 1.6; color: var(--blue-ink); } .pp-flow4-step--out .pp-flow4-t { color: var(--orange-text); } .pp-flow4-d { font-size: 12px; line-height: 1.75; color: var(--ink-mid); } /* 工程内で起きている変化を示す小 Visual ★ 既存アイコンは「工程の象徴」、小 Visual は「工程内部の変化」と役割を分ける。 ★ 文字を追加しない。線幅・角丸・色・サイズ感は3枚で統一する。 */ .pp-flow4-mini { display: grid; row-gap: 7px; justify-items: center; margin: 2px 0 1px; /* 3枚の小 Visual は内容が違っても同じ面積を占めさせる （高さが揃わないと「工程ごとに重さが違う」という誤読になる） */ min-height: 32px; align-content: center; } .pp-flow4-mini-row { display: flex; align-items: center; gap: 5px; } .pp-flow4-mini-row i { display: block; height: 5px; border-radius: 999px; background: var(--blue-line); } /* AIとの対話 ： 向かい合う2つの吹き出しで「問いかけと応答の往復」を示す。 ★ 矢印は使わない。tail の向きと左右の位置差だけで往復を読ませる。 ★ 吹き出しの中に文字・記号は入れない。 */ .pp-flow4-mini--talk { display: flex; align-items: center; justify-content: center; gap: 6px; } .pp-flow4-bub { position: relative; display: block; width: 34px; height: 18px; border-radius: 5px; } /* tail ： 吹き出しの下辺から相手側へ向けて出す小さな三角 */ .pp-flow4-bub::after { content: ""; position: absolute; top: 100%; border-style: solid; border-width: 5px 5px 0 0; } /* 問いかけ（AI側）： 淡い面。tail は右下＝相手へ向く */ .pp-flow4-bub--q { background: var(--paper); border: 1.5px solid var(--blue-line); } .pp-flow4-bub--q::after { right: 6px; border-color: var(--blue-line) transparent transparent transparent; } /* 応答（経営者側）： 一段濃い面。tail は左下＝相手へ向く */ .pp-flow4-bub--a { background: var(--pale); border: 1.5px solid var(--blue); } .pp-flow4-bub--a::after { left: 6px; border-width: 5px 0 0 5px; border-color: var(--blue) transparent transparent transparent; } /* 2つの吹き出しのあいだで、やり取りが続いていることを示す */ .pp-flow4-dots { display: flex; align-items: center; gap: 3px; } .pp-flow4-dots i { display: block; width: 3px; height: 3px; border-radius: 999px; background: var(--blue-line); } /* 整理 ： 不揃いの断片が、そろった構造へ並び直る */ .pp-flow4-mini--sort .pp-flow4-mini-row i:nth-child(1) { width: 14px; } .pp-flow4-mini--sort .pp-flow4-mini-row i:nth-child(2) { width: 34px; } .pp-flow4-mini--sort .pp-flow4-mini-row i:nth-child(3) { width: 22px; } .pp-flow4-mini--sort .pp-flow4-mini-row--fit i { width: 24px; background: var(--blue); } /* 会社方針の原案 ： 複数の要素が一枚の原案へ収束する */ .pp-flow4-mini--out .pp-flow4-mini-row--fit i { width: 20px; } .pp-flow4-mini-doc { display: block; width: 46px; height: 20px; border-radius: 4px; background: var(--paper); border: 1.5px solid var(--orange-soft); } .pp-flow4-arrow { display: grid; place-items: center; color: var(--blue-line); } .pp-flow4-arrow svg { width: 18px; height: 18px; } .pp-scatter { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; } .pp-scatter li { font-size: 11.5px; line-height: 1.5; color: var(--ink-mid); background: #f3f8fd; border: 1px solid var(--line-soft); border-radius: 999px; padding: 4px 9px; } .pp-expand { margin-top: 30px; max-width: 860px; } .pp-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .pp-chips li { font-size: 12.5px; font-weight: 700; color: var(--blue-deep); background: #eaf4fe; border-radius: 999px; padding: 6px 13px; } /* ============================================================ Section 5 問題の本質 ── 中心メッセージを最も強く見せる ============================================================ */ .pp-core { max-width: 780px; margin: 0 auto; text-align: center; } /* 導入文＋中心H2の入口ブロック（全幅中央は Desktop 側で指定） */ .pp-core-lead { margin-bottom: 32px; } .pp-core-intro { font-size: 14px; line-height: 1.9; color: var(--on-dark-soft); } .pp-core-h { margin-top: 14px; font-size: 36px; line-height: 1.5; letter-spacing: -0.02em; } .pp-core-body { margin-top: 26px; text-align: left; } /* 新3 の情景写真（4:5 縦長） ★ Base（Tablet ／Mobile）は本文の下へ縦積み。 4:5 のまま全幅で出すと Mobile で高さ437pxとなり、かえって Section が伸びるため、 ここでは 16:9 に中央クロップして横帯として見せる。 元画像は縦方向の中央に人物・手元・ノートPCが収まる構図のため、 中央44%を切り出しても情報が落ちない（画像自体は加工していない）。 ★ Desktop の2カラムと 4:5 表示は min-width:1025px 側で指定する。 */ .pp-panel-grid { display: grid; gap: 28px; } .pp-panel-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center center; border-radius: var(--radius); } /* 会社に残す4項目 ： 既存 Copy にアイコンだけを添える（説明文は足していない） ★ アイコンは淡い角丸の面に載せる。文字だけの行が4本続くより、 1項目ずつが「会社に残すもの」の単位として見分けやすくなる。 */ /* ★ Visual Rhythm Refinement（2026-08-09）： Base（Tablet 以下）は2列。 Desktop の4列を Tablet へ持ち込むと1枚が狭くなりすぎるため。 Mobile（767px 以下）は1列へ戻す。 */ .pp-keep4 { list-style: none; margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pp-keep4 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--pale-2); font-size: 15px; font-weight: 900; color: var(--blue-ink); } /* ★ 2026-08-13 ： #s8 の4カードはアイコンを置かず、4つの問いそのものに視線を集める。 面 ・枠線 ・角丸 ・文字サイズ ・列数（Desktop 2列 ／Mobile 1列）・カード間隔は `.pp-keep4` のまま使い、アイコン列（44px）だけを外して1カラムにしている。 ★ 文字はカード内で中央。親（.pp-expand--center）の中央揃えを継承する。 ★ 新しい色 ・Typography ・番号は作っていない。 ★ Mobile（767px 以下）の padding ・font-size は既存 `.pp-keep4 li` の指定がそのまま効く。 */ .pp-keep4--plain li { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; } .pp-keep4 svg { width: 44px; height: 44px; padding: 9px; border-radius: 8px; background: var(--pale); color: var(--blue); } .pp-core-em { margin-top: 22px; font-size: 16px; font-weight: 900; line-height: 1.85; color: var(--on-dark); } /* Content Condensation（2026-08-09）： 白帯の入口となる1文だけ一段大きく置く。 本文16px と Section 終端22px の間に収め、終端より強くならないようにしている。 */ /* Media Query 側の `.pp-core-em`（Mobile 14.5px）と詳細度で並ぶと負けるため、 クラス2つ分（0,2,0）で書く。 */ .pp-core-em.pp-core-em--lg { font-size: 20px; line-height: 1.8; } /* ★ 2026-08-14 ： 白帯終端の直前に置く思想コピー（`.pp-core-why`）。 共有4項目との間に余白を取り、3行を1つのまとまりとして読ませるため 1行目と2〜3行目の間は詰める（白帯入口の 52px は入口専用の間合い）。 */ .pp-core-why { margin-top: 40px; } .pp-core-why .pp-core-em--lg + .pp-core-em { margin-top: 14px; } .pp-quiet6 { list-style: none; margin-top: 26px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; } /* 共有すべきものは4件（Gate 6）。3列だと2行目が1件だけ残るため2列×2行で組む */ .pp-quiet6--four { grid-template-columns: repeat(2, minmax(0,1fr)); } .pp-quiet6 li { font-size: 12.5px; line-height: 1.7; color: var(--on-dark-mid); border: 1px solid var(--on-dark-line); border-radius: var(--radius); padding: 10px 8px; } /* Section 終端の結論 ★ 2文に分け、どちらも Section の締めとして本文より明確に大きく置く（22px）。 22px は新2の `.pp-turnline` と同値＝「立ち止まって読ませる一文」の共通サイズ。 ★ 1文目の上下に間合いを取り、結論が地の文の続きに見えないようにする。 */ .pp-core-end { margin-top: 28px; padding-top: 36px; border-top: 1px solid var(--on-dark-line); font-weight: 700; color: var(--on-dark); } .pp-core-end-a { font-size: 22px; line-height: 1.75; } .pp-core-end-b { margin-top: 28px; font-size: 22px; line-height: 1.75; } /* .pp-core-problem / .pp-core-answer は左右グループの wrapper。 Desktop 以外では素の div のまま＝従来どおりの縦積み（DOM順）になるため、 base 側には宣言を置かない（Mobile への副作用を作らない）。 */ /* ============================================================ Section 6 Business OSとは ★ Section 8 の循環と同じ図にしない（方向のある直線構造）。 ============================================================ */ /* ★ 最終 Visual 改善 B ： 新4 の Hierarchy。 H2 → 定義本文 → 方向図 → 補助（要素3件・AI／経営者本人）の順に見えるようにする。 方向図は Section 内の Visual 主役なので、`--shadow-fig`（既存 Token）を持つ図パネルとして 独立した縦ゾーンを与える。Copy・HTML 構造・font-size は変更していない。 */ /* ★ 旧公開Top 比較監査 改善3 ： 方向図の存在感。 直前の改善で図パネル化したが、実測 561×96px（Section 1077px 高に対し面積比 約5%）で 「白い枠を付けただけ」に近く、Section の Visual Anchor として弱かった。 旧公開Top の図（flow-steps 1105×223px 等）は Section 幅をほぼ使い切っていた。 font-size は変えず、ノードと図パネルの余白だけを広げて図として立たせる。 */ .pp-dir { margin: 34px auto 0; width: fit-content; max-width: 900px; padding: 40px 48px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-fig); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; } .pp-dir-node { font-size: 13px; font-weight: 900; color: var(--blue-ink); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 18px 30px; box-shadow: var(--shadow-card); } .pp-dir-arrow { color: var(--blue); display: grid; place-items: center; } .pp-dir-arrow svg { width: 26px; height: 26px; } .pp-elem5 { list-style: none; margin-top: 26px; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; align-items: start; } /* 基本要素は3件（Block 2 Q5 ＝ A）。 ★ REAL VALUE 応用2 ： 3件を全幅へ引き伸ばすと図解が本文より強く見えるため、 既存 max-width の考え方に合わせて中央 860px（`.pp-head` と同幅）へ収める。 */ .pp-elem5--three { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 860px; } .pp-elem5 li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 15px 14px; display: grid; row-gap: 6px; } .pp-elem5-n { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--orange); } .pp-elem5-t { font-size: 13.5px; font-weight: 900; line-height: 1.6; color: var(--blue-ink); } .pp-elem5-d { font-size: 12px; line-height: 1.8; color: var(--ink-mid); } /* ★ 最終 Visual 改善 B ： AI／経営者本人の対比が Section の主役にならないよう1段弱める。 幅を 900px → 860px（`.pp-deliv` と同値。新しい値を作っていない）へ絞り、 カードの影を外して補助情報として読ませる。Copy・カード件数は変更していない。 */ .pp-role { margin-top: 42px; max-width: 860px; } .pp-role-cols { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; align-items: start; } .pp-role-cols .card { box-shadow: none; border-color: var(--line-soft); } /* Content Condensation（2026-08-09）： 新4 は Section 全体を中央軸に揃える。 ★ カードの中身まで中央になると読みにくいため、カード群だけ左揃えへ戻す。 */ .pp-role--center { margin-left: auto; margin-right: auto; text-align: center; } .pp-role--center .pp-role-cols { text-align: left; } #s7 .pp-turn-h3 { text-align: center; } /* ★ 2026-08-09 ： 新4 の転換文を、導入文（.lead）と同じ文字の見え方にする。 H2 のすぐ下で見出しが2つ続いて見えていたため、一段弱い文として読ませる。 値は `.lead`（15px ／1.85 ／--ink-mid）と `.pp-body` と同じ既存 Token のみ。 ★ `.pp-turn-h3` は lp/business-os.html も使うため、Base 宣言は変えず Top 側だけ modifier `--lead` で上書きする。 ★ 要素は

のまま（見出し構造 ／文書アウトラインは変更していない）。 */ .pp-h3.pp-turn-h3--lead { font-size: 15px; font-weight: 400; line-height: 1.85; letter-spacing: normal; color: var(--ink-mid); } /* ★ Visual Rhythm Refinement（2026-08-09）： 新4 の意味の切れ目を余白で示す。 ・Transformation Visual → 「AIは、答えを決めるためではなく〜」 ： 42 → 56px （説明の終わりと、AI の役割という別の話題の切り替わり） ・AI 見出し → 2カード ： 16 → 24px いずれも既存 Spacing Scale の値。矢印は追加していない。 */ .pp-role--center { margin-top: 56px; } .pp-role--center .pp-role-cols { margin-top: 24px; } /* Content Condensation（2026-08-09）： 新5 の「会社方針の原案」も中央軸へ揃える。 本文は
で改行位置が固定されているため、中央寄せでも行頭が乱れない。 */ /* ★ Visual Rhythm Refinement（2026-08-09）： 成果物Visual → 会社方針の原案 の間を 30 → 56px へ。「用途の異なる4つの成果物」の話が終わり、 「それが会社方針の原案にもなる」という別の話に移ることを余白だけで示す。 矢印は追加していない。56px は既存 Spacing Scale の値。 */ .pp-expand--center { margin-left: auto; margin-right: auto; text-align: center; margin-top: 56px; } /* ★ Visual Rhythm Refinement（2026-08-09） 新8 は H2 を外したため、この1文が Section の見出しそのものになる。 18px（本文級）では見出しとして立たないので 25px へ。 25px は Tablet の H2 と同値＝既存 Typography Scale の値で、新しい Token は作っていない。 通常 Section の H2（36px）より 11px 小さく、 「Visual 強度2 ＝ 最も静かな Section」という位置づけは維持している。 line-height 1.5 は新3の中心H2（.pp-core-h）と同値。 */ .pp-lead--lg { font-size: 25px; font-weight: 900; line-height: 1.5; letter-spacing: -0.01em; color: var(--blue-ink); } /* 主Message → 説明文 ： 10 → 24px。「何ではないか」と「何なのか」を分けて読ませる */ #s10 .pp-head .pp-lead--lg + .lead { margin-top: 24px; } /* 説明文 → 対比カード ： 26 → 44px。主Message → 説明 → 具体的境界 の3段階を余白で示す */ #s10 .pp-promise { margin-top: 44px; } /* ★ 2026-08-12 ： 第二幕の2 Section（s9 循環 ／s8 成果物）だけ、 H2 → 導入文の間を 14 → 44px にする。見出しを読んだあとに一呼吸置いてから 導入文へ入らせるため。増分 30px は `.lead` の行送り（27.75px）とほぼ同じ ＝ 視覚的に約1行分。44px は本 CSS で既に使われている値で、新しい Token は作っていない。 ★ `.pp-head--center` は lp/index.html にしか存在しない（lp/business-os.html の `.pp-head` は5箇所とも modifier なし）。加えて #s8 ／#s9 で対象を限定しているため、 business-os.html および Top の他 Section へは波及しない。 ★ `.h2 + .lead` の隣接は Top では s8 ／s9 のみ（s5 ／s7 は H2 のみ、 s10 は H2 を持たない）。Section 全体の padding は変更していない。 */ #s8 .pp-head--center .h2 + .lead, #s9 .pp-head--center .h2 + .lead { margin-top: 44px; } /* ============================================================ 新4（#s7）Transformation Visual ── 案C1 STRAIGHT TRANSFORMATION ★ 2026-08-08 Visual Human Gate 確定。 旧「方向図（.pp-dir）」＋「基本要素3件（.pp-elem5--three）」は、同じ変換を 〈状態〉と〈動作〉の2ブロックで2回言っていたため、1本の Flow へ統合した。 ［社長の中にある判断］→ 01 → 02 → 03 →［日々の判断と行動］ ★ 独立カードは0枚にする。「3枚のカード」ではなく「1本の変換プロセス」に見せることが目的。 ★ 案C2（左から右へ広がる背景面 ／くさび形）は不採用のため実装していない。 ★ 新しい Design Token は作っていない（既存 Token の Application のみ）。 ★ `.pp-dir` ／`.pp-elem5` の宣言は削除していない。`business-os.html` が参照しており、 消すとそちらの表示が壊れるため。本 Top からは HTML 側で参照しなくなっただけ。 ============================================================ */ .pp-tf { margin-top: 26px; padding: 32px; /* Human Gate ： Prototype の 40px → 32px */ background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-fig); /* 図パネルの既存 Token（.pp-dir と同じ） */ } .pp-tf-row { display: grid; align-items: stretch; grid-template-columns: auto auto minmax(0,1fr) auto auto; } /* 両端 ＝〈状態〉。中央3件（動作）と同じ見た目にはしない */ .pp-tf-node { display: grid; align-content: center; row-gap: 8px; padding: 22px 20px; border-radius: var(--radius); text-align: center; } .pp-tf-node-k { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; } .pp-tf-node-t { font-size: 14px; font-weight: 900; line-height: 1.65; } /* 起点 ＝ 社長個人。輪郭だけの静かなブロック */ .pp-tf-node--from { width: 172px; background: var(--pale-2); border: 1px solid var(--blue-line); color: var(--blue-ink); } .pp-tf-node--from .pp-tf-node-k { color: var(--ink-mid); } /* 終点 ＝ 会社。ここだけ塗りにして「会社のものになった」ことを示す ★ 2026-08-12 ： 面の色を濃紺（--blue-ink）から Hero と同じ青（--grad-hero）へ。 Hero で実際に使っている既存 Token をそのまま再利用しており、新しい色は作っていない。 border は既存 Token（--blue-deep #1565c0）。 ★★ 2026-08-31 ： --grad-hero の階調を1段落としたため、#1565c0 は ★グラデ内の停止色ではなくなった。★border の値自体は変更していない。 width ／文字色 ／サイズ ／余白は変更していない。 */ .pp-tf-node--to { width: 186px; background: var(--grad-hero); border: 1px solid var(--blue-deep); color: var(--paper); } /* 青地の上のラベル ： master-design.css で既に使っている白の透過値（.72）に合わせる */ .pp-tf-node--to .pp-tf-node-k { color: rgba(255,255,255,.72); } /* 中央3件 ＝〈動作〉。カードで囲わず、1本の線の上に置く */ .pp-tf-steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; padding: 0 30px; } /* Flow 線 ： 起点から終点へ貫く1本。丸番号（背景 --paper）が後から描かれて重なりを消す */ .pp-tf-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px; background: linear-gradient(90deg, var(--blue-line), var(--blue) 50%, var(--blue-line)); } .pp-tf-step { display: grid; row-gap: 8px; } .pp-tf-step-n { position: relative; /* Flow 線（::before）より後ろに描かせない */ width: 38px; height: 38px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--blue); } .pp-tf-step-t { font-size: 13.5px; font-weight: 900; line-height: 1.6; color: var(--blue-ink); text-align: center; } /* ★ 説明文は自然な折り返しのまま。2行化を目的に font-size ／letter-spacing ／幅を調整しない */ .pp-tf-step-d { font-size: 12px; line-height: 1.8; color: var(--ink-mid); } /* 矢頭 ： 既存 .pp-dir-arrow と同じ Visual Grammar（Inline SVG ／文字を入れない） */ .pp-tf-tip { width: 26px; display: grid; place-items: center; color: var(--blue); } .pp-tf-tip svg { width: 20px; height: 20px; } /* ============================================================ Section 7 何が会社に残るのか ── 幹から4分岐 ★ 実物 PDF ／Screenshot ／新規生成画像を使用していない（HTML ／CSS のみ）。 ============================================================ */ /* ★ REAL VALUE 応用2 ： 成果物 Visual が横へ広がりすぎると、H2 より Visual が強く見える。 説明文4本を削除して縦が短くなった分、幅も本文カラム相当（860px）へ収めて視線を中心へ集める。 ★ 新しい Layout は作っていない。既存の max-width の考え方を適用しただけ。 */ /* ★ 旧公開Top 比較監査 改善4 ： 成果物4点の実在感。 実測で1件あたり 193×140px・アイコン44×53px と小さく、「何が残るのか」という Section の答えがアイコン列に見えていた。旧公開Top の料金カード（317×447px）や flow-steps（1105×223px）と比べて明確に小さい。 Copy・件数・font-size は変えず、パネル幅と1件あたりの面積・アイコンだけを大きくする。 */ .pp-deliv { --pp-deliv-line: rgba(21, 101, 192, 0.26); margin-top: 28px; padding: 34px 30px 32px; max-width: 1000px; margin-left: auto; margin-right: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-fig); } /* ★ 2026-08-13 ： Top #s8 の冒頭に「対話が何をたどるのか」の1行＋4項目を置いたため、 そのブロックと成果物パネルの間だけを 28 → 56px にする。 28px のままだと、締めの1文（これらが、一つのつながった形として〜）が 4項目の結びではなく成果物パネルの前置きに見えるため。 56px は #s8 内の他の区切り（.pp-expand--center）と同値で、新しい Spacing 値は作っていない。 ★ #s8 に限定している。lp/business-os.html の #s8 は「成果物 → .pp-expand」の順で この隣接関係を持たないため、影響しない。 */ #s8 .pp-expand--center + .pp-deliv { margin-top: 56px; } /* ★ 2026-08-13 ： 「対話の話」→「成果物の話」の切り替わりだけ、`--gap2` よりさらに 本文1行ぶん（16px × line-height 1.9 ≒ 30px）広く取る。 Desktop 44 → 72px ／Mobile 34 → 56px。 ★ 直後の成果物図との間（56px）より広くしているのは、この導入文が 前の段落ではなく成果物図側のまとまりに属することを示すため。 ★ 共有の `.pp-body--gap2` は変更していない（#s8 のこの1件だけに限定）。 */ #s8 .pp-expand--center .pp-body--gap2 { margin-top: 56px; } @media (min-width: 768px) { #s8 .pp-expand--center .pp-body--gap2 { margin-top: 72px; } } .pp-deliv-origin { text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-mid); } .pp-deliv-core { text-align: center; } .pp-deliv-core span { display: inline-block; font-size: 14px; font-weight: 900; color: var(--blue-deep); background: #eaf4fe; border-radius: 999px; padding: 8px 20px; } .pp-deliv-stem { position: relative; display: block; } .pp-deliv-stem--top { height: 14px; } .pp-deliv-stem--branch { height: 22px; } .pp-deliv-stem::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--pp-deliv-line); } .pp-deliv-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 14px; } .pp-deliv-item { position: relative; text-align: center; padding-top: 28px; padding-bottom: 6px; } .pp-deliv-item::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 22px; background: var(--pp-deliv-line); } .pp-deliv-item::after { content: ""; position: absolute; top: 0; height: 1px; background: var(--pp-deliv-line); left: -7px; right: -7px; } .pp-deliv-item:first-child::after { left: 50%; } .pp-deliv-item:last-child::after { right: 50%; } .pp-deliv-fig { display: grid; place-items: center; width: 100%; height: 88px; margin-bottom: 12px; } .pp-deliv-fig svg { width: 62px; height: 75px; fill: none; stroke: var(--blue-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pp-deliv-purpose { font-size: 12px; font-weight: 900; line-height: 1.7; color: var(--blue); } .pp-deliv-name { font-size: 14px; font-weight: 900; line-height: 1.7; color: var(--ink); margin-top: 4px; } .pp-deliv-desc { font-size: 12px; font-weight: 400; line-height: 1.85; color: var(--ink-mid); margin-top: 7px; } .pp-deliv-name, .pp-deliv-desc { text-wrap: balance; } /* ============================================================ Section 8 判断を会社で循環させる ★ 折り返し型6段階フロー＋戻り Cue。完全な円環図・円形レイアウトは用いない。 ============================================================ */ .pp-cycle { margin-top: 28px; } .pp-cycle-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } .pp-cycle-step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 15px 15px 16px; display: grid; row-gap: 6px; } /* 折り返しの向きを示す矢印（1→2→3 ／4→5→6）*/ .pp-cycle-step:not(:nth-child(3n))::after { content: ""; position: absolute; right: -12px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--blue-line); border-right: 2px solid var(--blue-line); transform: translateY(-50%) rotate(45deg); } .pp-cycle-step--back { border-color: rgba(249,115,22,.34); } .pp-cycle-n { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--orange); } .pp-cycle-t { font-size: 14px; font-weight: 900; line-height: 1.6; color: var(--blue-ink); } .pp-cycle-step--back .pp-cycle-t { color: var(--orange-text); } .pp-cycle-d { font-size: 12px; line-height: 1.8; color: var(--ink-mid); } .pp-cycle-cue { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px dashed rgba(249,115,22,.5); border-radius: var(--radius); background: #fff8f2; font-size: 12.5px; line-height: 1.8; color: var(--orange-text); font-weight: 700; } .pp-cycle-cue-ico { display: grid; place-items: center; color: var(--orange); flex-shrink: 0; } .pp-cycle-cue-ico svg { width: 18px; height: 18px; } /* ============================================================ 新6（#s9）Cycle Visual ── 案C1 STRAIGHT LOOP ★ 2026-08-08 Visual Human Gate 確定。 旧「独立カード6枚（.pp-cycle-steps）」は、01〜06 が等価に並ぶため 「01 が入口」「02〜06 だけが回る」「06 は 02 へ戻る」という Copy の意味構造が 図から読み取れなかった。これを1本の Cycle Visual へ置き換える。 01 ─→［ 02 → 03 → 04 → 05 → 06 ］ ↑ │ └────────── 戻り ────────┘ ★ 単純な6ノード円環にはしない。Copy は 06 から 01 ではなく 02 へ戻ると言っているため。 ★ S1 Hero（正円Ring）とも S4（一方向 Transformation）とも図の型を分けている。 ★ 新しい Design Token は作っていない（既存 Token の Application のみ）。 ★ 旧 `.pp-cycle*` の宣言は削除していない。`business-os.html` が参照しているため。 Cue（`.pp-cycle-cue`）は既存クラスをそのまま流用しており、CSS を重複させていない。 ============================================================ */ /* 図パネル ： S4 の Transformation Visual と同じ器（Prototype C1 と同一）。 これがないと Loop 面（--pale-2）が Section 背景（--pale）に沈み、 「この範囲が回る」という Loop 面の意味が読めなくなる。 */ .pp-cyc { margin-top: 28px; padding: 32px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-fig); } .pp-cyc-row { display: grid; grid-template-columns: auto auto minmax(0,1fr); } /* 01 ＝ 入口。Loop 面の外・白地の上に置く。塗らない ＝ Loop の一員ではない */ .pp-cyc-entry { width: 140px; align-self: center; display: grid; row-gap: 6px; padding: 16px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--blue-line); } /* 番号も 01 だけ橙にしない（02〜06 と同格に見せない） */ .pp-cyc-entry .pp-cyc-n { color: var(--ink-mid); } /* 入口線 ： 細い1px。「入るのは一度だけ」 */ .pp-cyc-in { align-self: center; position: relative; width: 36px; height: 14px; display: grid; place-items: center; color: var(--blue); } .pp-cyc-in::before { content: ""; position: absolute; left: 0; right: 8px; top: 50%; height: 1px; background: var(--blue-line); } .pp-cyc-in svg { position: relative; width: 12px; height: 12px; margin-left: 20px; } /* Loop 領域 ： 02〜06 だけを1枚の薄い面で囲う。 ★ 装飾ではなく「この範囲が回り続ける」ことを示す意味要素。囲いはこの1枚だけ。 */ .pp-cyc-loop { position: relative; background: var(--pale-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 22px 22px 62px; } .pp-cyc-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; } /* ★ 各 Step はカードにしない（白背景・shadow を持たせない） */ .pp-cyc-step { position: relative; display: grid; row-gap: 5px; } .pp-cyc-n { font-size: 11px; font-weight: 900; letter-spacing: .08em; color: var(--orange); } .pp-cyc-t { font-size: 13.5px; font-weight: 900; line-height: 1.6; color: var(--blue-ink); } .pp-cyc-step--back .pp-cyc-t { color: var(--orange-text); } /* ★ 説明文は常時表示。2行化を目的に font-size ／letter-spacing を触らない */ .pp-cyc-d { font-size: 12px; line-height: 1.8; color: var(--ink-mid); } /* 進行（02→03→04→05→06）： 既存 .pp-cycle-step::after と同じ山形。新しい矢印を作らない */ .pp-cyc-chev { position: absolute; right: -12px; top: 14px; width: 8px; height: 8px; border-top: 2px solid var(--blue-line); border-right: 2px solid var(--blue-line); transform: rotate(45deg); } /* 06 の次は Return line が示すので山形は出さない */ .pp-cyc-step--back .pp-cyc-chev { display: none; } /* 06 → 02 の戻り ： Loop 領域の下辺を走る。進行の青より強い橙。 ★ 幅可変で矢頭が歪まないよう、線は CSS の border、矢頭だけ固定サイズの Inline SVG。 ★ 左端＝02 の中央 ／右端＝06 の中央。5列・gap16px のため列幅の半分は (100% - 44px - 64px)/10。 */ .pp-cyc-return { position: absolute; bottom: 16px; height: 34px; left: calc(22px + (100% - 44px - 64px) / 10); right: calc(22px + (100% - 44px - 64px) / 10); border: 2px solid var(--orange); border-top: 0; border-radius: 0 0 12px 12px; } /* 矢頭は 02 側（上向き）1箇所だけ。06 側には付けない ＝ 向きが二義的にならない */ .pp-cyc-rtip { position: absolute; left: -1px; top: -7px; transform: translateX(-50%); display: grid; place-items: center; color: var(--orange); } .pp-cyc-rtip svg { display: block; width: 14px; height: 14px; } /* ============================================================ Section 9 約束すること・約束しないこと ★ 強い赤／緑・正誤記号を用いない。否定側だけを強く見せない。 ============================================================ */ .pp-promise { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; } .pp-promise-card .card-hd { color: var(--blue); } .pp-promise-card--not .card-hd { color: var(--ink-mid); background: #f7f9fb; } /* ★ 2026-08-09 ： 「約束しないこと」の見出しを橙へ（新4「経営者本人がすること」＝ .card--orange と同じ扱い）。 Top 全体で「橙 ＝ 経営者本人の側 ／境界」という役割が揃う。既存 Token ／既存の値のみ使用。 ★ .pp-promise-card--not は business-os.html も使うため、上の共通定義は残し、 Top 側だけ modifier `--orange` を付けて上書きする。 */ .pp-promise-card--not.pp-promise-card--orange .card-hd { color: var(--orange); background: #fff8f2; border-bottom-color: #ffe6d2; } .pp-pm { display: grid; row-gap: 4px; } /* ★ 2026-08-09 ： 「約束すること」を箇条書きに。 丸印は「約束しないこと」の横棒（.pp-nm-mark）と対になる印。文言は変更していない。 ★ .pp-pm は business-os.html（印なし）も使うため、印がある Top 側だけを modifier `--list` で 2カラムにする。共通定義は上のまま。 */ .pp-pm.pp-pm--list { grid-template-columns: 14px minmax(0, 1fr); gap: 10px; row-gap: 4px; align-items: start; } .pp-pm-mark { width: 7px; height: 7px; margin: 10px 0 0 2px; border-radius: 50%; background: var(--blue); } /* 新 Section 8 ： 約束すること4件 ／約束しないこと5件。説明文は使用しない（Block 3 Q10 ＝ A）。 ★ Typography Human Gate Q2 のカード Role 方向（16px）に合わせる。 ★ ただし「約束すること」＝ Weight 900 ／「約束しないこと」＝ Weight 400 という 既存 Hierarchy は維持し、同一 CSS へ統合しない。 */ .pp-pm-t { font-size: 16px; font-weight: 900; line-height: 1.7; color: var(--blue-ink); } .pp-pm-d { font-size: 14px; line-height: 1.85; color: var(--ink-mid); } .pp-nm { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 10px; align-items: start; } .pp-nm-mark { width: 10px; height: 1.5px; margin-top: 10px; background: var(--ink-mid); opacity: .55; } .pp-nm p { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--ink); } /* ============================================================ Section 10 約束すること・約束しないこと ── 旧 CTA Visual の解除 ★ master-design.css の `#s10 { background: var(--grad-s10) }` と `#s10::after` は 60系の CTA Section 用である。11Section 版の #s10 は「約束すること・約束しないこと」 であるため、ここで解除して白背景へ戻す。 ============================================================ */ #s10.pp-sec { background: var(--paper); position: static; overflow: visible; } #s10.pp-sec::after { content: none; display: none; } /* ★ 2026-08-09 ： Top だけ背景を淡いブルーへ。 上の `#s10.pp-sec`（ID ＋ class）が `.sec--pale` より強いため、同じ強さで明示上書きする。 business-os.html の #s10 は `.sec--pale` を持たないので白のまま。 */ #s10.pp-sec.sec--pale { background: var(--pale); } /* ============================================================ Section 11 まず無料AI体験から ── CTA Visual の再定義 ★ 旧 #s10 の CTA Visual を新 #s11 へ移す。class 名（.s10-*）は据え置き、 selector だけを #s11 へ合わせる。 ★ master-design.css の `#s11 { background: var(--pale) }` は 60系の終端バンド用のため、 ここで CTA 背景へ上書きする。 ============================================================ */ #s11.pp-sec { position: relative; overflow: hidden; background: var(--grad-s10); } /* ★ 最終 Visual 改善 D ： 最終CTA へ視線を集中させるため、右側の円形装飾を弱める。 Copy も要素も削っていない。既存装飾の不透明度だけを下げ、オレンジ CTA のグローが Section 内で最も強い光源になるようにする。 */ #s11.pp-sec::after { content: ""; position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: 460px; height: 460px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 42% 38%, rgba(200,232,255,.18) 0%, rgba(21,101,192,.11) 44%, transparent 70%); border: 1px solid rgba(215,240,255,.20); } #s11.pp-sec .wrap { position: relative; z-index: 1; } .pp-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 26px; position: relative; z-index: 1; } .pp-facts { list-style: none; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; } .pp-facts li { display: grid; row-gap: 2px; min-width: 132px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); padding: 10px 14px; } .pp-facts-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-soft); } .pp-facts-v { font-size: 15px; font-weight: 900; color: var(--on-dark); } .pp-cta-facts--dark { color: var(--on-dark-soft); } /* ★ REAL VALUE 応用3 ： 最終 CTA の直前・直後に「CTA へ集中できる余白帯」を確保する。 ★ Copy も装飾も追加していない。margin だけで、CTA の前後に他要素が寄らないようにする。 */ .s10-cta-wrap { margin-top: 40px; margin-bottom: 8px; } /* ★ 最終 Visual 改善 D ： 最終CTA の集中感。 facts は直前の説明文へ寄せ（22px → 16px）、CTA の手前には逆に広い間を取る（40px → 54px）。 これにより「説明 ＋ facts」→ 間 →「CTA」という視線順になる。Copy も要素も変更していない。 */ #s11 .pp-facts { margin-top: 16px; } #s11 .s10-cta-wrap { margin-top: 54px; margin-bottom: 14px; } /* ============================================================ 中間CTA帯（新5 と 新6 のあいだ） ★ Section ではない。Section ID も持たない。 ★ Visual 強度は Hero ／最終CTA より1段下げる。 - 背景 ： `--pale-2`（新5 の白と 新6 の `--pale` の中間トーン） - 見出し ： 19px ＝ 既存 `.pp-h3` と同値。新しい値を作っていない - CTA ボタン ： 既存 `.s10-cta` を再利用し、グロー（影）だけ弱める ============================================================ */ .pp-midcta { background: var(--pale-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 46px 0; } .pp-midcta-in { display: grid; justify-items: center; text-align: center; } .pp-midcta-h { font-size: 19px; font-weight: 900; line-height: 1.6; letter-spacing: -0.01em; color: var(--blue-ink); } .pp-midcta-cta { margin-top: 24px; box-shadow: 0 0 0 8px rgba(249, 115, 22, 0.07), 0 12px 30px rgba(249, 115, 22, 0.24); } .pp-midcta-cta:hover { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0.10), 0 16px 36px rgba(249, 115, 22, 0.30); } .pp-midcta-facts { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink-mid); } /* ★ 2026-08-09 ： Top の中間CTA を最終CTA（#s11）と同じ青グラデ帯にする。 背景が濃くなるぶん、見出しと補足の文字色を on-dark 側へ入れ替える（既存 Token のみ）。 上下の細い境界線は青地では意味を持たないため外す。 ★ business-os.html は `--dark` を持たないため、薄い背景のまま影響を受けない。 */ .pp-midcta--dark { background: var(--grad-s10); border-top: 0; border-bottom: 0; } .pp-midcta--dark .pp-midcta-h { color: var(--on-dark); } .pp-midcta--dark .pp-midcta-facts { color: var(--on-dark-soft); } /* 新9 右カラムの情景写真 ★ 16:9 のまま置く。object-fit によるトリミングはしない。 ★ radius は既存 Token（--radius）。独自の影・filter は足していない。 */ .pp-cta-photo { margin: 0 0 24px; } .pp-cta-photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); } .pp-line2 { display: grid; row-gap: 10px; } .pp-line2-row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--on-dark-line); border-radius: var(--radius); } .pp-line2-k { font-size: 12.5px; font-weight: 900; color: var(--on-dark); } .pp-line2-v { font-size: 12.5px; line-height: 1.8; color: var(--on-dark-mid); } #s11 .s10-notes { margin-top: 16px; } /* ============================================================ Desktop（1025px 以上） ============================================================ */ @media (min-width: 1025px) { /* ------------------------------------------------------------ Desktop Typography Hierarchy（Visual Quality Final Human Gate ／2026-08-08 確定） ------------------------------------------------------------ Hero H1 52 ＞ 新S3 中心H2 40 ＞ 通常 Section H2 36 ＞ 新S9 H2 32 ＞ 本文 16 ★ Gate 6-A ＝ C ： 通常 Section H2 を 32px → 36px。 ただし **新 Section 9（`#s11`）だけは 32px を維持**する。 36px では H2 2行目「今お考えのことを言葉にしてみませんか。」の必要幅 667.4px に対し CTA 左カラムが 595.9px（1280px）／604px（1440px）しかなく、 「か。」だけが3行目へ落ちるため（不足71.6px）。 CTA カラム比率は Gate 3 で確定済みのため再調整せず、**意図的な Application 例外**とする。 この例外を理由に、他の通常 H2 を 32px へ戻さない。 ★ Gate 6-B ＝ B ： 新 Section 3 の中心 H2（`.pp-core-h`）を 36px → 40px。 ★ Tablet 25px ／Mobile 21px は変更しない。 ★ line-height は通常 H2 ＝ 1.4（Gate D ＝ B）／新S3 ＝ 1.5 を維持。 ★ letter-spacing は -0.02em のまま（D-08 準拠のため再判断しない）。 ★ いずれも Application 実装であり、新しい Design Token は作っていない。 ------------------------------------------------------------ */ .pp-sec .h2 { font-size: 36px; } /* `#s7.pp-sec .h2` ／`#s11.pp-sec .h2`（第46行）は ID 指定で詳細度が高いため、明示的に上書きする */ #s7.pp-sec .h2 { font-size: 36px; } /* ★ 新 Section 9 のみ 32px（CTA 組版上の Application 例外） */ #s11.pp-sec .h2 { font-size: 32px; } /* 新 Section 3 の中心 H2（`.h2` と同時付与のため明示的に上書きする） */ #s6.pp-sec .pp-core-h { font-size: 40px; } /* Gate D ＝ B ： 通常 Section H2 のみ line-height 1.4。 新 Section 3 の中心 H2 は `.h2 pp-core-h` の同時付与のため `:not()` で除外し、 `.pp-core-h` 側の 1.5 をそのまま効かせる。HTML への class 追加は不要。 Tablet ／Mobile は対象外（本宣言は Desktop メディアクエリ内に限定）。 */ .pp-sec .h2:not(.pp-core-h) { line-height: 1.4; } /* ------------------------------------------------------------ Gate 6-C ＝ B ： Desktop の Section 上下 padding を一段引き上げる。 ------------------------------------------------------------ Visual Anchor（新3 カード群 ／新4 方向図 ／新5 成果物 ／新7 写真）を強化した結果、 従来の 56 ／64 ／72px では見出しと Visual に対して呼吸が足りなくなったため。 ★ 強度差（弱 ／標準 ／強）の3段構成は維持し、一律には揃えていない。 ★ Hero（`#s1`）と中間CTA（`.pp-midcta`）は対象外。 ★ Tablet 52 ／46px ／Mobile 44px は変更しない（本宣言は Desktop メディアクエリ内に限定）。 ★ 旧公開Top の 100px はそのまま採用していない。新しい Spacing Token も作っていない。 ------------------------------------------------------------ */ #s10.pp-sec { padding: 64px 0; } /* 弱 ： 56 → 64 */ #s2.pp-sec, #s5.pp-sec, #s7.pp-sec, #s9.pp-sec, #s11.pp-sec { padding: 80px 0; } /* 標準 ： 64 → 80 */ #s6.pp-sec, #s8.pp-sec { padding: 88px 0; } /* 強 ： 72 → 88 */ /* 新 Section 2 ： カード4件を 2×2 で組む（83 第24.9節） */ .pp-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } /* ------------------------------------------------------------ Hero 6ノード ： Desktop でのみリング径に合わせてノードを縮める ------------------------------------------------------------ `.hero-grid` の左カラムは 568px 上限を保ち、右の Visual カラムだけが `1fr` として縮むため、リング径は 1278px 未満で 560 → 307px まで小さくなる。 ノード径を 86px 固定のままにすると、1025px でノード間の隙間が ノード径の37%まで詰まり、Orange の弧が見えず「円環」に見えなくなる。 そこでリング径へ追従させ、1440px の比率（ノード/リング 15.4%）に近づける。 cqw は `.hero-fig` の幅の1%。`.osring` 自身に container-type を付けると `aspect-ratio: 1` と干渉するため、親の `.hero-fig` をコンテナにしている （`.hero-fig` 幅と `.osring` 幅は 1440px で 562/560、1025px で 307/307）。 ★ Desktop 限定。1024px 以下は既存の 78px／64px 体系をそのまま使う。 ------------------------------------------------------------ */ .hero-fig { container-type: inline-size; } /* ★ Hero Supporting Copy Refinement（2026-08-09） Desktop の3段階を余白で分ける。 H1 → 「取締役とエンジニア。」 ： 22 → 44px（大きめ ／意味の切り替わり） 小見出し → 説明本文 ： 20px（中程度 ／同じまとまりの中） 説明本文 → CTA ： 30 → 44px（大きめ ／説明から行動へ） 44 ／20px はいずれも既存 Spacing Scale の値。新しい値は作っていない。 小見出しは 20px（`.pp-core-em--lg` と同値）。H1 52px の 2.6分の1で競合しない。 */ /* ★ 2026-08-14 ： 問いかけ（小見出し）を Desktop で2行にしたことで 1行分（32px）増えるため、 Hero 全体の高さを現状維持するよう 3つの余白を詰める（44 → 32 ／20 → 16 ／44 → 32）。 32 ／16px はいずれも既存 Spacing Scale の値。段階の強弱（大 ／中 ／大）は変えていない。 */ /* ★ 2026-08-14 ： H1 を「誰もが『再現できる』形に。」へ変更したことで、 2行目が 52px のままだと Hero テキスト幅（568px）を超えて3行に割れるため縮める。 改行位置（社長の判断を、／みんなが…）を優先した結果の調整であり、Hero の構造は変えていない。 ★ 2026-08-14 追記 ： 見出しからカギ括弧が外れて1文字短くなったため 44px → 47px。 47px が2行に収まる最大値である（48px 以上は3行に割れる）。 行送りは元の 1.28 のまま。H1 が縮んだ分は下の余白へ振り分け、 Hero ブロック全体の高さ（＝Brand Tag ／リング図の位置）を元に保っている。 */ .hero-h1 { font-size: 41px; } /* ★ H1 が 47px になって 7px 伸びた分、下の余白から 7px 差し引いて Hero ブロック全体の高さ（＝Brand Tag ／リング図の位置）を保つ。 配分は「H1直下は詰める／説明文前とCTA前を確保する」方針。 */ .pp-hero-uni { margin-top: 34px; } .pp-hero-uni-h { font-size: 20px; } .pp-hero-uni-b { margin-top: 22px; } .hero-cta-wrap { margin-top: 52px; } .osring-nodes--six li { width: clamp(54px, calc(20px + 11.79cqw), 86px); height: clamp(54px, calc(20px + 11.79cqw), 86px); gap: clamp(1.5px, calc(0.7px + 0.41cqw), 3px); } .osring-nodes--six svg { width: clamp(14px, calc(5.1px + 3.02cqw), 22px); height: clamp(14px, calc(5.1px + 3.02cqw), 22px); } /* ラベル下限は 10px（最長「振り返り」が 39.6px で、最小ノードの内径48.2pxに収まる） */ .osring-nodes--six span { font-size: clamp(10px, calc(2.8px + 1.645cqw), 12px); } /* ★ 旧公開Top 比較監査 改善1 ： 人物を Visual Anchor として成立させる。 旧公開Top（lp/index.html）の代表者写真は 1280px 幅で 473×631px（コンテナ幅の37.4%）だったのに対し、 新Top は 210×280px（同 16.6% ／面積比 0.20倍）で、文章に対する添え物になっていた。 写真カラムを 260px → 400px、写真自体を 210px → 360px へ拡大する。 Copy・HTML 構造・写真 Asset はいずれも変更していない（`itahashi.png` をそのまま使用）。 */ .pp-fs { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "head fig" "body fig"; column-gap: 48px; row-gap: 22px; align-items: start; } .pp-fs-head { grid-area: head; } .pp-fs-fig { grid-area: fig; position: sticky; top: 96px; row-gap: 24px; } .pp-fs-body { grid-area: body; } .pp-fs-photo { width: 360px; } /* ★ 2026-08-09 ： Desktop だけ、意味の切れ目を1行ぶん広げる。 ・「私自身が経営の現場で感じたことです。」→「私は、エンジニアとして働いた後、」 ＝ 導入と本編の切れ目。22 → 36px。 ※ 一度 52px（＝ 行の高さ 30px をそのまま加算）にしたが、 元の 22px にすでに 0.7行ぶんの空きがあり、合計で2行アキに見えたため 36px へ戻した。 Copy は変更していない。Tablet ／Mobile は現状のまま。 ★ 2026-08-09 ： 「と考えるようになりました。」→「そのために設計したのが、Business OSです。」 の 30px は、全幅共通の宣言（`#s2 .pp-body--em`）へ移した。ここでは指定しない。 */ .pp-fs { row-gap: 36px; } /* ★ 2026-08-09 ： 新4 の Transformation Visual → 「AIは、答えを決めるためではなく〜」の間を さらに1行ぶん広げる（56 → 88px）。「仕組みの説明」と「AIの役割」は別の話なので、 Section 内でいちばん大きい切れ目にする。88px は Desktop の Section padding（強）と同値。 Tablet ／Mobile は 56px のまま。 */ /* ※ 2026-08-09 追記 ： さらに1行ぶん（本文1行 ≒ 30px）広げて 88 → 118px。 */ #s7 .pp-role--center { margin-top: 118px; } /* Screenshot Human Gate 5.1 ＝ B ： 新9 H2 の2行目（18字＝実測593.3px）が 左カラム 570.3px に入りきらず「か。」だけが3行目へ落ちていた。 Copy と H2 32px を変えずに解消するため、左カラムのみ 0.86fr → 0.78fr へ広げる（実測596.1px）。 他 Section の H2 には影響しない（本宣言は #s11 の CTA グリッド専用）。 */ .pp-cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); column-gap: 44px; align-items: start; } /* Section 3 ： 中段2カラム（左＝本文 ／右＝図解）。上段と下段は全幅 */ .pp-ww-main { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr); column-gap: 44px; row-gap: 0; } .pp-ww-fig { align-self: center; } /* Section 4 プロセスカード ： Grid の行ストレッチで生じる下部空白を上下へ均等配分する （カード高・カード幅・内容は変更しない） */ .pp-flow4-step { align-content: center; } /* Role 群は Desktop でも Cluster を維持する（縦一列の「部署一覧」に見せない）。 3列＋2列は base 側で組んでいるため、ここでの列指定は不要 */ /* ------------------------------------------------------------ Section 6 ： 780px 中央 Composition の内部を左右へ組み直す 左＝なぜ社員が判断しにくいのか／右＝では何を会社に残す必要があるのか ★ container は 780px のまま。全幅へ広げない ★ 新しい Visual・コピー・Token は追加しない（Typography と Layout だけ） ★ DOM 順は変更していないため、読み上げ順は Desktop でも従来どおり ------------------------------------------------------------ */ /* ★ 旧公開Top 比較監査 改善2 ： 新3 は本ページの核心 Section だが、 container 780px（1280px 幅でコンテナ幅の62%）に留まり、左右へ各250px の 「Visual 不足によって空いている余白」が生じていた。旧公開Top の各 Section は 1105〜1265px を使い切っていたため、ここで面積差が最も大きく出ていた。 Copy は一切変更せず、container を 780px → 1000px へ広げ、 既存4項目を Visual Cluster として大きく見せる。 */ /* ★ 旧「左＝説明 ／右＝結論」の2カラムは廃止済み。結論は白帯へ全幅で移した。 現在の2カラムは紺帯前半だけで、左＝本文 ／右＝情景写真という別の構成。 ★ 1000px ＝ 左476 ＋ gap48 ＋ 右476。 この Section で以前使っていた値で、新しい Token ではない。 */ #s6 .pp-core { max-width: 1000px; text-align: left; } /* 導入文＋中心H2 ： 左カラムに収めず、Section の入口として全幅中央へ。 下の余白は新2（#s5 の見出し下）と同じ 56px で揃える。 */ #s6 .pp-core-lead { text-align: center; margin-bottom: 56px; } /* 導入＋H2 を外に出したぶん、本文が先頭になる */ #s6 .pp-core-body:first-of-type { margin-top: 0; } #s6 .pp-core-answer > .pp-core-em:first-child { margin-top: 0; } /* 判断材料4件 ： 補助情報として2列。 ★ 改善2 ： 179px 幅・上下10px の小さなチップ列に見えていたため、 余白と間隔だけを広げて「会社に残すべきものの一覧」として塊で見えるようにする。 Copy・件数・font-size は変更していない。 */ #s6 .pp-quiet6 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; gap: 14px; } #s6 .pp-quiet6 li { padding: 18px 16px; } /* 紺帯前半 ： 本文（左）／縦長情景写真（右）の2カラム。 ★ 本文は全行が
の固定改行で、最長行は 351px しかない。 860px カラムに対して 509px が横に余っていたため、そこを写真に使う。 ★ 左カラム 476px でも最長行 351px に 125px の余裕があり、折り返しは増えない。 ＝ 2カラム化しても本文の高さは 595px のまま変わらない。 ★ 写真は 4:5（1600×2000）。476px 幅で高さ 595px となり、本文と完全に揃う。 右カラムに死んだ余白が出ない。 */ /* ★ Content Condensation（2026-08-09）で本文が5段落 → 3段落になり、 本文列の高さが 595px → 378px へ縮んだ。左右を 476px 均等のままにすると 写真だけが 595px 残り、右列の下に 217px の死んだ余白ができる。 写真は差し替えず（4:5 のまま）、右列の幅を 400px に絞って高さを 500px に落とし、 さらに上下中央で揃えて左右の重心を合わせる。 ★ 写真の縮小は「Copy が減ったから」ではなく、この高さ差を解消するための最小調整。 */ #s6 .pp-panel-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: center; } /* ★ 2026-09-03 Production Visual Review Fine-tuning（Phase M8 ／第22.3章 Human Decision） Copy の SHORTEN（第12.6章）で本文が2段落 156px になり、右の情景写真 500px に対して 左カラムの上下に 172px ずつの余白が出ていた（Human が Production で確認）。 ★ Copy は戻さない ／長文化しない ／新しい説明文も作らない。 ★ 白帯に実装済みの「判断の目線」定義は★重複させない。 そこで、紺帯の `.pp-core` 自体を2カラムにし、既存の読み物導線（.pp-read）を 左カラムの2段目へ置く。写真は2行ぶんを占めて上下中央のまま。 ＝ 要素は1つも増やさず、Copy も1文字も変えずに左右の高さを揃える。 ★ Desktop（1025px 以上）限定。Tablet ／Mobile の DOM 順・見え方は変えていない。 ★ 白帯（.pp-band--paper）側の `.pp-core` には適用しない（セレクタで紺帯に限定）。 */ #s6 .pp-band--navy .pp-core { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 48px; align-items: start; } #s6 .pp-band--navy .pp-core-lead { grid-column: 1 / -1; } #s6 .pp-band--navy .pp-panel-grid { display: contents; } #s6 .pp-band--navy .pp-core-body { grid-column: 1; grid-row: 2; } #s6 .pp-band--navy .pp-panel-photo { grid-column: 2; grid-row: 2 / span 2; align-self: center; } #s6 .pp-band--navy .pp-read { grid-column: 1; grid-row: 3; margin: 44px 0 0; max-width: none; } /* ★ Visual Rhythm Refinement（2026-08-09） 左本文を意味の3ブロックとして読ませ、縦のリズムを右写真（500px）へ近づける。 文字サイズは変えず、ブロック間の余白だけ調整する。 ※ 2026-08-09 追記 ： 一度 44 ／64px にしたが空きすぎたため、 それぞれ1行ぶん詰めて 14 ／34px とした。 14px は本文の段落間（12px）に近い「続けて読む」間隔、 34px は「話が変わる」間隔。 */ #s6 .pp-body--gap1 { margin-top: 14px; } #s6 .pp-body--gap2 { margin-top: 34px; } /* Desktop は 4:5 のまま。Base の 16:9 クロップを打ち消す。 元画像も 4:5（1600×2000）のため cover でも切り取りは発生しない （fill ではなく cover にして、万一比率がずれても歪まないようにしている）。 */ #s6 .pp-panel-photo img { aspect-ratio: 4 / 5; object-fit: cover; } /* ★ Visual Rhythm Refinement（2026-08-09） 会社に残す4項目 ： Desktop は横1列（4列）の縦長カードへ。 2×2 だと「4つの並列項目」ではなく2つの塊に見えるため、 4枚を同じ幅・同じ高さで一列に並べて対等に見せる。 アイコンを上、文言を下にした縦組みにして、1枚ずつの縦のゆとりを増やす。 ★ Copy・件数・アイコンは変更していない。 */ /* 併せて、説明文と4項目の距離を 36 → 44px へ。 「何が必要か」と「では何を残すのか」を視覚的に分ける（44px は既存 Spacing Scale）。 */ #s6 .pp-keep4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; } #s6 .pp-keep4 li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 14px; padding: 28px 14px; } /* 結論 ： パネル2の入口として中央 */ #s6 .pp-core-answer { text-align: center; } /* ★ 2026-08-09 ： 「必要なのは、…『土台』をつくること。」と 「社長がどのように考え、…」の間を1行ぶん広げる（22 → 52px）。 前者は結論、後者はその中身なので、いったん受け止める間を置く。 52px は既存 Spacing Scale の値。Tablet ／Mobile は 22px のまま。 */ #s6 .pp-core-em--lg + .pp-core-em { margin-top: 52px; } /* ★ 2026-08-14 ： 思想コピーは Desktop でも1つのまとまりとして読ませる。 ★ 文字サイズは終端「そのための仕組みが、Business OS です。」と同じ 22px に揃える。 1行目と2〜3行目の間は2行分（77px）、2〜3行目と終端の間は1行分（38px）あける。 */ #s6 .pp-core-why { margin-top: 95px; } #s6 .pp-core-why .pp-core-em, #s6 .pp-core-why .pp-core-em.pp-core-em--lg { font-size: 22px; line-height: 1.75; } #s6 .pp-core-why .pp-core-em--lg + .pp-core-em { margin-top: 38px; } /* Section 終端 ： Section 全体の結論として中央 ★ 2026-08-14 ： 直前が思想コピーになったため、区切り線と 36px の内側余白は外し、 「1行あける」だけで終端へつなぐ。 */ #s6 .pp-core-end { margin-top: 38px; padding-top: 0; border-top: 0; text-align: center; } /* ★ 2026-08-14 ： 終端が1文のみになったため、内側の上余白は持たせない （思想コピーとの間隔は上の 38px ＝1行分で管理する）。 */ #s6 .pp-core-end > .pp-core-end-b:first-child { margin-top: 0; } /* Section 11 ： 旧 #s10 の CTA 配置を新 #s11 へ移す */ /* ★ 写真を足したため上端揃えへ。center のままだと写真ぶんが下に押し出され、 左カラム（見出し〜CTA）と上端が揃わなくなる。 */ #s11 .s10-right { align-content: start; } /* ★ 2026-08-09 ： H2 →「無料AI体験では、〜」の間を1行ぶん広げる（14 → 44px）。 2本目以降の lead は 14px のまま（同じ説明の続きなので詰めて読ませる）。 */ #s11 .pp-cta-left .lead:first-of-type { margin-top: 44px; } #s11 .s10-notes { max-width: 470px; } } /* ============================================================ Tablet（1024px 以下） ============================================================ */ @media (max-width: 1024px) { .pp-sec, #s2.pp-sec, #s5.pp-sec, #s6.pp-sec, #s7.pp-sec, #s8.pp-sec, #s9.pp-sec, #s11.pp-sec { padding: 52px 0; } #s10.pp-sec { padding: 46px 0; } /* 新8 ： Visual 強度2。Tablet でも一段静かに保つ */ #s7.pp-sec .h2, #s11.pp-sec .h2 { font-size: 25px; } /* Tablet 以下は Human Gate のとおり H2 25px を維持する（Desktop の32px は適用しない） */ .pp-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pp-ww-h { font-size: 16px; } #s3.pp-sec .pp-ww-core { font-size: 27px; } .pp-core-h { font-size: 30px; } .pp-elem5 { grid-template-columns: repeat(3, minmax(0,1fr)); } /* ------------------------------------------------------------ 新4 Transformation Visual ： Tablet 以下は縦 Flow へ切り替える。 横5要素（起点・01・02・03・終点）を無理に維持すると、説明文の列幅が 足りず文字だけが縮む形になるため。既存 Breakpoint 方針に合わせる。 順序は FROM → 01 → 02 → 03 → TO のまま。情報は落ちない。 ------------------------------------------------------------ */ .pp-tf { padding: 28px 24px; } .pp-tf-row { grid-template-columns: minmax(0,1fr); } .pp-tf-node--from, .pp-tf-node--to { width: auto; } .pp-tf-steps { grid-template-columns: minmax(0,1fr); gap: 0; padding: 0; } /* Flow 線も縦へ。丸番号の中心（左から19px）を通す */ .pp-tf-steps::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue-line), var(--blue) 50%, var(--blue-line)); } .pp-tf-step { grid-template-columns: 38px minmax(0,1fr); column-gap: 16px; row-gap: 4px; align-items: start; padding: 18px 0; } .pp-tf-step-n { margin: 0; grid-row: span 2; } .pp-tf-step-t { text-align: left; } /* 矢頭は既存 .pp-dir-arrow と同じく90度回転させて下向きにする */ .pp-tf-tip { width: auto; height: 26px; transform: rotate(90deg); } /* ------------------------------------------------------------ 新6 Cycle Visual ： Tablet 以下は横5列を維持せず縦 Flow へ切り替える。 順序は 01 → 02 → 03 → 04 → 05 → 06 のまま。 戻りは Loop 領域の左側に確保したゾーンを上がって 02 へ入る。 ★ 01 は Loop 面の外・Return line の外のまま。 ------------------------------------------------------------ */ .pp-cyc { padding: 24px 20px; } .pp-cyc-row { grid-template-columns: minmax(0,1fr); } .pp-cyc-entry { width: auto; } /* 入口線を下向きに */ .pp-cyc-in { width: auto; height: 34px; justify-self: center; } .pp-cyc-in::before { left: 50%; right: auto; top: 0; bottom: 8px; width: 1px; height: auto; } .pp-cyc-in svg { margin-left: 0; margin-top: 20px; transform: rotate(90deg); } /* 左に戻り線用のゾーンを確保した1列 */ .pp-cyc-loop { padding: 18px 18px 18px 54px; } .pp-cyc-steps { grid-template-columns: minmax(0,1fr); gap: 18px; } .pp-cyc-chev { left: 0; right: auto; top: auto; bottom: -13px; transform: rotate(135deg); } /* 戻り ： 左側を縦に回って 02 へ入る */ .pp-cyc-return { left: 20px; right: auto; width: 22px; top: 14px; bottom: 14px; height: auto; border-right: 0; border-top: 2px solid var(--orange); border-radius: 12px 0 0 12px; } .pp-cyc-rtip { left: auto; right: -9px; top: -1px; transform: translateY(-50%) rotate(90deg); } .pp-flow4 { grid-template-columns: minmax(0,1fr); gap: 10px 0; } .pp-flow4-arrow { transform: rotate(90deg); height: 22px; } .pp-deliv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 14px; } .pp-deliv-item::after { display: none; } .pp-fs-fig { grid-template-columns: 150px minmax(0,1fr); column-gap: 20px; align-items: start; } .pp-fs-photo { width: 150px; } /* 図解が本文幅いっぱいに間延びすると、Role が横長の帯になり 「ひとつの Cluster」に見えなくなるため、Desktop と近い比率で中央に置く */ .pp-ground { max-width: 520px; margin-left: auto; margin-right: auto; } /* ★ 2026-08-09 ： 新9（最終CTA）が1カラムになる幅では、読み順を次のとおりにする。 見出し ↓ 右カラムの内容（情景写真 ／無料・有料の対比 ／注記） ↓ 本文「無料AI体験では、〜」→ 所要時間などの3項目 → CTAボタン 「何をする時間か」を写真と対比で先に見せてから説明に入るため。 ★ DOM 順は変えていない（order による並べ替えのみ）。Desktop の2カラムは無変更。 ★ Copy ／CTA 文言 ／リンク先は変更していない。 */ #s11 .pp-cta-grid { row-gap: 0; } #s11 .pp-cta-left { display: contents; } #s11 .pp-cta-left > .h2 { order: 1; } #s11 .s10-right { order: 2; margin-top: 26px; } #s11 .pp-cta-left > .lead { order: 3; } /* ★ 2026-08-09 ： 右カラム（注記の最終行）と本文「無料AI体験では、〜」が近く、 注記の続きに見えるため、もう1行ぶん空ける。30 → 56px（既存 Spacing Scale）。 */ #s11 .pp-cta-left > .lead:first-of-type { margin-top: 56px; } #s11 .pp-cta-left > .pp-facts { order: 4; } #s11 .pp-cta-left > .s10-cta-wrap { order: 5; } /* ★ 2026-09-03 ： 締めは Mobile でも CTA の直後に置く（第23.8章）。 */ #s11 .pp-cta-left > .s11-closing { order: 6; } } /* ============================================================ Narrow Tablet（900px 以下） ★ master-design.css と同じ考え方で、横並びを無理に維持せず Mobile と同じ安全な構成へ切り替える（768px 前後で急変させない）。 ============================================================ */ @media (max-width: 900px) { .pp-cards3 { grid-template-columns: minmax(0,1fr); gap: 12px; } .pp-cards4 { grid-template-columns: minmax(0,1fr); gap: 12px; } .pp-elem5 { grid-template-columns: minmax(0,1fr); gap: 10px; } .pp-role-cols { grid-template-columns: minmax(0,1fr); gap: 12px; } .pp-promise { grid-template-columns: minmax(0,1fr); gap: 14px; } .pp-quiet6 { grid-template-columns: repeat(2, minmax(0,1fr)); } /* 循環 ： 縦6段＋段間の縦線。円形にしない */ .pp-cycle-steps { grid-template-columns: minmax(0,1fr); gap: 12px; } .pp-cycle-step::after { display: none; } .pp-cycle-step:not(:last-child)::before { content: ""; position: absolute; left: 50%; bottom: -12px; width: 1px; height: 12px; background: var(--blue-line); } } /* ============================================================ Mobile（767px 以下） ★ Desktop 図を縮小しない。横スクロールを使わない。順序を失わない。 ============================================================ */ @media (max-width: 767px) { .pp-sec, #s2.pp-sec, #s3.pp-sec, #s4.pp-sec, #s5.pp-sec, #s6.pp-sec, #s7.pp-sec, #s8.pp-sec, #s9.pp-sec, #s10.pp-sec, #s11.pp-sec { padding: 44px 0; } #s7.pp-sec .h2, #s11.pp-sec .h2 { font-size: 21px; } #s11.pp-sec .lead { font-size: 15px; } /* Section 3 ： 見出し → 中心メッセージ → 本文全文 → 図解 → 終端 の縦積み */ .pp-ww-head { max-width: none; } .pp-ww-h { font-size: 15px; } #s3.pp-sec .pp-ww-core { font-size: 24px; } .pp-ww-main { margin-top: 24px; row-gap: 22px; } .pp-ground-base { padding: 15px 16px; } .pp-ground-base-t { font-size: 15px; } .pp-ground-terms { gap: 6px; } .pp-ground-term { font-size: 11.5px; padding: 5px 10px; } .pp-ground-link { height: 15px; } .pp-ground-cluster { padding: 12px; } /* Mobile は3列＋2列にしない。320px で「情報システム」が折り返すため、 安全側の2列＋2列＋中央1件を維持する（Desktop ほど単独配置が目立たない） */ .pp-ground-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .pp-ground-role { grid-column: auto; font-size: 12px; padding: 8px 8px; } .pp-ground-role:nth-child(4) { grid-column: auto; } .pp-ground-role:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc((100% - 7px) / 2); } .pp-ww-end { text-align: left; } .pp-ww-end p { font-size: 14px; } .pp-label { font-size: 10.5px; } .pp-head { max-width: none; } /* ★ Hero Supporting Copy Refinement（2026-08-09） Mobile では固定改行を外して自然に折り返させ、 最終行が「グラムです。」だけにならないよう行長を揃える。 `text-wrap: balance` は `.pp-deliv-name` ／`.pp-deliv-desc` で既に使っている手法。 */ .pp-br-wide { display: none; } .pp-br-sp { display: inline; } /* ★ 2026-08-14 ： 白帯入口の結論（だから、〜）は、17px のままだと最終行に2文字だけ残るため 16px にして「それを「会社に残すこと」が必要なのです。」を1行に収める。 */ #s6 .pp-core-answer .pp-core-em.pp-core-em--lg { font-size: 16px; } /* ★ 2026-08-14 ： 思想コピーは Mobile でも終端と同じ 18px に揃える。 2〜3行目は固定改行を外して自然に折り返させる（細かく分断させない）。 行あけは Desktop と同じ考え方で、2行分（63px）／1行分（31px）。 */ #s6 .pp-core-why .pp-core-em, #s6 .pp-core-why .pp-core-em.pp-core-em--lg { font-size: 18px; line-height: 1.75; } #s6 .pp-core-why .pp-core-em { text-wrap: balance; } #s6 .pp-core-why { margin-top: 72px; } #s6 .pp-core-why .pp-core-em--lg + .pp-core-em { margin-top: 31px; } #s6 .pp-core-end { margin-top: 31px; padding-top: 0; border-top: 0; } #s6 .pp-core-end > .pp-core-end-b:first-child { margin-top: 0; } /* ★ 2026-08-14 ： H1 2行目が14文字になったため、Mobile も 27px では本文幅 335px を超える。 */ .hero-h1 { font-size: 23px; } .pp-hero-uni-b { text-wrap: balance; } /* ★ 2026-08-14 ： S8 の H2 を「会社で使える形」→「社員が使える形」に変えた分、 2行目が 335px の本文幅を 1文字分だけ超えて「す。」が3行目へ落ちるため、 21px → 20px にする（#s7 .h2 と同じ Mobile 値）。 */ #s8 .h2 { font-size: 20px; } /* ※ 以下2件は Top からは使わなくなった宣言。lp/business-os.html が旧構造で参照しているため、 Screenshot Human Gate 5.2 ＝ C 当時の値のまま残している。 */ .pp-hero-unique { font-size: 12.5px; } .pp-hero-body { font-size: 15px; } .pp-fs-fig { grid-template-columns: minmax(0,1fr); row-gap: 16px; justify-items: stretch; } /* ★ 2026-08-09 ： Mobile の代表者写真が 132px しかなく、 縦積みの1列レイアウトの中で切手のように小さく見えていたため、カラム幅いっぱいへ。 他Section の写真（S3 ／S9）も Mobile では全幅で置いており、扱いを揃えている。 */ .pp-fs-photo { width: 100%; } /* ★ 2026-08-09 ： 320px では経歴1行目が「…評価・検証に」＋「従事」と 2文字だけ孤立するため、行長を揃える。 `text-wrap: balance` は `.pp-deliv-name` ／`.pp-hero-uni-b` で既に使っている手法。 ★ `.pp-fs-id ~` で Top 限定にしている（lp/business-os.html は `.pp-fs-id` を持たない）。 */ .pp-fs-id ~ .pp-tl p { text-wrap: balance; } /* Mobile は既存の 14.5px ／左揃えを維持。PC で広げた上の間隔だけ Mobile 用に詰め直す。 */ .pp-turnline { margin-top: 36px; font-size: 14.5px; text-align: left; } .pp-emline { font-size: 14px; text-align: left; } /* 縦積みで行長が痩せるため、補足文の左インデントは戻す（チェックは見出しのみに掛ける）。 */ .pp-checkcard .card-bd { padding-left: 18px; } /* Content Condensation（2026-08-09）： 4項目の縦一覧を Mobile 用に詰める。 文字は縮小せず（.card-hd 16px のまま）、上下の余白だけ落とす。 */ /* 新2 の1枚カード ： 文字サイズは Desktop と同じ16pxのまま、左右と行の余白だけ詰める */ .pp-symptoms .card-bd { padding: 4px 18px; } .pp-symptoms .ck { padding: 15px 0; gap: 12px; align-items: start; } .pp-symptoms .ck svg { margin-top: 5px; } /* 意味の区切りの間合いも Mobile 用に一段詰める */ .pp-body--gap1 { margin-top: 24px; } .pp-body--gap2 { margin-top: 34px; } /* 白帯の入口 ： Mobile の .pp-core-em（14.5px）に対して一段だけ上に置く */ .pp-core-em.pp-core-em--lg { font-size: 17px; line-height: 1.75; } /* 新8 の見出し ： Mobile は 18px（既存 Scale ／Mobile の .pp-core-end と同値）。 Mobile H2（21px）よりは小さく保ち、静かな Section という性格を維持する。 */ .pp-lead--lg { font-size: 18px; line-height: 1.6; } #s10 .pp-head .pp-lead--lg + .lead { margin-top: 18px; } #s10 .pp-promise { margin-top: 32px; } /* PC で広げた見出し下の間隔も Mobile 用に詰め直す（.pp-turnline の 36px と対で揃える）。 */ #s5.pp-sec .pp-head { margin-bottom: 36px; } .pp-flow4-step { text-align: left; } .pp-flow4-ico { margin: 0 0 4px; } /* カードが左揃えになる幅では、小 Visual も左端へ寄せる （中央のままだと Visual だけが宙に浮いて、説明文と結びつかない） */ .pp-flow4-mini { justify-items: start; } .pp-flow4-mini--talk { justify-content: flex-start; } .pp-scatter { justify-content: flex-start; } .pp-core { text-align: left; } /* Mobile は1列へ戻す（2列だと1枚が約150px幅になり文言が2〜3行に割れるため） */ .pp-keep4 { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 30px; } .pp-keep4 li { padding: 14px 14px; font-size: 13.5px; } .pp-core-h { font-size: 25px; } .pp-core-em { font-size: 14.5px; } /* PC の 22px のままだと Mobile の中心H2（25px）や通常H2（21px）に迫ってしまうため、 本文（15px）より上・H2 より下に収まる 18px へ落とす。 */ .pp-core-end-a, .pp-core-end-b { font-size: 18px; } .pp-core-end-b { margin-top: 22px; } .pp-quiet6 { grid-template-columns: minmax(0,1fr); gap: 8px; } .pp-quiet6 li { padding: 9px 12px; } /* 新6 Cycle Visual ： 縦 Flow は Tablet で確定済み。Mobile は余白だけ詰める。 ★ 文字は縮小しない。左の戻り線ゾーンは 48px 確保して横スクロールを出さない。 */ .pp-cyc { padding: 20px 16px; } .pp-cyc-loop { padding: 16px 14px 16px 48px; } /* 新4 Transformation Visual ： 縦 Flow は Tablet で確定済み。Mobile は余白だけ詰める。 ★ 文字は縮小しない（font-size は Base のまま）。横スクロールも発生させない。 */ .pp-tf { padding: 22px 18px; } .pp-tf-step { column-gap: 12px; padding: 16px 0; } /* ★ Mobile は縦積みのため、図パネルを幅いっぱいに広げる（Desktop の fit-content を解除） */ .pp-dir { flex-direction: column; align-items: stretch; width: auto; padding: 22px 18px; } .pp-dir-node { text-align: center; } .pp-dir-arrow { transform: rotate(90deg); } .pp-deliv { padding: 20px 16px; } .pp-deliv-grid { grid-template-columns: minmax(0,1fr); gap: 18px; } .pp-deliv-item { text-align: left; padding-top: 18px; } .pp-deliv-item::before { left: 20px; } .pp-deliv-fig { justify-items: start; height: 56px; } .pp-deliv-stem::before { left: 20px; } .pp-deliv-origin, .pp-deliv-core { text-align: left; } .pp-cycle-cue { align-items: flex-start; } .pp-facts { flex-direction: column; } .pp-facts li { min-width: 0; } .pp-line2-row { grid-template-columns: minmax(0,1fr); row-gap: 4px; } .s10-cta { width: 100%; } } /* ============================================================ 新3（#s6）の帯分割 ★ Section 内を「紺の帯（問題）」「白の帯（必要なもの）」の2本に分ける。 箱で囲わず、面の切り替えでパーツを分ける。 ★ Section 自身の上下 padding を 0 にし、各帯が padding を持つ。 こうしないと白帯の下に紺の余白が残る。 ★ 本ブロックはファイル末尾に置いている。上の Media Query 群にも `#s6.pp-sec` の padding 指定があり、詳細度が同じ（110）ため、 ソース順で最後に来る必要がある。 ============================================================ */ #s6.pp-sec { padding: 0; } #s6 .pp-band { padding: 72px 0; } #s6 .pp-band--paper { background: var(--paper); } /* 白帯の中身は白地用の Token へ差し替える（新しい色は作っていない） */ #s6 .pp-band--paper .pp-core-em { color: var(--blue-ink); } #s6 .pp-band--paper .pp-core-end { border-top-color: var(--line); color: var(--blue-ink); } @media (min-width: 1025px) { #s6 .pp-band { padding: 88px 0; } /* Desktop の強度5（88px）に合わせる */ } @media (max-width: 1024px) { #s6 .pp-band { padding: 52px 0; } } @media (max-width: 767px) { #s6 .pp-band { padding: 44px 0; } } /* ★ 2026-08-14 ： Hero の問いかけは Desktop ／Mobile とも 「社長の頭の中にある判断、／社員にも伝わる言葉にしませんか？」の2行で読ませる。 360px 以下では 18px のままだと2行目（16文字＝288px）が本文幅 280px を超え、 「か？」だけが3行目へ落ちるため、17px にする。17px は既存 Scale の値。 */ @media (max-width: 360px) { .pp-hero-uni-h { font-size: 17px; } /* ★ 2026-08-14 ： 360px 以下（本文幅 280px）でも H1 を2行に保つ。 */ .hero-h1 { font-size: 19px; } } /* ============================================================ Content Condensation（2026-08-09）の余白調整 ★ Copy を削った結果として崩れた箇所だけを直す最小調整。 Design Token ／Typography Token は変更していない。 ★ 上の Media Query 群および #s6 帯ブロックと詳細度が並ぶため、 ソース順で最後に来る必要がある。 ============================================================ */ /* ※ 新2 の幅指定は `.pp-symptoms { max-width: 860px }` へ移した（1枚カード化に伴う整理）。 */ /* ★ 2026-08-09 ： 下矢印を削除したため、`.pp-core-end` の区切り線を外していた指定も撤回した （線を外したのは「矢印が線にぶつかる」ためであり、矢印がなくなれば理由がない）。 4項目 → 区切り線 → Business OS 宣言 という元の Rhythm へ戻している。 */ /* 新4 ： AI／経営者本人の2カードと締めの1文が 12px しか離れず、カードの続きに見えるため広げる。 ※ 2026-08-09 追記 ： さらに1行ぶん広げて 24 → 52px。 */ #s7 .pp-role--center .pp-body { margin-top: 52px; } /* ★ 2026-08-09 ： 新3 白帯の区切り線を外す。 4項目 → Business OS 宣言 の切れ目は余白（44 ＋ 36 ＝ 80px）だけで示す。 ★ 余白は変えていないので、カードと下の文字の距離は今までどおり。 ★ .pp-core-end は business-os.html も使う（あちらは

）。Top は

なので 要素修飾で Top 側だけに限定し、business-os.html の線は残す。 */ #s6 div.pp-core-end { border-top: 0; } /* MENU「見えていない」の Brand Orange 強調（2026-08-20 追加）。 このページは共通の button-hover.css を読み込まないため、ここで同じ定義を持つ。 */ .menu-onaji-em { color: #fb923c; white-space: nowrap; } /* Footer「見えていない」の Brand Orange 強調（2026-08-20 追加）。 このページは共通の button-hover.css を読み込まないため、ここで同じ定義を持つ。 */ .footer-onaji-em { color: #fb923c; white-space: nowrap; }