/* ============================================================ humbulls V3 — プロジェクト型支援 下層ページ 共通コンポーネント トークンは v3-core.css の :root が正本。ここでは値を再定義しない。 タイプスケール（HANDOFF §2 準拠・0.5px 刻み禁止）: ラベル 11/12 / UI 14 / 本文 15,16 / パネル見出し 17 / H3 20 H2 clamp(27px,3.6vw,40px) / H1 clamp(30px,4.9vw,58px) w900 lh1.32 ============================================================ */ /* ---------- page hero ---------- */ .page-hero { padding: 92px 0 56px; border-bottom: 1px solid var(--line); } .page-hero .container { max-width: 980px; } .crumb { font-size: 12px; color: var(--ink-3); margin: 0 0 22px; letter-spacing: .02em; } .crumb a { color: var(--ink-3); text-decoration: none; } .crumb a:hover { color: var(--ink); text-decoration: underline; } .crumb span { margin: 0 7px; opacity: .5; } .page-hero-title { font-size: clamp(30px, 4.9vw, 58px); font-weight: 900; line-height: 1.32; letter-spacing: .01em; margin: 0 0 24px; font-feature-settings: "palt" 1; } .page-hero-lead { font-size: 17px; line-height: 1.95; color: var(--ink-2); max-width: 46em; margin: 0 0 34px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ラベルが長くてもページ幅を割らないための保険（原稿の記法ゆれ対策） */ .hero-actions > a { max-width: 100%; overflow-wrap: anywhere; text-align: center; } /* ---------- ページ内ナビ ---------- */ .page-nav { border-bottom: 1px solid var(--line); background: var(--surface); } .page-nav .container { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 15px; padding-bottom: 15px; } .page-nav a { font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 6px 15px; background: var(--paper); transition: all .18s var(--ease); } .page-nav a:hover { color: var(--ink); border-color: var(--ink); } /* ---------- section 共通 ---------- */ .section { padding: 78px 0; border-top: 1px solid var(--line); } .section--surface { background: var(--surface); } .sec-h { font-size: clamp(27px, 3.6vw, 40px); font-weight: 900; line-height: 1.42; letter-spacing: .01em; margin: 0 0 22px; font-feature-settings: "palt" 1; } /* 375px で見出し最終行が1〜2文字孤立するのを緩和（07-29 レスポンシブレビュー） */ .page-hero-title, .sec-h, .feat-t, .fw-item-t { text-wrap: balance; } .sec-intro { font-size: 16px; line-height: 1.95; color: var(--ink-2); max-width: 44em; margin: 0 0 34px; } .section .container { max-width: 980px; } /* ---------- 本文の地の文 ---------- */ .prose p { font-size: 15.5px; line-height: 1.95; color: var(--ink-2); margin: 0 0 1.15em; } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--ink); text-underline-offset: 3px; } .prose .btn-pill--fill, .prose .hero-actions .btn-pill--fill { color: #fff; } .prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.4em; } .prose li { font-size: 15.5px; line-height: 1.9; color: var(--ink-2); margin: .32em 0; } .prose > :last-child { margin-bottom: 0; } /* 審査要件表型（#### A1. 項目名｜説明）の項目見出し */ .prose h4 { font-size: 17px; font-weight: 800; line-height: 1.65; color: var(--ink); margin: 1.9em 0 .6em; padding-top: .9em; border-top: 1px solid var(--line); letter-spacing: .01em; } .prose h4:first-child { margin-top: 0; padding-top: 0; border-top: none; } .prose h3 { font-size: 20px; font-weight: 800; line-height: 1.55; margin: 1.8em 0 .7em; } /* ---------- 課題リスト ---------- */ .pain-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .pain-list li { font-size: 16px; line-height: 1.85; color: var(--ink); margin: 0; padding: 19px 0 19px 34px; border-bottom: 1px solid var(--line); position: relative; } .pain-list li::before { content: ""; position: absolute; left: 4px; top: 33px; width: 15px; height: 1px; background: var(--ink-3); } /* ---------- 特徴 ---------- */ .feat { border-top: 1px solid var(--line); } .feat-item { padding: 34px 0; border-bottom: 1px solid var(--line); display: grid; gap: 20px; } .feat-num { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: lining-nums; } .feat-t { font-size: 20px; font-weight: 800; line-height: 1.55; margin: 6px 0 14px; letter-spacing: .01em; } @media (min-width: 820px) { .feat-item { grid-template-columns: 108px 1fr; gap: 30px; } .feat-num { padding-top: 6px; } .feat-t { margin-top: 0; } } /* ---------- ★フレームワーク ---------- */ .fw-table-wrap { overflow-x: auto; margin: 0 0 42px; border: 1px solid var(--line); border-radius: var(--radius-md); } .fw-item { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 30px 32px; margin: 0 0 16px; background: var(--paper); } .fw-item-t { font-size: 20px; font-weight: 800; line-height: 1.55; margin: 0 0 22px; letter-spacing: .01em; } .tri { display: grid; gap: 14px; } .tri-row { display: grid; gap: 5px; } /* グリッドアイテムの min-width:auto 既定を殺す — .tri 内に .tbl-box を置くと表の min-width が親ごと膨らみ 375px で横スクロールするため */ .tri-row, .tri-row > div { min-width: 0; } .tri-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-3); } .tri-row p { font-size: 15.5px; line-height: 1.9; color: var(--ink-2); margin: 0; } .tri-row--do { border-left: 2px solid var(--ink); padding-left: 15px; } .tri-row--do .tri-label { color: var(--ink); } .tri-row--do p { color: var(--ink); } @media (min-width: 820px) { .tri-row { grid-template-columns: 132px 1fr; gap: 20px; align-items: baseline; } .tri-row--do { padding-left: 17px; } } /* ---------- 進め方 ---------- */ .steps { counter-reset: st; border-top: 1px solid var(--line); } .step { padding: 32px 0; border-bottom: 1px solid var(--line); display: grid; gap: 16px; } .step-n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: lining-nums; } .step-t { font-size: 19px; font-weight: 800; line-height: 1.55; margin: 4px 0 12px; } .step-meta { display: grid; gap: 7px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--line); } .step-meta div { font-size: 13.5px; color: var(--ink-3); line-height: 1.75; } .step-meta b { color: var(--ink-2); font-weight: 700; margin-right: 9px; } @media (min-width: 820px) { .step { grid-template-columns: 108px 1fr; gap: 30px; } .step-n { padding-top: 5px; } .step-t { margin-top: 0; } } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); padding: 26px 0; } .faq-q { font-size: 17px; font-weight: 800; line-height: 1.7; margin: 0 0 13px; padding-left: 30px; position: relative; letter-spacing: .01em; } .faq-q::before { content: "Q"; position: absolute; left: 0; top: 0; font-size: 15px; font-weight: 800; color: var(--ink-3); } .faq-a { padding-left: 30px; } .faq-a p { font-size: 15.5px; line-height: 1.92; color: var(--ink-2); margin: 0 0 .9em; } .faq-a > :last-child { margin-bottom: 0; } /* ---------- 価格 ---------- */ .price-box { border: 1px solid var(--line-strong); border-radius: var(--radius-card); padding: 30px 32px; margin: 34px 0 0; background: var(--surface); } .price-box .price-v { font-size: 32px; font-weight: 900; line-height: 1.3; margin: 0 0 10px; letter-spacing: .01em; } .price-box .price-v small { font-size: 15px; font-weight: 700; color: var(--ink-2); margin-left: 4px; } /* ---------- 中間CTA ---------- */ .mid-cta { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: 52px 0; } .mid-cta .container { max-width: 980px; } .mid-cta-t { font-size: 22px; font-weight: 800; line-height: 1.6; margin: 0 0 14px; letter-spacing: .01em; } .mid-cta p { font-size: 15.5px; line-height: 1.9; color: var(--ink-2); margin: 0 0 24px; max-width: 42em; } .mid-cta-actions { margin-top: 24px; } /* ---------- セクション内の補足ブロック（価格・完了後の道など）---------- */ .sec-aside { margin-top: 38px; } .faq-group-t { margin-top: 44px; } /* ---------- コード表記（長いファイルパスがはみ出すのを防ぐ）---------- */ code, .prose code, .faq-a code, .tri-row code { background: var(--surface); border-radius: 4px; padding: 2px 6px; font-size: .88em; overflow-wrap: anywhere; word-break: break-word; } pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } pre code { background: none; padding: 0; overflow-wrap: normal; word-break: normal; } /* ---------- 表 ---------- 狭い画面ではセルが縦に伸びて読めなくなるので、表に列数ぶんの min-width を持たせ （build-site.py の TBL_MIN）、ラッパを横スクロールさせる。 スクロールできることが分かるよう、右端にフェードと「横スクロールできます」を出す。 */ .section table, .doc table, .tbl { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0; background: var(--paper); } .section th, .section td, .doc th, .doc td { border: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; line-height: 1.75; } .section th, .doc th { background: var(--surface); font-weight: 700; font-size: 13px; white-space: nowrap; color: var(--ink); } .section td, .doc td { color: var(--ink-2); } .tbl-box { position: relative; margin: 0 0 1.6em; } .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); scrollbar-width: thin; } /* 列数ごとの最小幅。ここが表の折り返し具合を決める唯一の場所。 狭い画面ではこの幅までは縮まずに横スクロールへ逃げる。 本文幅（980px）を下回る値なのでデスクトップの見た目は変わらない。 */ .tbl-box[data-cols="2"] table { min-width: 460px; } .tbl-box[data-cols="3"] table { min-width: 600px; } .tbl-box[data-cols="4"] table { min-width: 704px; } .fw-item .tbl-box[data-cols="4"] table { min-width: 640px; } /* カード内はコンテナが狭い（768px時662px）ため */ .tbl-box[data-cols="5"] table { min-width: 840px; } .tbl-box[data-cols="6"] table { min-width: 940px; } .tbl-box[data-cols="7"] table { min-width: 1040px; } /* スクロールできる余地がある側にフェードを出す。端まで送ったら消える */ .tbl-box.is-scrollable::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 44px; pointer-events: none; opacity: 1; transition: opacity .2s var(--ease); background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .97)); } .tbl-box.is-scrollable.at-end::after { opacity: 0; } .section--surface .tbl-box.is-scrollable::after { background: linear-gradient(to right, rgba(245, 245, 244, 0), rgba(245, 245, 244, .97)); } .tbl-box.is-scrollable > .tbl-wrap::before { content: none; } .tbl-box.is-scrollable { padding-top: 22px; } .tbl-box.is-scrollable > .tbl-wrap { position: static; } .tbl-box.is-scrollable::before { content: "横スクロールできます →"; position: absolute; top: 0; left: 0; font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .04em; transition: opacity .2s var(--ease); } .tbl-box.is-scrollable.at-end::before { opacity: 0; } /* ---------- 図版（帳票・設計図の実物）---------- */ .fig { margin: 26px 0; } .fig-zoom { display: block; position: relative; text-decoration: none; } .fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); } .fig-hint { position: absolute; right: 10px; bottom: 10px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: rgba(255, 255, 255, .93); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 5px 12px; backdrop-filter: saturate(180%) blur(8px); } .fig-zoom:hover .fig-hint { border-color: var(--ink); } .fig figcaption { font-size: 12.5px; color: var(--ink-3); line-height: 1.75; margin-top: 10px; padding-left: 13px; border-left: 2px solid var(--line-strong); } /* 細かい帳票は縮小すると読めない。狭い画面では「原寸で開く」導線を目立たせる */ @media (max-width: 700px) { .fig-hint { position: static; display: block; text-align: center; margin-top: 10px; padding: 10px 14px; font-size: 13px; background: var(--paper); border-color: var(--line-strong); backdrop-filter: none; } .fig-hint::after { content: "（縮小して表示しています）"; font-weight: 400; color: var(--ink-3); margin-left: 6px; font-size: 11.5px; } } /* ---------- 図版プレースホルダ（PNG 未作成のもの）---------- */ .figph { border: 1px dashed var(--line-strong); border-radius: var(--radius-md); padding: 26px 22px; margin: 20px 0; background: var(--surface); font-size: 13.5px; color: var(--ink-3); line-height: 1.8; } .figph::before { content: "図版"; display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--line-strong); margin-bottom: 7px; } /* ---------- 資料ページ（検証レポート・索引・ヒアリングシート・引き継ぎ）---------- Markdown をそのまま読ませる用途。ページ側に