/* ============================================================ simple.css — かんたんモード（手順書ライブラリ）目的は「めっちゃ楽して、前の手順書から80点を出す」。最短経路は検索 → 行を押す → つくるの3タップで、その途中に必須入力を置かない。見た目は設計案のプロトタイプに合わせてある。トークンは styles.css（Steel）のものを借りず、ここで --sx-* として独立に持つ： - 借りると Steel 側の変更で意図せず崩れる／逆にこちらの都合で共有ファイルを触ることになる（CLAUDE.md の「共有ファイルは数行だけ」に反する）。 - **:root に置くこと。** 引き出し（#sxDrawer）は直下で #screen-simple の外にあるので、#screen-simple に定義すると引き出しの中で未定義になる。実際それで `--sx-doc` が効かず、帳票プレビューが明朝になっていなかった。 styles.css 側のトークン名（--accent 等）と衝突させないため、全部 --sx- 接頭辞。 ============================================================ */ :root { /* 地・文字・罫。地色は緑みを寄せた寒色グレー（純グレーは「選んでいない色」に見える） */ --sx-paper: #f1f4f3; --sx-surface: #ffffff; --sx-surface-2: #f7f9f8; --sx-ink: #131819; --sx-ink-2: #4c565c; --sx-ink-3: #7a858b; --sx-line: #dde3e2; --sx-line-strong: #c3ccca; /* アクセントは Steel の土木ブルーと同値。詳細モードと地続きであることに意味がある */ --sx-accent: #2f5d8a; --sx-accent-deep: #1c3f63; --sx-accent-tint: #e7eff6; --sx-on-accent: #ffffff; /* リスクレベルは「意味の色」。アクセントとは別系統に保つ（重要と危険を混ぜない） */ --sx-lv-a: #a92218; --sx-lv-a-bg: #fbe9e7; --sx-lv-b: #a66200; --sx-lv-b-bg: #fbf0df; --sx-lv-c: #6f6210; --sx-lv-c-bg: #f6f1da; --sx-lv-d: #1f6349; --sx-lv-d-bg: #e4f0ea; /* 画面はゴシック、帳票プレビューだけ明朝。提出物は明朝で刷られるので、プレビューが提出物に寄っているほど「これで出していいか」の判断が速い。 Webフォントは読み込まない（現場の社内ネットワークでCDNが遮断されても崩れない） */ --sx-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif; --sx-doc: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; --sx-num: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sx-r-sm: 7px; --sx-r: 10px; --sx-r-lg: 14px; --sx-shadow: 0 1px 2px rgba(16, 24, 28, .05), 0 8px 28px rgba(16, 24, 28, .07); --sx-shadow-lg: 0 24px 70px rgba(16, 24, 28, .22); } body { background: var(--sx-paper); } /* ============================================================ アプリバー — 浮いた丸パイプではなく、地に付いた1本の帯にする。 styles.css を書き換えず、後から読み込むこちらで上書きする。 ============================================================ */ header.app-bar { position: fixed; top: 0; left: 0; right: 0; transform: none; width: auto; max-width: none; padding: 12px 20px; gap: 14px; border: 0; border-bottom: 1px solid var(--sx-line); border-radius: 0; background: var(--sx-surface); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; font-family: var(--sx-font); } .app-bar .brand { align-items: center; gap: 10px; } /* ✦ を塗りの角丸四角に。文字だけだと帯の中で沈む */ .app-bar .brand-mark.sm { width: 26px; height: 26px; border-radius: var(--sx-r-sm); display: grid; place-items: center; transform: none; background: var(--sx-accent); color: var(--sx-on-accent); font-size: 14px; font-weight: 700; flex: none; } .app-bar .brand-word.sm { font-family: var(--sx-font); font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--sx-ink); } .app-bar .brand-word .dot { color: var(--sx-accent); } .app-bar .sub { font-size: 12px; color: var(--sx-ink-3); font-weight: 400; letter-spacing: .02em; text-transform: none; border-left: 1px solid var(--sx-line); padding-left: 14px; } .app-bar-actions { align-items: center; gap: 10px; } header.app-bar button { font-family: var(--sx-font); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--sx-line); background: var(--sx-surface); color: var(--sx-ink-2); } header.app-bar button:hover { border-color: var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-ink); } .co-pick { font-family: var(--sx-font); font-size: 12.5px; color: var(--sx-ink-3); gap: 6px; } .co-pick select { font-family: var(--sx-font); font-size: 12.5px; color: var(--sx-ink-2); border: 1px solid var(--sx-line); border-radius: 8px; padding: 5px 8px; background: var(--sx-surface); } /* 帯が低くなったぶん、本文の始まりも上げる */ main { padding-top: 84px; } @media (max-width: 760px) { header.app-bar { padding: 10px 14px; gap: 10px; } main { padding-top: 74px; } } /* モード切替。丸ピルではなく角丸のセグメント */ .sx-seg { display: inline-flex; background: var(--sx-surface-2); border: 1px solid var(--sx-line); border-radius: 8px; padding: 2px; gap: 2px; } .sx-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 6px; font-size: 12.5px; color: var(--sx-ink-2); font-weight: 600; cursor: pointer; font-family: var(--sx-font); line-height: 1.6; } .sx-seg button[aria-pressed="true"] { background: var(--sx-surface); color: var(--sx-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } @media (max-width: 760px) { .sx-seg button { padding: 5px 9px; font-size: 12px; } } /* ============================================================ かんたんモードの画面 ============================================================ */ #screen-simple { font-family: var(--sx-font); color: var(--sx-ink); font-size: 15px; line-height: 1.7; max-width: 1100px; margin: 0 auto; } #screen-simple .eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-ink-3); font-weight: 700; } /* 見出しの塊と「ゼロからつくる」を左右に分ける。文中に置くと説明文の折り返しを乱して、読み物の途中にボタンが埋まって見える */ .sx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } .sx-head > div { min-width: 0; } @media (max-width: 640px) { .sx-head { display: block; } .sx-head #sxNew { margin-top: 12px; } } .sx-title { font-family: var(--sx-font); font-size: 26px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; margin: 6px 0 0; text-wrap: balance; } .sx-lead { color: var(--sx-ink-2); font-size: 13.5px; margin: 8px 0 0; max-width: 62ch; } /* ---------- 検索 ---------- */ .sx-searchbox { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--sx-line-strong); border-radius: 12px; background: var(--sx-surface); padding: 6px 6px 6px 16px; max-width: 820px; transition: border-color .15s, box-shadow .15s; } .sx-searchbox:focus-within { border-color: var(--sx-accent); box-shadow: 0 0 0 4px var(--sx-accent-tint); } .sx-searchbox input { flex: 1; border: 0; background: transparent; padding: 12px 0; font-size: 17px; min-width: 0; color: var(--sx-ink); font-family: inherit; } .sx-searchbox input:focus { outline: none; } .sx-mic { flex: none; border: 1px solid var(--sx-line); background: var(--sx-surface-2); width: 40px; height: 40px; border-radius: 9px; font-size: 16px; cursor: pointer; display: grid; place-items: center; line-height: 1; color: var(--sx-ink-2); } .sx-mic:hover { border-color: var(--sx-accent); color: var(--sx-accent); } .sx-mic.on { background: var(--sx-lv-a-bg); border-color: var(--sx-lv-a); color: var(--sx-lv-a); animation: sxPulse 1.4s ease-in-out infinite; } @keyframes sxPulse { 50% { opacity: .55; } } .sx-go { flex: none; border: 0; background: var(--sx-accent); color: var(--sx-on-accent); font-weight: 700; height: 40px; padding: 0 18px; border-radius: 9px; font-size: 14px; cursor: pointer; font-family: inherit; } .sx-go:hover { background: var(--sx-accent-deep); } .sx-quick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; align-items: center; } .sx-quick-k { font-size: 11.5px; color: var(--sx-ink-3); margin-right: 2px; } .sx-qchip { border: 1px solid var(--sx-line); background: var(--sx-surface); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--sx-ink-2); cursor: pointer; font-family: inherit; } .sx-qchip:hover { border-color: var(--sx-accent); color: var(--sx-accent); background: var(--sx-accent-tint); } /* ---------- 近道（検索させる前に「これでしょ」を出す） ---------- */ .sx-fast { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; margin: 24px 0 6px; } .sx-fast-card { text-align: left; border: 1px solid var(--sx-line); background: var(--sx-surface); border-radius: var(--sx-r); padding: 15px 17px; cursor: pointer; display: block; width: 100%; font-family: inherit; color: inherit; transition: border-color .12s; } .sx-fast-card:hover { border-color: var(--sx-accent); } .sx-fast-card.lead { border-color: var(--sx-accent); background: var(--sx-accent-tint); } .sx-fast-k { font-size: 11px; letter-spacing: .12em; font-weight: 700; color: var(--sx-ink-3); } .sx-fast-card.lead .sx-fast-k { color: var(--sx-accent-deep); } /* 3枚が横に並ぶグリッドなので、1枚の名前が伸びると3枚とも背が伸びる。一覧の見出しと同じく2行で打ち切る（人が付けた名前は短縮しないため長くなり得る） */ .sx-fast-n { font-size: 16px; font-weight: 700; margin-top: 5px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sx-fast-m { font-size: 12px; color: var(--sx-ink-2); margin-top: 5px; } @media (max-width: 860px) { .sx-fast { grid-template-columns: 1fr; } } /* ---------- 目録（カードではなく罫線。行数が増えても密度が保てる） ---------- */ .sx-hits-head { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 2px; padding-bottom: 10px; border-bottom: 1.5px solid var(--sx-line-strong); } /* 「さがす」を押したことが目に見えるように、結果の見出しを一瞬光らせる。一覧は打鍵ごとに更新済みなので、これが無いとボタンが死んでいるように見える */ .sx-hits-head.sx-flash { animation: sxFlashHead .9s ease-out; } @keyframes sxFlashHead { 0% { background: var(--sx-accent-tint); box-shadow: 0 0 0 6px var(--sx-accent-tint); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } } @media (prefers-reduced-motion: reduce) { .sx-hits-head.sx-flash { animation: none; } } .sx-hits-count { font-size: 13px; font-weight: 700; } .sx-hits-count em { font-style: normal; font-family: var(--sx-num); font-size: 15px; } .sx-hits-note { font-size: 12px; color: var(--sx-ink-3); } /* 「AIでもう一度探す」。結果の下に置く＝さがすの対抗馬ではなく次の一手だと位置で示す。押す前から2択を突きつけない。 */ .sx-more { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 14px; border-bottom: 1px solid var(--sx-line); } .sx-more-k { font-size: 12.5px; color: var(--sx-ink-3); } .sx-more-btn { border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-ink-2); border-radius: 9px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; } .sx-more-btn:hover { border-color: var(--sx-accent); color: var(--sx-accent-deep); background: var(--sx-accent-tint); } .sx-more-btn[disabled] { opacity: .5; cursor: default; } .sx-more-note { font-size: 11.5px; color: var(--sx-ink-3); } .sx-hits { list-style: none; margin: 0; padding: 0; } .sx-hit { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; padding: 16px 12px 16px 14px; border: 0; border-bottom: 1px solid var(--sx-line); background: transparent; position: relative; cursor: pointer; font: inherit; color: inherit; } .sx-hit::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sx-accent); opacity: 0; transition: opacity .12s; } .sx-hit:hover { background: var(--sx-surface-2); } .sx-hit:hover::before, .sx-hit.on::before { opacity: 1; } .sx-hit.on { background: var(--sx-accent-tint); } /* grid の 1fr は既定で min-content までしか縮まない。区切れない長い名前（GL-4.2m-MANHOLE-… のような英数の連続）が入ると、この列が縮まずに右の行数・レベル帯を押し出してカードごと横スクロールになる。 */ .sx-hit-main { min-width: 0; } /* 見出しは短くしてあるが、人が付けた長い名前もあり得る。2行で打ち切る（3行以上になると右の行数・レベル帯とベースラインが合わず、行の区切りが読めなくなる） */ .sx-hit-t { font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sx-hit-t mark { background: transparent; color: var(--sx-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .sx-hit-s { font-size: 12.5px; color: var(--sx-ink-2); margin-top: 3px; } .sx-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .sx-tag { font-size: 11px; padding: 2px 8px; border-radius: 5px; letter-spacing: .02em; background: var(--sx-surface-2); border: 1px solid var(--sx-line); color: var(--sx-ink-2); } .sx-tag.co { background: var(--sx-accent-tint); border-color: transparent; color: var(--sx-accent-deep); font-weight: 600; } .sx-tag.thin { border-style: dashed; color: var(--sx-ink-3); } /* 中身がまったく同じものをまとめた印。件数を隠したのではないと分かるように出す */ .sx-tag.dup { background: var(--sx-lv-b-bg); border-color: transparent; color: var(--sx-lv-b); font-weight: 600; } .sx-hit-r { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; } .sx-rows { font-family: var(--sx-num); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .sx-rows span { font-family: var(--sx-font); font-size: 11px; color: var(--sx-ink-3); font-weight: 400; margin-left: 2px; } .sx-used { font-size: 11px; color: var(--sx-ink-3); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .sx-hit { grid-template-columns: 1fr; gap: 10px; } .sx-hit-r { flex-direction: row; align-items: center; gap: 12px; } } /* 残留リスクの内訳バー：行数では測れない「そのまま流用して危ないか」を形で出す */ .sx-bar { display: flex; height: 6px; width: 132px; border-radius: 3px; overflow: hidden; background: var(--sx-line); } .sx-bar i { display: block; } .sx-bar i.a { background: var(--sx-lv-a); } .sx-bar i.b { background: var(--sx-lv-b); } .sx-bar i.c { background: var(--sx-lv-c); } .sx-bar i.d { background: var(--sx-lv-d); } .sx-bar-k { font-size: 10.5px; color: var(--sx-ink-3); letter-spacing: .04em; font-variant-numeric: tabular-nums; } /* 見出しだけを塊にする。b を一律 display:block にすると、文中の強調（PDF / Excel で出力、「詳細」…）まで改行されて文章が崩れる */ .sx-empty { padding: 44px 16px; text-align: center; color: var(--sx-ink-2); font-size: 13.5px; line-height: 1.9; max-width: 56ch; margin: 0 auto; } .sx-empty b { color: var(--sx-ink); font-weight: 700; } .sx-empty .sx-empty-t { display: block; font-size: 16px; margin-bottom: 8px; } .sx-usage { font-size: 11.5px; color: var(--sx-ink-3); margin-top: 18px; } .sx-usage.warn { color: var(--sx-lv-b); font-weight: 600; } /* かんたんモードの復元カードも同じ面に揃える（styles.css の .card を上書き） */ #screen-simple > .card { border: 1px solid var(--sx-line); border-radius: var(--sx-r-lg); background: var(--sx-surface); box-shadow: var(--sx-shadow); font-family: var(--sx-font); } /* ============================================================ プレビュー引き出し（選ぶ・確かめる・作るを1枚で完結させる） ============================================================ */ .sx-scrim { position: fixed; inset: 0; background: rgba(16, 24, 28, .34); z-index: 880; opacity: 0; pointer-events: none; transition: opacity .18s; } .sx-scrim.on { opacity: 1; pointer-events: auto; } .sx-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(880px, 100%); background: var(--sx-surface); border-left: 1px solid var(--sx-line); box-shadow: var(--sx-shadow-lg); z-index: 881; display: flex; flex-direction: column; font-family: var(--sx-font); color: var(--sx-ink); font-size: 15px; line-height: 1.7; transform: translateX(102%); /* 閉じているあいだは visibility:hidden。画面外にあるだけだと中のボタンや入力欄が Tab のフォーカス順に残り、見えない場所へ飛ばされる */ visibility: hidden; transition: transform .22s cubic-bezier(.32, .72, 0, 1), visibility 0s .22s; } .sx-drawer.on { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.32, .72, 0, 1), visibility 0s 0s; } @media (prefers-reduced-motion: reduce) { .sx-drawer, .sx-scrim { transition: none; } } .sx-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--sx-line); } .sx-dh h2 { font-size: 17px; margin: 0; font-weight: 700; line-height: 1.35; font-family: var(--sx-font); } .sx-dh .sx-hit-s { margin-top: 4px; } .sx-x { border: 0; background: transparent; color: var(--sx-ink-3); font-size: 18px; line-height: 1; padding: 4px 6px; margin-left: auto; cursor: pointer; } .sx-x:hover { color: var(--sx-ink); } .sx-db { overflow: auto; padding: 20px 22px 24px; flex: 1; background: var(--sx-surface-2); } .sx-df { padding: 14px 22px; border-top: 1px solid var(--sx-line); background: var(--sx-surface-2); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .sx-df .sx-note { font-size: 11.5px; color: var(--sx-ink-3); flex-basis: 100%; margin: 0; } .sx-sec { margin-top: 18px; } .sx-sec > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--sx-ink-2); list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 0; } .sx-sec > summary::-webkit-details-marker { display: none; } .sx-sec > summary::before { content: "▸"; color: var(--sx-ink-3); transition: transform .15s; display: inline-block; } .sx-sec[open] > summary::before { transform: rotate(90deg); } .sx-why { font-weight: 400; color: var(--sx-ink-3); font-size: 11.5px; } /* 帳票プレビュー。中身は app.js の docHtml() が返す帳票そのまま（表を2つ持たない）。 PRINT_STYLE は #printArea にしか効かないので、同じ見た目はここで作る。マークアップは table.hdr（td.lbl が見出し）と table.body（12列・td.c・td.b）。高さを切っておく：プレビューで画面を埋めると、いちばん効く入力（音声）が毎回スクロールの下に隠れる。 */ .sx-doc-wrap { background: var(--sx-surface); border: 1px solid var(--sx-line-strong); padding: 16px 14px; font-family: var(--sx-doc); color: #000; overflow: auto; max-height: 44vh; resize: vertical; } .sx-doc-wrap .doc h2 { font-size: 15px; text-align: center; letter-spacing: .1em; margin: 2px 0 12px; font-family: var(--sx-doc); font-weight: 700; } .sx-doc-wrap table { border-collapse: collapse; width: 100%; } .sx-doc-wrap table.hdr td { border: 1px solid #555; padding: 3px 6px; font-size: 10.5px; vertical-align: top; } .sx-doc-wrap table.hdr td.lbl { background: #eef1f3; font-weight: 700; width: 104px; } .sx-doc-wrap table.body { margin-top: 8px; min-width: 820px; } .sx-doc-wrap table.body th, .sx-doc-wrap table.body td { border: 1px solid #555; padding: 3px 5px; font-size: 10px; vertical-align: top; line-height: 1.55; } .sx-doc-wrap table.body th { background: #eef1f3; text-align: center; font-weight: 700; white-space: nowrap; } .sx-doc-wrap table.body td.c { text-align: center; font-family: var(--sx-num); } .sx-doc-wrap table.body td.b { font-weight: 700; } .sx-doc-wrap table.body td:nth-child(1) { width: 88px; } .sx-doc-wrap table.body td:nth-child(4), .sx-doc-wrap table.body td:nth-child(5), .sx-doc-wrap table.body td:nth-child(6), .sx-doc-wrap table.body td:nth-child(7), .sx-doc-wrap table.body td:nth-child(9), .sx-doc-wrap table.body td:nth-child(10), .sx-doc-wrap table.body td:nth-child(11), .sx-doc-wrap table.body td:nth-child(12) { width: 30px; } .sx-thin { padding: 26px 18px; text-align: center; color: var(--sx-ink-2); font-size: 13.5px; background: var(--sx-surface); border: 1px dashed var(--sx-line-strong); border-radius: var(--sx-r); } .sx-thin b { display: block; font-size: 15px; color: var(--sx-ink); margin-bottom: 6px; } /* 引き出しの中の最小入力 */ .sx-form { display: flex; flex-direction: column; gap: 14px; } .sx-f { display: flex; flex-direction: column; gap: 5px; } .sx-f > label { font-size: 12.5px; font-weight: 700; color: var(--sx-ink-2); } .sx-in { border: 1px solid var(--sx-line-strong); background: var(--sx-surface); border-radius: 9px; padding: 11px 13px; font-size: 15px; width: 100%; color: var(--sx-ink); font-family: inherit; } .sx-in:focus { outline: none; border-color: var(--sx-accent); box-shadow: 0 0 0 3px var(--sx-accent-tint); } .sx-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .sx-2 { grid-template-columns: 1fr; } } .sx-carry { font-size: 11px; color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 7px; margin-left: 6px; font-weight: 700; } .sx-voice { border: 1px dashed var(--sx-line-strong); border-radius: 12px; background: var(--sx-surface-2); padding: 15px; display: flex; gap: 13px; align-items: flex-start; } .sx-bigmic { flex: none; width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; background: var(--sx-accent); color: var(--sx-on-accent); font-size: 21px; line-height: 1; box-shadow: 0 4px 14px rgba(47, 93, 138, .3); } .sx-bigmic.on { background: var(--sx-lv-a); color: #fff; animation: sxPulse 1.2s ease-in-out infinite; } .sx-voice textarea { flex: 1; border: 0; background: transparent; resize: none; min-height: 72px; font-size: 14.5px; line-height: 1.75; font-family: inherit; color: var(--sx-ink); } .sx-voice textarea:focus { outline: none; } .sx-fmt { display: flex; gap: 8px; flex-wrap: wrap; } .sx-fmtbtn { border: 1px solid var(--sx-line-strong); background: var(--sx-surface); border-radius: 9px; padding: 9px 15px; font-size: 13.5px; font-weight: 700; color: var(--sx-ink-2); cursor: pointer; font-family: inherit; } .sx-fmtbtn.on { border-color: var(--sx-accent); background: var(--sx-accent-tint); color: var(--sx-accent-deep); } /* 様式ファイル登録済み。無印は標準様式で出るので、押す前に区別が付くようにする */ .sx-fmtbtn.has-fmt::after { content: "✓"; margin-left: 6px; color: var(--sx-lv-d); font-weight: 700; } /* 0円の最速経路とAI経路を並列に置く */ .sx-b1 { border: 0; background: var(--sx-accent); color: var(--sx-on-accent); font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 11px; cursor: pointer; font-family: inherit; } .sx-b1:hover { background: var(--sx-accent-deep); } .sx-b2 { border: 2px solid var(--sx-accent); background: var(--sx-surface); color: var(--sx-accent-deep); font-weight: 700; font-size: 15px; padding: 12px 20px; border-radius: 11px; cursor: pointer; font-family: inherit; } .sx-b2:hover { background: var(--sx-accent-tint); } .sx-b3 { border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-ink-2); font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-family: inherit; } .sx-b3:hover { border-color: var(--sx-accent); color: var(--sx-accent); } /* 「一から作る」。ラベルだけだと何が起きるか分からないので、いつ押すものかを小さく添える（検索の代わりの道だと分かるように） */ .sx-newbtn { border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-ink-2); border-radius: var(--sx-r); padding: 8px 14px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.35; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; flex: none; } .sx-newbtn small { font-size: 10.5px; font-weight: 400; color: var(--sx-ink-3); } .sx-newbtn:hover { border-color: var(--sx-accent); color: var(--sx-accent-deep); background: var(--sx-accent-tint); } .sx-newbtn:hover small { color: var(--sx-accent); } /* ---------- かんたんモードでは会社プルダウンを出さない ---------- 提出先は「様式」として引き出しの中で選ぶ。入口で会社を選ばせると、 A社の手順をB社の様式で出すという主用途のたびに壁を越える操作が要る。 ⚙（様式の追加・改名）は残す。TemplatesUI が #coSelect を必須で見ているので要素は消さず、表示だけ落とす。 */ body[data-mode="simple"] .co-pick { display: none; }