/* ============================================================ * 基本リセットとページ全体の設定 * - 余白をすべて消す * - 背景は黒（仕様どおり） * ============================================================ */ body.page-index * { margin: 0; padding: 0; box-sizing: border-box; } html.root-page-index, body.page-index { height: 100%; } body.page-index { background: #000; overflow: hidden; } /* ============================================================ * 舞台（ステージ） * - 画面全体を覆う固定レイヤー * - 小さい画面では JS が transform: scale() で全体を縮小する * - 縮小の基準点は「左上 (0,0)」。JS は仮想幅 = 画面幅 ÷ 縮小率 * の座標系で中央寄せにレイアウトしているため、基準点を左上に * そろえると縮小後にちょうど画面中央へ収まる。 * 以前の「中央 (50% 50%)」基準では、縮小が効くスマホ幅で構図が * 右へずれて右側が画面外に出る（見切れの原因だった） * ============================================================ */ body.page-index #stage { position: fixed; inset: 0; transform-origin: 0 0; } /* ============================================================ * アルファベット(.letter) と ラベル(.label) の共通スタイル * - position:absolute で JS が自由に配置する * - 初期状態は opacity:0（非表示）、JS がアニメーションさせる * - will-change で GPU 合成を促し、動きを滑らかにする * ============================================================ */ body.page-index .letter,body.page-index .label { position: absolute; left: 0; top: 0; color: #fff; /* テキストは白（仕様どおり） */ font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; white-space: pre; /* 改行や空白をそのまま保持 */ opacity: 0; /* 初期状態は非表示 */ will-change: transform, opacity; } /* ============================================================ * アルファベット（X / I / T / S / W） * - font-size は「横並びの時のサイズ」= 80px（仕様どおり） * - 縦並びへ移動する際、JS が 50px へスムーズに縮小する * - 太さは横並び = 700（太字）、縦移動中に 400 へ変化する * （JS が font-weight を途中で書き換える） * ============================================================ */ body.page-index .letter { font-size: 80px; line-height: 1; font-weight: 700; letter-spacing: 0.02em; } /* ============================================================ * 右側の説明ラベル（例：Cross / 交錯・共創） * - サイズ 24px・ウェイト 300（細め）で英文・日本語とも統一 * - 1 行で表示し、折り返さない * ============================================================ */ body.page-index .label { font-size: 24px; line-height: 1.4; font-weight: 300; white-space: nowrap; } body.page-index .label .sep { opacity: .55; padding: 0 .3em; } /* 「/」は少し控えめに */ body.page-index .label .ja { letter-spacing: .06em; } /* 日本語は字間をやや広く */ /* ============================================================ * 下部のボタン「Chromeの拡張機能(CSS編)」 * - 白の細い枠線＋透明背景。ホバー/フォーカスで白背景に反転 * - 初期状態は opacity:0。ラベル表示開始から 750ms 後 * （ユーザー指定値）に JS がフェードインさせる。 * フェード時間は 0.3 秒（元 0.6 秒の半分） * ============================================================ */ body.page-index .cta { position: absolute; left: 50%; transform: translateX(-50%); display: inline-block; width: 350px; padding: 14px 36px; border: 1px solid rgba(255,255,255,.65); color: #fff; background: transparent; font-family: inherit; font-size: 16px; font-weight: 300; letter-spacing: .12em; text-decoration: none; white-space: nowrap; opacity: 0; /* フェードイン 0.3 秒（半分に短縮）＋ホバー反転 0.25 秒 */ transition: opacity .3s ease, background .25s ease, color .25s ease; } body.page-index .cta:hover,body.page-index .cta:focus-visible { background: #fff; color: #000; } /* ============================================================ * クレジット「by ジッツウ.」 * - ボタンのすぐ下（10px あけた位置）に 10px サイズで表示 * - ボタンと同じタイミング（750ms 後）でフェードインする * ============================================================ */ body.page-index .credit { position: absolute; margin-top: 40px; margin-bottom: 10px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.65); /* 白より少し落として控えめに */ font-size: 16px; /* 仕様どおり 10px */ font-weight: 300; letter-spacing: .08em; white-space: nowrap; opacity: 0; /* 初期状態は非表示 */ transition: opacity .3s ease; /* ボタンと同じ 0.3 秒フェード */ } body.page-index .credit span{ display: block; text-align: right; font-size: 12px; } /* ============================================================ * スマートフォン・タブレット対応 * ============================================================ */ /* 細い文字（ウェイト300）が小型スクリーンでつぶれて見えるのを防ぐ。 Apple 系のアンチエイリアス設定と、高精細レンダリングを指定 */ body.page-index { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* タップ時の灰色ハイライトを消し、ダブルタップズームの待ち時間も 解消する（ボタンのタップ操作を快適に） */ body.page-index .cta { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* 幅500px以下のスマホでは、ラベルを 24px→19px に縮小して 右側の見切れを防ぐ（ユーザー指定）。アルファベット側も JS が同じ基準（0.78 倍）で縮小する。ボタンの高さは JS が 実測するため、位置計算も自動で追従する */ @media (max-width: 500px) { body.page-index .label { font-size: 19px; } body.page-index .cta { padding: 12px 26px; font-size: 15px; letter-spacing: .08em; } } /* 拡張機能ページ専用。上のトップ用規則は変更せず、名前空間内でのみ上書きする。 */ body.page-extensions { height: auto; min-height: 100vh; overflow: auto; background: #000; color: #f4f4f4; font: 400 15px/1.8 "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } body.page-extensions [hidden] { display: none !important; } body.page-extensions .main-container { max-width: 1200px; margin: 0 auto; padding: 56px 24px 72px; } body.page-extensions .submain-title { font-size: clamp(24px, 3.2vw, 38px); font-weight: 400; letter-spacing: .035em; line-height: 1.5; margin-bottom: 36px; } body.page-extensions .content-area { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; } body.page-extensions .nav-arrows { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; } body.page-extensions .arrow-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #555; background: #111; color: #fff; cursor: pointer; } body.page-extensions .feature-list { list-style: none; } body.page-extensions .feature-item { border-bottom: 1px solid #333; } body.page-extensions .feature-item:first-child { border-top: 1px solid #333; } body.page-extensions .feature-btn { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 58px; padding: 14px 8px; border: 0; background: transparent; color: #bcbcbc; text-align: left; font: inherit; cursor: pointer; } body.page-extensions .feature-icon { width: 22px; flex: 0 0 22px; text-align: center; font-size: 20px; } body.page-extensions .feature-detail { padding: 0 16px 22px 46px; color: #bcbcbc; font-size: 13px; overflow-wrap: anywhere; } body.page-extensions.is-enhanced .feature-item:not(.active) .feature-detail { display: none; } body.page-extensions .feature-item.active .feature-btn { color: #fff; font-weight: 600; } body.page-extensions .feature-item.active { background: #111; } body.page-extensions .detail-line + .detail-line { margin-top: 6px; } body.page-extensions .detail-line strong { color: #eee; font-weight: 500; } body.page-extensions .side-display { position: sticky; top: 24px; min-width: 0; border: 1px solid #333; background: #0c0c0c; } body.page-extensions .image-container { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; } body.page-extensions .watch-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 65vh; object-fit: contain; } body.page-extensions .image-fallback { max-width: 340px; color: #bcbcbc; font-size: 14px; text-align: center; white-space: pre-line; overflow-wrap: anywhere; } body.page-extensions .image-fallback::before { content: "—"; display: block; margin-bottom: 22px; font-size: 32px; color: #777; } body.page-extensions .download-panel,body.page-extensions .text-panel { min-height: 440px; padding: 36px; } body.page-extensions .text-panel-title,body.page-extensions .download-panel h2 { margin-bottom: 24px; font-size: 22px; font-weight: 500; } body.page-extensions .text-panel-body { color: #ccc; line-height: 2; overflow-wrap: anywhere; } body.page-extensions .download-note { color: #bbb; font-size: 14px; } body.page-extensions .download-link { display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 10px 20px; border: 1px solid #888; background: #fff; color: #000; text-decoration: none; } body.page-extensions button:hover { background: #222; color: #fff; } body.page-extensions :focus-visible { outline: 2px solid #fff; outline-offset: 4px; } body.page-extensions .extension-noscript { max-width: 1200px; margin: auto; padding: 24px; } @media (max-width: 768px) { body.page-extensions .main-container { padding: 32px 18px 44px; } body.page-extensions .submain-title { margin-bottom: 24px; } body.page-extensions .content-area { grid-template-columns: minmax(0, 1fr); gap: 20px; } body.page-extensions .nav-arrows { flex-direction: row; padding: 0; } body.page-extensions .side-display { position: static; } body.page-extensions .image-container { min-height: 230px; padding: 24px; } body.page-extensions .text-panel,body.page-extensions .download-panel { min-height: 230px; padding: 24px; } } @media (prefers-reduced-motion: reduce) { body.page-extensions * { scroll-behavior: auto; } } /* ========================================================= CopyVerify LP 配色：XITSW (chrome-extensions) に準拠 #555 背景 / 60% 黒オーバーレイ / 黒の角丸パネル / グレーのボタン / ワイン・グリーン・マスタードのアクセント ========================================================= */ body.page-copy *{margin:0;padding:0;box-sizing:border-box} body.page-copy{ --base:#555555; --veil:rgba(0,0,0,.6); --panel:#000000; --btn:rgba(50,50,50,.9); --btn-hi:rgba(70,70,70,.9); --btn-on:rgba(60,60,60,.95); --line:rgba(80,80,80,.5); --line-hi:rgba(120,120,120,.7); --wine:rgba(87,43,78,.9); --green:rgba(44,87,43,.9); --mustard:rgba(87,66,43,.9); --amber:#f5c451; --ink:#ffffff; --dim:#aaaaaa; --mute:#888888; --paper:#ffffff; --paper-ink:#111111; /* アプリ画面由来のシグナル色 */ --run:#1a8cff; --ng:#ff6b6b; --ok:#4fd18b; --stop:#ff9f43; --sans:"IBM Plex Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; } html.root-page-copy{scroll-behavior:smooth} body.page-copy{font-family:var(--sans);background:var(--base);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.page-copy .sim>div,body.page-copy .box,body.page-copy .text-card{min-width:0} body.page-copy .veil{background:var(--veil);min-height:100vh} body.page-copy a{color:inherit} body.page-copy :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px} body.page-copy img{max-width:100%;display:block} /* ---------- top bar ---------- */ body.page-copy .topbar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)} body.page-copy .topbar-in{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px} body.page-copy .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.06em} body.page-copy .brand-mark{width:26px;height:26px;border-radius:7px;background:var(--btn);border:1px solid var(--line-hi);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ok)} body.page-copy .topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} body.page-copy .topnav a{font-size:13px;text-decoration:none;color:var(--dim);padding:6px 12px;border-radius:8px;transition:background-color .2s,color .2s} body.page-copy .topnav a:hover{background:rgba(255,255,255,.08);color:var(--ink)} body.page-copy .topnav a.dl{background:var(--green);color:var(--ink)} /* ---------- hero ---------- */ body.page-copy .hero{max-width:1200px;margin:0 auto;padding:56px 20px 40px;text-align:center} body.page-copy .main-title{font-size:clamp(44px,7vw,72px);font-weight:700;letter-spacing:.08em;line-height:1.1} body.page-copy .submain-title{font-size:clamp(15px,2vw,20px);font-weight:300;letter-spacing:.08em;margin-top:14px;color:#ddd} body.page-copy .hero-lede{max-width:760px;margin:22px auto 0;font-size:15px;color:var(--dim)} body.page-copy .hero-lede b{color:var(--ink);font-weight:500} body.page-copy .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px} body.page-copy .chip{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--btn);border:1px solid var(--line);color:#ddd} body.page-copy .chip i{font-style:normal;color:var(--ok);margin-right:6px} /* ---------- detail cards ---------- */ body.page-copy .text-card{padding:28px 30px;border-radius:18px;background:var(--paper);color:var(--paper-ink);box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;flex-direction:column} body.page-copy .text-card h3{font-size:21px;line-height:1.4;margin-bottom:10px} body.page-copy .text-card p{font-size:14.5px;line-height:1.9;color:#222} body.page-copy .text-card p+p{margin-top:8px} body.page-copy .text-card ul{margin:10px 0 0 1.2em;font-size:14px;color:#333;line-height:1.85} body.page-copy .text-card .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#777;margin-bottom:8px;text-transform:uppercase;display:flex;align-items:center;gap:8px} body.page-copy .text-card .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block} body.page-copy .term{margin-top:auto;background:#111;color:#e8e8e8;border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.8;overflow-x:auto;white-space:pre} body.page-copy .text-card .term{margin-top:16px} body.page-copy .term .r{color:var(--ng)} body.page-copy .term .g{color:var(--ok)} body.page-copy .term .m{color:#888} body.page-copy .term .o{color:var(--stop)} body.page-copy .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} body.page-copy .purpose{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-bottom:22px} body.page-copy .purpose .q{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.5;letter-spacing:.03em} body.page-copy .purpose .q em{font-style:normal;color:var(--amber)} body.page-copy .purpose p{font-size:14.5px;color:#ccc} body.page-copy .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} body.page-copy .btn-g.wine{background:var(--wine)} /* ---------- pane detail ---------- */ body.page-copy .pane-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:22px} body.page-copy .pane-grid .wide{grid-column:1/-1} body.page-copy .mock-pane{background:#9c9c9c;color:#111;border-radius:12px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.9;white-space:pre;overflow-x:auto} body.page-copy .mock-exec{background:#000;border:1px solid #2a2a2a;color:#fff;border-radius:12px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.9;white-space:pre;overflow-x:auto} body.page-copy .mock-exec .r{color:var(--ng)} body.page-copy .mock-exec .m{color:#999} body.page-copy .pane h3{font-size:16px;margin-bottom:10px;display:flex;gap:10px;align-items:center} body.page-copy .pane h3 .n{width:24px;height:24px;border-radius:50%;background:#d63031;display:grid;place-items:center;font-size:12px} body.page-copy .pane .cap{font-size:13px;color:#bbb;margin-top:10px} body.page-copy .dtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px} body.page-copy .dtable th,body.page-copy .dtable td{text-align:left;padding:10px 12px;border-bottom:1px solid #2c2c2c;vertical-align:top} body.page-copy .dtable th{font-weight:500;color:var(--mute);font-size:12px;letter-spacing:.06em} body.page-copy .dtable td:first-child{white-space:nowrap;color:#fff;font-weight:500} body.page-copy .dtable td{color:#ccc} body.page-copy .dtable code{font-family:var(--mono);font-size:12.5px;color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:5px;padding:1px 6px} /* ---------- flow ---------- */ body.page-copy .flow{list-style:none;display:flex;flex-direction:column;gap:0} body.page-copy .flow li{display:grid;grid-template-columns:150px 1fr 210px;gap:20px;padding:18px 4px;border-bottom:1px solid #2c2c2c;align-items:start} body.page-copy .flow li:last-child{border-bottom:none} body.page-copy .flow .st{font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px} body.page-copy .flow .st i{width:10px;height:10px;border-radius:50%;background:var(--run);flex-shrink:0} body.page-copy .flow .st.pre i{background:#888}body.page-copy .flow .st.end i{background:var(--ok)} body.page-copy .flow p{font-size:14px;color:#ccc} body.page-copy .flow .hd{font-family:var(--mono);font-size:12.5px;color:#fff;background:#111;border:1px solid #333;border-radius:8px;padding:6px 10px;justify-self:start} body.page-copy .flow .hd small{display:block;color:var(--mute);font-size:10.5px;letter-spacing:.06em;font-family:var(--sans)} /* ---------- sections ---------- */ body.page-copy section.block{max-width:1200px;margin:0 auto;padding:90px 20px 0} body.page-copy .sec-head{text-align:center;margin-bottom:30px} body.page-copy .sec-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:.06em;line-height:1.3} body.page-copy .sec-head p{margin-top:10px;font-size:15px;font-weight:300;color:#ddd;letter-spacing:.04em} body.page-copy .box{background:var(--panel);border-radius:20px;padding:36px} /* ---------- simulator (signature) ---------- */ body.page-copy .sim{display:grid;grid-template-columns:1fr 230px;gap:24px} body.page-copy .stages{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap} body.page-copy .stage{flex:1;min-width:110px;padding:9px 12px;border-radius:10px;background:var(--btn);border:1px solid var(--line);font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:8px;transition:all .3s} body.page-copy .stage b{font-weight:500;color:inherit} body.page-copy .stage span{font-family:var(--mono);font-size:11px} body.page-copy .stage.now{color:var(--ink);border-color:var(--run);background:rgba(26,140,255,.18)} body.page-copy .stage.done{color:#ddd} body.page-copy .stage.done span{color:var(--ok)} body.page-copy .exec{background:#000;border:1px solid #2a2a2a;border-radius:12px;padding:18px 20px;font-size:14px;min-height:300px} body.page-copy .exec h4{font-size:16px;font-weight:700;margin-bottom:10px} body.page-copy .bar{height:8px;background:#3a3a3a;border-radius:99px;overflow:hidden;margin-bottom:12px} body.page-copy .bar i{display:block;height:100%;width:0;background:#e9e9e9;border-radius:99px;transition:width .12s linear} body.page-copy .prow{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;flex-wrap:wrap} body.page-copy .psub{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:2px} body.page-copy .bytes{margin-top:14px;padding:10px 12px;border-radius:8px;background:#0d0d0d;border:1px solid #222;font-family:var(--mono);font-size:12px;line-height:1.9;overflow:hidden} body.page-copy .bytes .lab{color:var(--mute);display:inline-block;width:46px} body.page-copy .bytes .b{display:inline-block;width:2.4ch;text-align:center;border-radius:3px;transition:background .15s} body.page-copy .bytes .b.eq{color:var(--ok)} body.page-copy .bytes .b.ne{background:var(--ng);color:#000} body.page-copy .errs{margin-top:14px;padding-top:12px;border-top:1px solid #333} body.page-copy .errs h5{color:var(--ng);font-size:13.5px;font-weight:700;margin-bottom:4px} body.page-copy .errs li{list-style:none;color:var(--ng);font-size:13px;font-family:var(--mono);animation:page-copy-fadeUp .4s both} body.page-copy .result{margin-top:12px;font-weight:700;font-size:14px} @keyframes page-copy-fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} body.page-copy .ctrl{display:flex;gap:0;margin-bottom:14px} body.page-copy .ctrl button{font:inherit;font-size:14px;font-weight:700;border:none;cursor:pointer;padding:10px 14px;transition:filter .2s,opacity .2s} body.page-copy .run-btn{flex:1;background:var(--run);color:#fff;border-radius:10px 0 0 10px} body.page-copy .run-btn:disabled{opacity:.5;cursor:not-allowed} body.page-copy .stop-btn{width:120px;background:#fff;color:#d63031;border-radius:0 10px 10px 0} body.page-copy .stop-btn:disabled{opacity:.35;cursor:not-allowed} body.page-copy .ctrl button:not(:disabled):hover{filter:brightness(1.08)} body.page-copy .timepane{background:#9c9c9c;color:#111;border-radius:12px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:2} body.page-copy .timepane .t{display:flex;justify-content:space-between} body.page-copy .timepane hr{border:none;border-top:1px solid #6a6a6a;margin:4px 0} body.page-copy .timepane .tot{font-weight:700} body.page-copy .timepane .stopc{color:#b34700;font-weight:700} body.page-copy .sim-note{font-size:12px;color:var(--mute);margin-top:12px} /* ---------- anatomy ---------- */ body.page-copy .anat{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start} body.page-copy .anat-fig{position:relative;width:min(100%,420px);margin:0 auto} body.page-copy .anat-fig img{border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08)} body.page-copy .pin{position:absolute;left:calc(3.15% - 13px);margin-top:-13px;width:26px;height:26px;border-radius:50%;background:#d63031;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;border:2px solid #000;cursor:pointer;transition:transform .2s} body.page-copy .pin.on,body.page-copy .pin:hover{transform:scale(1.2);background:var(--amber);color:#111} body.page-copy .parts{list-style:none;display:flex;flex-direction:column;gap:8px} body.page-copy .part{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 16px;border-radius:12px;background:var(--btn);border:1px solid var(--line);transition:background-color .2s,border-color .2s;cursor:default} body.page-copy .part.on{background:var(--btn-on);border-color:var(--line-hi)} body.page-copy .part .n{width:28px;height:28px;border-radius:50%;background:#d63031;display:grid;place-items:center;font-weight:700;font-size:13px} body.page-copy .part h3{font-size:16px;font-weight:700} body.page-copy .part h3 small{font-weight:400;font-size:12px;color:var(--mute);margin-left:8px;font-family:var(--mono)} body.page-copy .part p{font-size:13.5px;color:#ccc;margin-top:2px} /* ---------- steps ---------- */ body.page-copy .steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} body.page-copy .steps li{counter-increment:s;background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 58px;position:relative;font-size:14px;color:#ddd} body.page-copy .steps li::before{content:counter(s);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:8px;background:#fff;color:#111;font-weight:700;font-size:14px;display:grid;place-items:center;font-family:var(--mono)} body.page-copy .steps li b{display:block;color:#fff;font-size:15px;margin-bottom:2px} body.page-copy .kbd{font-family:var(--mono);font-size:12px;padding:1px 7px;border-radius:6px;background:#1a1a1a;border:1px solid #444;color:#fff;white-space:nowrap} body.page-copy .tip{margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--mustard);font-size:13.5px;display:flex;gap:12px;align-items:flex-start} body.page-copy .tip .icon-warning{margin-top:3px} /* ---------- safety ---------- */ body.page-copy .two{display:grid;grid-template-columns:1fr 1fr;gap:20px} body.page-copy .card-w{background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:26px 28px} body.page-copy .card-w h3{font-size:19px;margin-bottom:4px} body.page-copy .card-w .lead{font-size:13px;color:#555;margin-bottom:14px} body.page-copy .rule{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #e6e6e6;font-size:14px} body.page-copy .rule:first-of-type{border-top:none} body.page-copy .tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap} body.page-copy .tag.del{background:#ffe3e3;color:#b0262a} body.page-copy .tag.keep{background:#dff3e5;color:#1d6b3a} body.page-copy .tag.warn{background:#fff1cc;color:#7a5a00} body.page-copy .guard{margin-top:16px;padding:14px 16px;border-radius:12px;background:#f3f3f3;font-size:13px;color:#333} body.page-copy .guard ol{padding-left:1.3em;margin-top:4px} body.page-copy .big-rule{margin-top:20px;text-align:center;font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:.04em} body.page-copy .big-rule em{font-style:normal;color:var(--amber)} /* ---------- NG table ---------- */ body.page-copy .ng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px} body.page-copy .ng{background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:16px 18px} body.page-copy .ng code{font-family:var(--mono);font-size:13px;color:var(--ng);font-weight:700} body.page-copy .ng p{font-size:13.5px;color:#ccc;margin:6px 0 10px} body.page-copy .ng .tag{font-size:11.5px} body.page-copy .timeout{margin-top:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch} body.page-copy .formula{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:14px;padding:22px} body.page-copy .formula .eq{font-family:var(--mono);font-size:clamp(14px,1.8vw,18px);color:#fff;margin:8px 0 14px} body.page-copy .formula .eq b{color:var(--amber)} body.page-copy .calc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:#ccc} body.page-copy .calc input{width:110px;font:inherit;font-family:var(--mono);background:#1a1a1a;border:1px solid #444;color:#fff;border-radius:8px;padding:7px 10px} body.page-copy .calc select{font:inherit;background:#1a1a1a;border:1px solid #444;color:#fff;border-radius:8px;padding:7px 8px} body.page-copy .calc-out{margin-top:12px;font-family:var(--mono);font-size:22px;color:var(--ok)} body.page-copy .calc-out small{font-size:12px;color:var(--mute);margin-left:6px} body.page-copy .kill{list-style:none;display:flex;flex-direction:column;gap:8px} body.page-copy .kill li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--btn);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13.5px;color:#ddd} body.page-copy .kill code{font-family:var(--mono);font-size:12px;color:var(--stop)} /* ---------- misc info ---------- */ body.page-copy .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} body.page-copy .mini h3{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px} body.page-copy .mini h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} body.page-copy .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px} body.page-copy .kv dt{color:var(--mute)} body.page-copy .kv dd{color:#eee} body.page-copy .mono{font-family:var(--mono);font-size:12.5px} body.page-copy .log{margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.8;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;padding:12px 14px;overflow-x:auto;white-space:pre;color:#ddd} body.page-copy .log .r{color:var(--ng)} body.page-copy .log .m{color:#888} body.page-copy .cmd{display:flex;align-items:center;gap:10px;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:12px;padding:12px 12px 12px 18px;font-family:var(--mono);font-size:14px;margin-bottom:18px} body.page-copy .cmd code{flex:1;overflow-x:auto;white-space:nowrap} body.page-copy .cmd code::before{content:"$ ";color:var(--mute)} body.page-copy .copy-btn{font:inherit;font-size:12.5px;font-family:var(--sans);padding:7px 14px;border-radius:8px;border:1px solid var(--line-hi);background:var(--btn);color:#fff;cursor:pointer;white-space:nowrap} body.page-copy .copy-btn:hover{background:var(--btn-hi)} body.page-copy .notes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} body.page-copy .notes li{padding:14px 16px;border-radius:12px;background:var(--btn);border:1px solid var(--line);font-size:13.5px;color:#ddd;display:flex;gap:12px} body.page-copy .notes li .icon-warning{margin-top:4px} /* ---------- CTA / footer ---------- */ body.page-copy .cta{text-align:center;padding:100px 20px 40px} body.page-copy .cta h2{font-size:clamp(26px,3.8vw,40px);letter-spacing:.05em;line-height:1.35} body.page-copy .cta p{color:#ddd;font-weight:300;margin:12px 0 26px} body.page-copy .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} body.page-copy .btn-g{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px;border:1px solid var(--line-hi);transition:transform .2s,background-color .2s} body.page-copy .btn-g:hover{transform:translateY(-2px)} body.page-copy .btn-g.green{background:var(--green)} body.page-copy .btn-g.mustard{background:var(--mustard)} body.page-copy footer{border-top:1px solid rgba(255,255,255,.08);padding:26px 20px 40px;text-align:center;font-size:12.5px;color:var(--mute)} body.page-copy footer nav{display:flex;gap:18px;justify-content:center;margin-bottom:8px;flex-wrap:wrap} body.page-copy footer a{text-decoration:none;color:#ccc} body.page-copy footer a:hover{color:#fff} html.root-page-copy.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} html.root-page-copy.js .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media (max-width:980px){ body.page-copy .feat-grid,body.page-copy .pane-grid{grid-template-columns:1fr} body.page-copy .purpose{grid-template-columns:1fr;gap:10px} body.page-copy .flow li{grid-template-columns:1fr;gap:8px} body.page-copy .sim{grid-template-columns:1fr} body.page-copy .anat{grid-template-columns:1fr} body.page-copy .two,body.page-copy .timeout{grid-template-columns:1fr} body.page-copy .three{grid-template-columns:1fr} body.page-copy .notes{grid-template-columns:1fr} body.page-copy .steps{grid-template-columns:1fr 1fr} } @media (max-width:560px){body.page-copy .steps{grid-template-columns:1fr}} @media (max-width:640px){ body.page-copy .topnav a:not(.dl){display:none} body.page-copy .box{padding:22px 16px} body.page-copy .text-card{padding:22px 20px} body.page-copy .dtable td:first-child{white-space:normal;min-width:6.5em} body.page-copy .exec{padding:14px} body.page-copy .kill li{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ body.page-copy *,body.page-copy *::before,body.page-copy *::after{animation:none!important;transition:none!important} body.page-copy .reveal{opacity:1;transform:none} } body.page-work *{box-sizing:border-box;margin:0;padding:0} body.page-work{--base:#555;--veil:rgba(0,0,0,.6);--panel:#000;--btn:rgba(50,50,50,.9);--line:rgba(120,120,120,.45);--green:rgba(44,87,43,.9);--wine:rgba(87,43,78,.9);--amber:#f5c451;--ink:#fff;--dim:#bdbdbd;--paper:#fff;--paper-ink:#111;--sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace} html.root-page-work{scroll-behavior:smooth;scroll-padding-top:110px}body.page-work{background:var(--base);color:var(--ink);font:15px/1.85 var(--sans);-webkit-font-smoothing:antialiased}body.page-work .veil{background:var(--veil);min-height:100vh}body.page-work a{color:inherit;text-underline-offset:4px}body.page-work img{display:block;max-width:100%;height:auto}body.page-work button{font:inherit;color:inherit;cursor:pointer}body.page-work button,body.page-work a{-webkit-tap-highlight-color:transparent}body.page-work :focus-visible{outline:3px solid var(--amber);outline-offset:5px;border-radius:5px}body.page-work .skip{position:fixed;top:8px;left:8px;transform:translateY(-150%);z-index:100;background:#fff;color:#111;padding:10px}body.page-work .skip:focus{transform:none}body.page-work .wrap{max-width:1200px;margin:auto;padding-inline:24px}body.page-work .topbar{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.88);border-bottom:1px solid #ffffff15;backdrop-filter:blur(12px)}body.page-work .topbar-in{display:flex;align-items:center;gap:24px;min-height:75px}body.page-work .brand{display:flex;gap:10px;align-items:center;white-space:nowrap;text-decoration:none;font-weight:750;letter-spacing:.08em;font-size:19px}body.page-work .brand-mark{display:flex;align-items:flex-end;gap:3px;padding:7px;width:31px;height:31px;background:#272727;border:1px solid #606060;border-radius:8px}body.page-work .brand-mark i{width:4px;background:var(--amber);border-radius:1px;height:8px}body.page-work .brand-mark i:nth-child(2){height:12px}body.page-work .brand-mark i:nth-child(3){height:16px}body.page-work .topnav{margin-left:auto;display:flex;gap:3px;align-items:center}body.page-work .topnav a{font-size:12px;padding:8px 10px;text-decoration:none;color:#ccc;white-space:nowrap;border-radius:8px}body.page-work .topnav a:hover{background:#ffffff18;color:#fff}body.page-work .topnav .dl{background:var(--green);color:#fff}body.page-work .hero{padding-top:58px;text-align:center}body.page-work .eyebrow{color:var(--amber);font-size:12px;letter-spacing:.13em;font-weight:650}body.page-work .main-title{font-size:clamp(52px,7vw,86px);letter-spacing:.12em;line-height:1.2;margin:13px 0 16px;padding-left:.12em;font-weight:800}body.page-work .tagline{font-size:clamp(23px,3.2vw,37px);font-weight:650;letter-spacing:.035em;line-height:1.55}body.page-work .hero-lede{color:#ccc;max-width:690px;margin:20px auto 0}body.page-work .chips{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:23px}body.page-work .chip{background:var(--btn);border:1px solid #555;font-size:12px;border-radius:99px;padding:4px 12px;color:#ddd}body.page-work .chip:first-child{color:var(--amber)}body.page-work .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}body.page-work .btn-g{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--green);border:1px solid #657063;border-radius:12px;padding:13px 23px;font-weight:700;text-decoration:none;transition:transform .18s}body.page-work .btn-g:hover{transform:translateY(-2px);filter:brightness(1.15)}body.page-work .btn-g.wine{background:var(--wine);border-color:#76526e}body.page-work .cta-caution{font-size:12px;max-width:740px;margin:14px auto 0;color:#ccc}body.page-work .cta-caution strong{color:var(--amber)}body.page-work .hero-screen{margin-top:38px;background:var(--panel);padding:18px;border-radius:20px;text-align:left;box-shadow:0 22px 65px #0004}body.page-work .frame-label{display:flex;justify-content:space-between;align-items:center;color:#bbb;font-size:11px;padding:1px 4px 12px;gap:8px}body.page-work .frame-label span:first-child{letter-spacing:.08em}body.page-work .shot{width:100%;padding:0;background:#f6f6f6;border:0;border-radius:10px;overflow:hidden;display:block;position:relative}body.page-work .shot img{width:100%}body.page-work .shot::after{content:'拡大 ↗';position:absolute;right:12px;bottom:12px;background:#000d;border:1px solid #ffffff50;padding:4px 10px;border-radius:6px;color:#fff;font-size:11px;box-shadow:0 2px 8px #0003}body.page-work .shot:hover::after{background:var(--wine)}body.page-work .annotations{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:24px 6px 8px;counter-reset:parts}body.page-work .annotations li{display:grid;grid-template-columns:28px 1fr;gap:10px;counter-increment:parts;font-size:12px;color:#bdbdbd}body.page-work .annotations li::before{content:counter(parts);font:600 12px var(--mono);background:var(--wine);border:1px solid #845876;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;color:#fff}body.page-work .annotations b{display:block;font-size:14px;color:#fff;margin-bottom:4px}body.page-work .sample-note{font-size:12px;color:#bdbdbd;margin-top:13px;text-align:center}body.page-work .block{padding-top:100px}body.page-work .sec-head{margin-bottom:28px;display:flex;justify-content:space-between;gap:28px;align-items:flex-end}body.page-work .sec-head h2{font-size:clamp(26px,3vw,36px);line-height:1.5;letter-spacing:.045em;margin-top:7px}body.page-work .sec-head p{font-size:14px;color:#c4c4c4;max-width:420px}body.page-work .box{background:var(--panel);border-radius:20px;padding:30px}body.page-work .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}body.page-work .text-card{background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:25px 23px;box-shadow:0 8px 25px #0002;min-width:0}body.page-work .text-card .category{font-size:11px;color:#636363;letter-spacing:.06em;display:block;margin-bottom:16px}body.page-work .text-card h3{font-size:20px;line-height:1.6;margin-bottom:10px}body.page-work .text-card p{font-size:13px;line-height:1.95;color:#333}body.page-work .text-card .small-rule{margin-top:18px;padding-top:12px;border-top:1px solid #ddd;font-size:12px;color:#555}body.page-work .gallery-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}body.page-work .gallery-nav a{border:1px solid #666;border-radius:99px;text-decoration:none;padding:6px 16px;font-size:12px;background:#000}body.page-work .gallery-nav a:hover{border-color:var(--amber)}body.page-work .gallery-intro{color:#bbb;font-size:13px;margin-bottom:24px}body.page-work .workflow-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}body.page-work .workflow-heading h3{font-size:21px}body.page-work .workflow-heading p{color:#bbb;font-size:12px}body.page-work .flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}body.page-work .screen-card{background:#000;border:1px solid #ffffff12;border-radius:18px;overflow:hidden;min-width:0}body.page-work .screen-card .shot{border-radius:0}body.page-work .screen-copy{padding:22px 24px 25px}body.page-work .step-line{display:flex;align-items:center;gap:12px;margin-bottom:10px}body.page-work .step-num{display:inline-grid;place-items:center;background:var(--wine);color:#fff;border-radius:8px;width:30px;height:30px;font:600 13px var(--mono);flex-shrink:0}body.page-work .screen-copy h4{font-size:19px;line-height:1.6}body.page-work .screen-copy p{font-size:13px;color:#c5c5c5}body.page-work .screen-copy p+p{margin-top:9px}body.page-work .caption{font-size:11px!important;color:#a7a7a7!important;margin-top:12px}body.page-work .flow-end{background:var(--green);border:1px solid #64705b;padding:21px 25px;border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}body.page-work .flow-end p{font-size:13px;color:#ddd}body.page-work .flow-end a{font-weight:700;white-space:nowrap}body.page-work .subsection{padding-top:64px}body.page-work .subhead{display:flex;gap:20px;justify-content:space-between;align-items:flex-end;margin-bottom:20px}body.page-work .subhead h3{font-size:25px;letter-spacing:.03em}body.page-work .subhead p{max-width:500px;color:#bfbfbf;font-size:13px}body.page-work .rule-strip{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}body.page-work .rule-strip>div{border-radius:14px;padding:22px 24px;border:1px solid #505050;background:#292929}body.page-work .rule-strip b{display:block;font-size:15px;margin-bottom:5px}body.page-work .rule-strip p{font-size:13px;color:#ccc}body.page-work .formula{color:var(--amber);font-family:var(--mono);font-size:14px;margin:9px 0}body.page-work .export-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}body.page-work .export-pair .screen-copy h3{font-size:21px;margin-bottom:10px}body.page-work .bullet{padding-left:1.15em;color:#ccc;font-size:13px}body.page-work .bullet li+li{margin-top:7px}body.page-work .important{border-left:3px solid var(--amber);padding:16px 21px;background:rgba(87,66,43,.45);border-radius:0 12px 12px 0;font-size:13px;margin-top:18px;color:#e0d7c6}body.page-work .important strong{color:var(--amber)}body.page-work .safety-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:stretch}body.page-work .safety-grid .text-card{display:flex;flex-direction:column;justify-content:center}body.page-work .safety-grid h3{font-size:23px}body.page-work .safety-grid .shot{border-radius:12px}body.page-work .quiet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}body.page-work .quiet-grid article{padding:23px 24px;background:#000;border-radius:15px}body.page-work .quiet-grid h3{font-size:16px;margin-bottom:8px}body.page-work .quiet-grid p{font-size:13px;color:#c4c4c4}body.page-work .install-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;counter-reset:install}body.page-work .install-grid li{counter-increment:install;background:#000;border:1px solid #444;border-radius:15px;padding:22px}body.page-work .install-grid li::before{content:counter(install);font:600 13px var(--mono);display:grid;place-items:center;width:28px;height:28px;background:#fff;color:#111;border-radius:7px;margin-bottom:15px}body.page-work .install-grid b{display:block;font-size:16px;margin-bottom:7px}body.page-work .install-grid p{font-size:13px;color:#bbb}body.page-work .warning-panel{margin-top:22px;border:1px solid #886c37;background:#30291d;border-radius:17px;padding:27px 30px}body.page-work .warning-panel h3{font-size:19px;color:var(--amber);margin-bottom:10px}body.page-work .warning-panel p{font-size:14px;color:#e0d8c9}body.page-work .warning-panel p+p{margin-top:10px}body.page-work .warning-panel a{color:#fff}body.page-work .faq-list{border-top:1px solid #555}body.page-work .faq-list details{border-bottom:1px solid #555;padding:19px 3px}body.page-work .faq-list summary{font-size:16px;font-weight:650;cursor:pointer;padding-right:22px}body.page-work .faq-list p{font-size:14px;color:#ccc;max-width:860px;margin-top:13px}body.page-work .download{padding-bottom:80px}body.page-work .download-panel{text-align:center;padding:42px 32px;background:#000;border-radius:22px}body.page-work .download-panel h2{font-size:clamp(28px,4vw,42px);line-height:1.5;letter-spacing:.04em;margin-top:8px}body.page-work .download-panel .intro{color:#ccc;font-size:14px;margin:16px 0}body.page-work .download-meta{display:flex;justify-content:center;gap:10px 25px;flex-wrap:wrap;margin:22px 0;color:#bbb;font-size:12px}body.page-work .download-meta b{color:#fff}body.page-work .download-note{max-width:730px;margin:18px auto 0;text-align:left;font-size:12px;line-height:1.95;background:#252525;border:1px solid #484848;border-radius:12px;padding:16px 20px;color:#ccc}body.page-work .download-note strong{color:#fff}body.page-work .download-note a{overflow-wrap:anywhere}body.page-work .site-footer{border-top:1px solid #ffffff20;padding:27px 0 35px;color:#aaa;font-size:12px}body.page-work .footer-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}body.page-work .site-footer b{color:#ddd;letter-spacing:.08em}body.page-work .footer-links{display:flex;gap:17px}body.page-work .zoom-dialog{width:min(1240px,96vw);max-width:none;max-height:95vh;margin:auto;border:1px solid #666;border-radius:15px;padding:16px;background:#161616;color:#fff;overflow:auto}body.page-work .zoom-dialog::backdrop{background:#000e}body.page-work .zoom-dialog .modal-bar{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:12px}body.page-work .zoom-dialog button{border:1px solid #666;background:#333;padding:7px 14px;border-radius:8px;font-size:13px}body.page-work .zoom-dialog img{width:100%;border-radius:7px}body.page-work .modal-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:12px}body.page-work .zoom-dialog:not([open]){display:none}body.page-work #zoom-caption{font-size:13px;color:#ccc}body.page-work .noscript-note{font-size:12px;text-align:center;color:#ddd;padding-top:14px} @media(min-width:1000px){body.page-work .hero-screen{max-width:1070px;margin-inline:auto}} @media(max-width:1000px){body.page-work .topbar-in{gap:12px;flex-wrap:wrap;padding-block:12px}body.page-work .topnav{gap:0}body.page-work .topnav a{padding:6px 8px}body.page-work .feat-grid{grid-template-columns:1fr 1fr}body.page-work .sec-head{align-items:start}body.page-work .quiet-grid{grid-template-columns:1fr}body.page-work .install-grid{grid-template-columns:1fr 1fr}} @media(max-width:700px){html.root-page-work{scroll-padding-top:132px}body.page-work .wrap{padding-inline:18px}body.page-work .topbar-in{gap:8px;min-height:0}body.page-work .brand{font-size:17px}body.page-work .topnav{width:100%;margin:0;justify-content:space-between;gap:2px;flex-wrap:wrap}body.page-work .topnav a{font-size:10px;padding:5px 6px}body.page-work .hero{padding-top:37px}body.page-work .main-title{margin:13px 0 15px;font-size:56px}body.page-work .tagline{font-size:23px}body.page-work .hero-lede{font-size:13px;text-align:left}body.page-work .chip{font-size:10px;padding:4px 9px}body.page-work .cta-row{gap:9px}body.page-work .btn-g{font-size:13px;padding:12px 16px}body.page-work .cta-caution{text-align:left;font-size:11px}body.page-work .hero-screen{padding:10px;border-radius:13px;margin-top:26px}body.page-work .frame-label{font-size:9px;padding-bottom:9px}body.page-work .annotations{grid-template-columns:1fr;padding:18px 7px 7px;gap:15px}body.page-work .annotations li{font-size:12px}body.page-work .sample-note{text-align:left;font-size:11px}body.page-work .block{padding-top:65px}body.page-work .sec-head{display:block;margin-bottom:23px}body.page-work .sec-head h2{font-size:28px}body.page-work .sec-head p{margin-top:13px;font-size:13px}body.page-work .feat-grid,body.page-work .flow-grid,body.page-work .export-pair,body.page-work .rule-strip,body.page-work .safety-grid{grid-template-columns:1fr}body.page-work .text-card{padding:23px}body.page-work .feat-grid .text-card h3{font-size:20px}body.page-work .feat-grid .text-card .category{margin-bottom:9px}body.page-work .text-card .small-rule{margin-top:12px}body.page-work .gallery-nav{gap:7px}body.page-work .gallery-nav a{font-size:11px;padding:5px 12px}body.page-work .workflow-heading,body.page-work .subhead{display:block}body.page-work .workflow-heading p,body.page-work .subhead p{margin-top:9px}body.page-work .workflow-heading h3{font-size:20px}body.page-work .screen-copy{padding:20px}body.page-work .screen-copy h4{font-size:18px}body.page-work .shot::after{right:7px;bottom:7px;font-size:10px;padding:2px 7px}body.page-work .flow-end{display:block;padding:20px}body.page-work .flow-end a{display:inline-block;margin-top:10px}body.page-work .subsection{padding-top:43px}body.page-work .subhead h3{font-size:23px}body.page-work .box{padding:20px}body.page-work .safety-grid{gap:14px}body.page-work .quiet-grid{gap:12px}body.page-work .install-grid{grid-template-columns:1fr;gap:10px}body.page-work .install-grid li{padding:20px 20px 20px 66px;position:relative}body.page-work .install-grid li::before{position:absolute;left:20px;top:21px}body.page-work .warning-panel{padding:23px 21px}body.page-work .warning-panel h3{font-size:18px}body.page-work .warning-panel p{font-size:13px}body.page-work .faq-list summary{font-size:14px}body.page-work .faq-list p{font-size:13px}body.page-work .download-panel{padding:29px 20px}body.page-work .download-panel h2{font-size:28px}body.page-work .download-panel .btn-g{width:100%}body.page-work .download-note{padding:14px}body.page-work .download-meta{gap:5px 14px}body.page-work .download{padding-bottom:50px}body.page-work .footer-in{gap:12px}body.page-work .zoom-dialog{padding:10px}body.page-work .zoom-dialog .modal-bar{align-items:start}body.page-work .zoom-dialog button{padding:7px 11px}body.page-work .modal-bottom{flex-wrap:wrap}body.page-work #zoom-caption{font-size:11px}} @media(prefers-reduced-motion:reduce){html.root-page-work{scroll-behavior:auto}body.page-work *,body.page-work *::before,body.page-work *::after{transition:none!important;animation:none!important}} /* Small-screen header and semantic headline wrapping. */ body.page-work .tagline .phrase{display:inline-block;white-space:nowrap} @media(max-width:640px){ body.page-work .topbar-in{flex-wrap:nowrap;justify-content:space-between;min-height:68px} body.page-work .topnav{width:auto;margin-left:auto;flex-wrap:nowrap;justify-content:flex-end} body.page-work .topnav a:not(.dl){display:none} body.page-work .topnav a.dl{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 14px;font-size:12px} html.root-page-work{scroll-padding-top:88px} } body.page-pref * { margin: 0; padding: 0; box-sizing: border-box; } body.page-pref { font-family: 'Segoe UI', 'Hiragino Sans', 'Meiryo', sans-serif; background: #f0f2f5; color: #333; } body.page-pref .header { background: linear-gradient(135deg, #4285f4, #34a853); color: white; padding: 18px 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } body.page-pref .header h1 { font-size: 22px; font-weight: 600; } body.page-pref .header p { font-size: 13px; opacity: 0.9; margin-top: 4px; } body.page-pref .main { display: flex; height: calc(100vh - 70px); } /* Left: map */ body.page-pref .map-panel { flex: 1; min-width: 0; position: relative; } body.page-pref #map { height: 100%; width: 100%; } body.page-pref .map-count { position: absolute; bottom: 12px; left: 12px; z-index: 1000; background: rgba(255,255,255,0.95); padding: 6px 14px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-size: 12px; color: #555; backdrop-filter: blur(4px); } body.page-pref .map-count b { color: #1a73e8; font-size: 15px; } /* Right: table */ body.page-pref .table-panel { width: 520px; flex-shrink: 0; display: flex; flex-direction: column; background: white; border-left: 1px solid #e0e0e0; transition: width 0.3s ease; position: relative; } body.page-pref .table-panel.collapsed { width: 48px; min-width: 48px; } body.page-pref .table-panel.collapsed .table-inner { display: none; } body.page-pref .table-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; } body.page-pref .toggle-bar { display: flex; align-items: center; justify-content: center; padding: 6px 4px; background: #f8f9fa; border-bottom: 1px solid #e0e0e0; cursor: pointer; transition: background 0.15s; flex-shrink: 0; } body.page-pref .toggle-bar:hover { background: #e3f2fd; } body.page-pref .toggle-bar .toggle-label { font-size: 11px; color: #666; margin-left: 4px; } body.page-pref .toggle-bar .toggle-icon { font-size: 14px; color: #888; transition: transform 0.3s; } body.page-pref .table-panel.collapsed .toggle-bar { flex-direction: column; padding: 12px 4px; gap: 8px; } body.page-pref .table-panel.collapsed .toggle-bar .toggle-icon { transform: rotate(180deg); } body.page-pref .table-panel.collapsed .toggle-bar .toggle-label { writing-mode: vertical-rl; font-size: 12px; letter-spacing: 2px; } body.page-pref .controls { padding: 12px 16px; border-bottom: 1px solid #e0e0e0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } body.page-pref .search-wrap { flex: 1; display: flex; align-items: center; border: 2px solid #e0e0e0; border-radius: 8px; padding: 0 10px; transition: border-color 0.2s; } body.page-pref .search-wrap:focus-within { border-color: #4285f4; } body.page-pref .search-wrap .icon { font-size: 16px; color: #aaa; } body.page-pref .search-wrap input { flex: 1; border: none; outline: none; padding: 9px 8px; font-size: 13px; background: transparent; } body.page-pref .search-wrap .clear-btn { display: none; background: none; border: none; font-size: 11px; color: #888; cursor: pointer; padding: 4px 8px; border-radius: 5px; transition: all 0.15s; white-space: nowrap; font-family: inherit; } body.page-pref .search-wrap .clear-btn:hover { color: #c62828; background: #fce4ec; } body.page-pref .search-wrap .clear-btn.show { display: flex; align-items: center; gap: 2px; } body.page-pref .stats { font-size: 12px; color: #666; background: #f0f2f5; padding: 6px 12px; border-radius: 6px; white-space: nowrap; } body.page-pref .table-scroll { flex: 1; overflow: auto; } body.page-pref table { width: 100%; border-collapse: collapse; table-layout: fixed; } body.page-pref colgroup .col-num { width: 36px; } body.page-pref colgroup .col-code { width: 76px; } body.page-pref colgroup .col-addr { width: auto; } body.page-pref colgroup .col-rank { width: 50px; } body.page-pref colgroup .col-loc { width: 100px; } body.page-pref colgroup .col-map { width: 80px; } body.page-pref thead { background: #f8f9fa; position: sticky; top: 0; z-index: 1; } body.page-pref th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #5f6368; border-bottom: 2px solid #e0e0e0; white-space: nowrap; } body.page-pref td { padding: 8px 12px; font-size: 12px; border-bottom: 1px solid #f0f0f0; } body.page-pref tr { cursor: pointer; transition: background 0.1s; } body.page-pref tr:hover { background: #f0f7ff; } body.page-pref tr.hidden { display: none; } body.page-pref tr.active { background: #e3f2fd !important; } body.page-pref .code { font-family: 'Consolas', 'Monaco', monospace; font-weight: 600; color: #1a73e8; font-size: 12px; } body.page-pref .addr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.page-pref .coord { font-family: 'Consolas', 'Monaco', monospace; font-size: 12px; color: #888; line-height: 1.6; } body.page-pref .coord-lat { color: #333; } body.page-pref .coord-lng { color: #333; } body.page-pref .rank-cell { text-align: center; } body.page-pref .map-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #4285f4; color: white; text-decoration: none; border-radius: 5px; font-size: 11px; font-weight: 600; transition: all 0.2s; white-space: nowrap; } body.page-pref .map-link:hover { background: #1a73e8; } body.page-pref .map-link svg { width: 12px; height: 12px; fill: white; } body.page-pref .no-results { text-align: center; padding: 30px; color: #999; font-size: 14px; } @media (max-width: 900px) { body.page-pref .main { flex-direction: column-reverse; } body.page-pref .map-panel { height: 45vh; } body.page-pref .table-panel { width: 100% !important; height: 55vh; } body.page-pref .table-panel.collapsed { height: 44px !important; min-width: unset; width: 100% !important; } body.page-pref .table-panel.collapsed .toggle-bar { flex-direction: row; padding: 8px 16px; } body.page-pref .table-panel.collapsed .toggle-bar .toggle-label { writing-mode: horizontal-tb; letter-spacing: normal; } } body.page-map { margin: 0; padding: 0; overflow: hidden; } body.page-map #map { height: 100vh; width: 100vw; } body.page-map .locate-btn { position: absolute; bottom: 30px; right: 20px; z-index: 1000; background: #e1f5fe; padding: 10px; border-radius: 50%; box-shadow: 0 4px 6px rgba(0,0,0,0.3); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid #fff; cursor: pointer; transition: background 0.3s; } /* 凡例パネル */ body.page-map .legend { position: absolute; top: 10px; right: 10px; z-index: 1000; background: rgba(255,255,255,0.93); padding: 10px 14px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); font-size: 13px; font-family: sans-serif; line-height: 1.8; } body.page-map .legend-title { font-weight: bold; margin-bottom: 4px; font-size: 14px; } body.page-map .legend-item { display: flex; align-items: center; gap: 6px; } body.page-map .legend-dot { width: 14px; height: 20px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } body.page-map .street-label { background: transparent; border: none; box-shadow: none; color: #e60000; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white; } body.page-copy.page-copy .u-page-copy-1{margin-top:8px} body.page-copy.page-copy .u-page-copy-2{color:#fff} body.page-copy.page-copy .u-page-copy-3{text-align:center} body.page-copy.page-copy .u-page-copy-4{top:5.45%} body.page-copy.page-copy .u-page-copy-5{top:10.65%} body.page-copy.page-copy .u-page-copy-6{top:25.6%} body.page-copy.page-copy .u-page-copy-7{top:53.9%} body.page-copy.page-copy .u-page-copy-8{top:59.2%} body.page-copy.page-copy .u-page-copy-9{color:#777} body.page-copy.page-copy .u-page-copy-10{font-weight:700} body.page-copy.page-copy .u-page-copy-11{font-size:13px;color:#bbb;margin-top:12px} body.page-copy.page-copy .u-page-copy-12{background:var(--ng)} body.page-copy.page-copy .u-page-copy-13{background:var(--run)} body.page-copy.page-copy .u-page-copy-14{margin-top:16px} body.page-copy.page-copy .u-page-copy-15{background:var(--amber)} body.page-copy.page-copy .u-page-copy-16{font-size:13.5px;color:#bbb} body.page-copy.page-copy .u-page-copy-17{overflow-x:auto} body.page-copy.page-copy .u-page-copy-18{font-size:12.5px;color:var(--mute);margin-top:18px} body.page-copy.page-copy .u-page-copy-19{font-weight:400;color:#bbb;font-size:12.5px} body.page-work.page-work .u-page-work-20{font-size:16px} body.page-pref.page-pref .u-page-pref-21{background:#1B8A2E;color:#fff;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700} body.page-pref.page-pref .u-page-pref-22{background:#E65100;color:#fff;padding:1px 6px;border-radius:3px;font-size:10px;font-weight:700} body.page-pref.page-pref .u-page-pref-23{display:none;} body.page-pref.page-pref .u-page-pref-24{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,0.95);box-shadow:0 1px 4px rgba(0,0,0,0.35);} body.page-pref.page-pref .u-page-pref-25{font-family:sans-serif;min-width:200px;} body.page-pref.page-pref .u-page-pref-26{font-size:13px;} body.page-pref.page-pref .u-page-pref-27{color:#fff;padding:1px 6px;border-radius:3px;font-size:10px;margin-left:6px} body.page-pref.page-pref .u-page-pref-28{font-size:12px;color:#555} body.page-pref.page-pref .u-page-pref-29{font-size:10.5px;color:#1a73e8} body.page-pref.page-pref .u-page-pref-30{margin:4px 0;border:none;border-top:1px solid #eee} body.page-pref.page-pref .u-page-pref-31{font-size:10.5px;color:#888} body.page-pref.page-pref .u-page-pref-32{display:inline-block;margin-top:4px;padding:3px 10px;background:#4285f4;color:#fff;text-decoration:none;border-radius:4px;font-size:11px} body.page-map.page-map .u-page-map-33{height:20px;} body.page-map.page-map .u-page-map-34{font-family:sans-serif; min-width:200px;} body.page-map.page-map .u-page-map-35{font-size:14px;} body.page-map.page-map .u-page-map-36{font-size:12px; color:#555;} body.page-map.page-map .u-page-map-37{margin:4px 0;} body.page-map.page-map .u-page-map-38{font-size:12px;} body.page-map.page-map .u-page-map-39{font-size:11px; color:#888;} /* 以下は名前が固有の共通部品。ページ由来の一般セレクターとは分離する。 */ /* サイト共通ヘッダー。既存ページの要素指定から独立させる。 */ .xitsw-site-header,.xitsw-site-header * { box-sizing: border-box; } .xitsw-site-header { position: fixed; inset: 0 0 auto; z-index: 1100; display: block; flex: 0 0 auto; width: 100%; margin: 0; padding: 0; border: 0; border-bottom: 1px solid #303030; background: #000; color: #fff; text-align: left; letter-spacing: normal; font: 400 14px/1.5 "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } .xitsw-site-header .xitsw-header-inner { width: 100%; max-width: 1200px; min-height: 80px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .xitsw-site-header .xitsw-wordmark { display: block; margin: 0; padding: 0; color: #fff; font: 500 28px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; } .xitsw-site-header .xitsw-home-link,.xitsw-site-header .xitsw-terms-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 9px 18px; border: 1px solid #777; border-radius: 0; background: transparent; color: #fff; text-decoration: none; font: 400 12px/1.5 "Helvetica Neue", Arial, "Yu Gothic", sans-serif; letter-spacing: .08em; white-space: nowrap; } .xitsw-site-header .xitsw-home-link:hover { background: #fff; color: #000; } .xitsw-site-header .xitsw-home-link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } .xitsw-site-header .xitsw-header-actions { display:flex; align-items:center; gap:10px; margin:0; padding:0; } .xitsw-site-header .xitsw-terms-link:hover,.xitsw-site-header .xitsw-terms-link[aria-current="page"] { background:#242424; border-color:#ddd; } .xitsw-site-header .xitsw-terms-link:focus-visible { outline:2px solid #fff; outline-offset:4px; } @media(max-width:400px){ .xitsw-site-header .xitsw-header-inner { gap:8px; } .xitsw-site-header .xitsw-wordmark { font-size:20px; letter-spacing:.12em; } .xitsw-site-header .xitsw-header-actions { gap:6px; } .xitsw-site-header .xitsw-home-link,.xitsw-site-header .xitsw-terms-link { padding:9px 8px; letter-spacing:0; } } /* 商品内ナビを独立配置し、二重の追従表示を避ける。 */ .xitsw-shared-page .topbar { position: relative; top: auto; } /* 固定値の差し引きを使わず地図を伸長。署名は通常フローでスクロール可能。 */ body.xitsw-map-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .xitsw-map-page > .header { flex: 0 0 auto; } .xitsw-map-page > .main { flex: 1 0 440px; height: auto; min-height: 440px; } .xitsw-map-page .map-panel { min-height: 440px; } .xitsw-map-page #map { position: absolute; inset: 0; height: 100%; } .xitsw-map-page .table-panel { min-height: 0; } .xitsw-map-page .table-scroll { min-height: 0; height: 420px; } @media (max-width: 900px) { .xitsw-map-page > .main { flex: 0 0 auto; } .xitsw-map-page .map-panel { flex: none; min-height: 320px; height: 45svh; } .xitsw-map-page .table-panel { flex: none; height: 400px; } .xitsw-map-page .table-scroll table { min-width: 640px; } .xitsw-map-page .search-wrap { min-width: 0; } .xitsw-map-page .search-wrap input { min-width: 0; width: 100%; } } @media (max-width: 768px) { .xitsw-site-header .xitsw-header-inner { min-height: 72px; padding: 14px 18px; gap: 12px; } .xitsw-site-header .xitsw-wordmark { font-size: 24px; } /* 明示した配布導線だけを隠し、説明文・他のボタンは残す。 */ .xitsw-shared-page [data-xitsw-download] { display: none !important; } .xitsw-shared-page .topbar-in { flex-wrap: wrap; } .xitsw-shared-page .topnav { display: flex; width: 100%; margin-left: 0; flex-wrap: wrap; justify-content: flex-start; } .xitsw-shared-page .topnav a:not([data-xitsw-download]) { display: inline-flex; align-items: center; min-height: 44px; } /* 原本の注意書きは保持したまま、小画面での字詰まりを緩和する。 */ .xitsw-work-page .cta-caution { font-size: 12px; line-height: 2; letter-spacing: .02em; overflow-wrap: anywhere; } } /* 商品固有の既存フッターを保持し、その外側へサイト共通署名を配置する。 */ .xitsw-site-footer,.xitsw-site-footer * { box-sizing: border-box; } body.xitsw-shared-page footer.xitsw-site-footer { position: static; display: block; flex: 0 0 auto; width: 100%; max-width: none; margin: 0; padding: 28px 24px; border: 0; border-top: 1px solid #303030; background: #000; color: #bdbdbd; text-align: center; font: 400 13px/1.6 "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; letter-spacing: .06em; } body.xitsw-shared-page footer.xitsw-site-footer .xitsw-footer-credit { display: block; margin: 0; padding: 0; color: inherit; font: inherit; } /* ============================================================ * 固定ヘッダー用のレイアウト契約。高さはCSSが初期値、JS実測が優先。 * 本文のscroll-marginだけで補正し、htmlのscroll-paddingとの二重加算を防ぐ。 * safe-areaはノッチ端末の縦横回転時にもブラウザーが再計算する。 * ============================================================ */ body[class*="page-"] { margin:0; padding:0; } body.xitsw-shared-page { --xitsw-header-height:81px; padding-top:var(--xitsw-header-height); } .xitsw-site-header { padding-top:env(safe-area-inset-top,0px); } .xitsw-site-header .xitsw-header-inner { padding-left:max(24px,env(safe-area-inset-left,0px)); padding-right:max(24px,env(safe-area-inset-right,0px)); } html.root-page-copy,html.root-page-work,html.root-page-pref,html.root-page-extensions { scroll-padding-top:0; } body.xitsw-shared-page [id] { scroll-margin-top:calc(var(--xitsw-header-height) + 16px); } body.xitsw-shared-page > .xitsw-site-header { z-index:1100; } body.xitsw-shared-page .topbar { position:relative; top:auto; } body.page-work .skip { z-index:1200; } body.page-index,body.page-index * { box-sizing:border-box; } /* 拡張ページをCopyVerify/作業統計と同じ素材・余白・ボタン文法へ合わせる。 * 内容と9項目の構造はそのまま。独自の黒一色背景だけを置換する。 */ body.page-extensions { background:#555; color:#fff; font:15px/1.85 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; } body.page-extensions,body.page-extensions * { box-sizing:border-box; } body.page-extensions .veil { background:rgba(0,0,0,.6); min-height:calc(100svh - var(--xitsw-header-height)); } body.page-extensions .main-container { padding:58px 24px 72px; } body.page-extensions .submain-title { text-align:center; font-size:clamp(24px,3.6vw,38px); font-weight:700; letter-spacing:.06em; margin-bottom:36px; } body.page-extensions .content-area { background:#000; border-radius:20px; padding:36px; grid-template-columns:44px minmax(0,1fr) minmax(0,1.2fr); gap:24px; } body.page-extensions .list-container { min-width:0; } body.page-extensions .feature-list { margin:0; padding:0; } body.page-extensions .feature-item { border:1px solid rgba(120,120,120,.45); border-radius:12px; margin-bottom:8px; background:rgba(50,50,50,.9); overflow:hidden; } body.page-extensions .feature-item.active { background:rgba(60,60,60,.95); border-color:rgba(120,120,120,.7); } body.page-extensions .feature-btn { padding:14px 16px; font-size:14px; line-height:1.7; } body.page-extensions .arrow-btn { border-radius:10px; border-color:rgba(120,120,120,.45); background:rgba(50,50,50,.9); } body.page-extensions .side-display { top:calc(var(--xitsw-header-height) + 24px); border-radius:18px; border-color:rgba(120,120,120,.45); background:#111; overflow:hidden; } body.page-extensions .download-link { border:1px solid rgba(120,120,120,.45); border-radius:10px; background:rgba(44,87,43,.9); color:#fff; font-weight:600; font-size:14px; padding:12px 20px; } body.page-extensions .download-link:hover { background:rgba(60,105,59,.95); } body.page-extensions :focus-visible { outline-color:#f5c451; } /* 動的なランク色はJSがクラス名を選ぶだけとし、HTMLテンプレートにCSSを残さない。 */ body.page-pref .rank-a{background:#1B8A2E}body.page-pref .rank-bp{background:#00897B}body.page-pref .rank-b{background:#1565C0}body.page-pref .rank-cp{background:#F57F17}body.page-pref .rank-c{background:#E65100}body.page-pref .rank-other{background:#666} /* 回転直後のwidth遷移中も一覧が画面幅を超えない。表だけを内部スクロールする。 */ body.page-pref .table-panel { min-width:0; max-width:100%; } body.page-pref .table-inner,body.page-pref .controls,body.page-pref .search-wrap { min-width:0; } @media(max-width:768px){ body.xitsw-shared-page { --xitsw-header-height:73px; } body.xitsw-shared-page .topbar-in { flex-wrap:wrap; } body.xitsw-shared-page .topnav { display:flex; width:100%; margin-left:0; flex-wrap:wrap; justify-content:flex-start; } body.xitsw-shared-page .topnav a:not([data-xitsw-download]) { display:inline-flex; align-items:center; min-height:44px; } body.xitsw-shared-page [data-xitsw-download] { display:none!important; } .xitsw-site-header .xitsw-header-inner { padding-left:max(18px,env(safe-area-inset-left,0px)); padding-right:max(18px,env(safe-area-inset-right,0px)); } body.page-extensions .main-container { padding:37px 18px 44px; } body.page-extensions .content-area { padding:20px; grid-template-columns:minmax(0,1fr); gap:20px; } } @media(prefers-reduced-motion:reduce){html.root-page-copy,html.root-page-work{scroll-behavior:auto}} /* ============================================================ * Chrome拡張機能：CopyVerifyの実値をページ限定で再利用。 * 既存5HTMLと他ページ用セレクターは一切変更しない。 * 以下の複製は背景・書体・ヒーロー・カード・余白・ボタンを参照と同じにする。 * ============================================================ */ body.extension-copyverify *{margin:0;padding:0;box-sizing:border-box} body.extension-copyverify{ --base:#555555; --veil:rgba(0,0,0,.6); --panel:#000000; --btn:rgba(50,50,50,.9); --btn-hi:rgba(70,70,70,.9); --btn-on:rgba(60,60,60,.95); --line:rgba(80,80,80,.5); --line-hi:rgba(120,120,120,.7); --wine:rgba(87,43,78,.9); --green:rgba(44,87,43,.9); --mustard:rgba(87,66,43,.9); --amber:#f5c451; --ink:#ffffff; --dim:#aaaaaa; --mute:#888888; --paper:#ffffff; --paper-ink:#111111; /* アプリ画面由来のシグナル色 */ --run:#1a8cff; --ng:#ff6b6b; --ok:#4fd18b; --stop:#ff9f43; --sans:"IBM Plex Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; } html.root-page-extensions{scroll-behavior:smooth} body.extension-copyverify{font-family:var(--sans);background:var(--base);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} body.extension-copyverify .sim>div,body.extension-copyverify .box,body.extension-copyverify .text-card{min-width:0} body.extension-copyverify .veil{background:var(--veil);min-height:100vh} body.extension-copyverify a{color:inherit} body.extension-copyverify :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px} body.extension-copyverify img{max-width:100%;display:block} /* ---------- top bar ---------- */ body.extension-copyverify .topbar{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)} body.extension-copyverify .topbar-in{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:20px} body.extension-copyverify .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.06em} body.extension-copyverify .brand-mark{width:26px;height:26px;border-radius:7px;background:var(--btn);border:1px solid var(--line-hi);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--ok)} body.extension-copyverify .topnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap} body.extension-copyverify .topnav a{font-size:13px;text-decoration:none;color:var(--dim);padding:6px 12px;border-radius:8px;transition:background-color .2s,color .2s} body.extension-copyverify .topnav a:hover{background:rgba(255,255,255,.08);color:var(--ink)} body.extension-copyverify .topnav a.dl{background:var(--green);color:var(--ink)} /* ---------- hero ---------- */ body.extension-copyverify .hero{max-width:1200px;margin:0 auto;padding:56px 20px 40px;text-align:center} body.extension-copyverify .main-title{font-size:clamp(44px,7vw,72px);font-weight:700;letter-spacing:.08em;line-height:1.1} body.extension-copyverify .submain-title{font-size:clamp(15px,2vw,20px);font-weight:300;letter-spacing:.08em;margin-top:14px;color:#ddd} body.extension-copyverify .hero-lede{max-width:760px;margin:22px auto 0;font-size:15px;color:var(--dim)} body.extension-copyverify .hero-lede b{color:var(--ink);font-weight:500} body.extension-copyverify .chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px} body.extension-copyverify .chip{font-size:12px;padding:5px 12px;border-radius:999px;background:var(--btn);border:1px solid var(--line);color:#ddd} body.extension-copyverify .chip i{font-style:normal;color:var(--ok);margin-right:6px} /* ---------- detail cards ---------- */ body.extension-copyverify .text-card{padding:28px 30px;border-radius:18px;background:var(--paper);color:var(--paper-ink);box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;flex-direction:column} body.extension-copyverify .text-card h3{font-size:21px;line-height:1.4;margin-bottom:10px} body.extension-copyverify .text-card p{font-size:14.5px;line-height:1.9;color:#222} body.extension-copyverify .text-card p+p{margin-top:8px} body.extension-copyverify .text-card ul{margin:10px 0 0 1.2em;font-size:14px;color:#333;line-height:1.85} body.extension-copyverify .text-card .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#777;margin-bottom:8px;text-transform:uppercase;display:flex;align-items:center;gap:8px} body.extension-copyverify .text-card .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block} body.extension-copyverify .term{margin-top:auto;background:#111;color:#e8e8e8;border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.8;overflow-x:auto;white-space:pre} body.extension-copyverify .text-card .term{margin-top:16px} body.extension-copyverify .term .r{color:var(--ng)} body.extension-copyverify .term .g{color:var(--ok)} body.extension-copyverify .term .m{color:#888} body.extension-copyverify .term .o{color:var(--stop)} body.extension-copyverify .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} body.extension-copyverify .purpose{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-bottom:22px} body.extension-copyverify .purpose .q{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.5;letter-spacing:.03em} body.extension-copyverify .purpose .q em{font-style:normal;color:var(--amber)} body.extension-copyverify .purpose p{font-size:14.5px;color:#ccc} body.extension-copyverify .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px} body.extension-copyverify .btn-g.wine{background:var(--wine)} /* ---------- pane detail ---------- */ body.extension-copyverify .pane-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:22px} body.extension-copyverify .pane-grid .wide{grid-column:1/-1} body.extension-copyverify .mock-pane{background:#9c9c9c;color:#111;border-radius:12px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.9;white-space:pre;overflow-x:auto} body.extension-copyverify .mock-exec{background:#000;border:1px solid #2a2a2a;color:#fff;border-radius:12px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.9;white-space:pre;overflow-x:auto} body.extension-copyverify .mock-exec .r{color:var(--ng)} body.extension-copyverify .mock-exec .m{color:#999} body.extension-copyverify .pane h3{font-size:16px;margin-bottom:10px;display:flex;gap:10px;align-items:center} body.extension-copyverify .pane h3 .n{width:24px;height:24px;border-radius:50%;background:#d63031;display:grid;place-items:center;font-size:12px} body.extension-copyverify .pane .cap{font-size:13px;color:#bbb;margin-top:10px} body.extension-copyverify .dtable{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:12px} body.extension-copyverify .dtable th,body.extension-copyverify .dtable td{text-align:left;padding:10px 12px;border-bottom:1px solid #2c2c2c;vertical-align:top} body.extension-copyverify .dtable th{font-weight:500;color:var(--mute);font-size:12px;letter-spacing:.06em} body.extension-copyverify .dtable td:first-child{white-space:nowrap;color:#fff;font-weight:500} body.extension-copyverify .dtable td{color:#ccc} body.extension-copyverify .dtable code{font-family:var(--mono);font-size:12.5px;color:#fff;background:#1a1a1a;border:1px solid #333;border-radius:5px;padding:1px 6px} /* ---------- flow ---------- */ body.extension-copyverify .flow{list-style:none;display:flex;flex-direction:column;gap:0} body.extension-copyverify .flow li{display:grid;grid-template-columns:150px 1fr 210px;gap:20px;padding:18px 4px;border-bottom:1px solid #2c2c2c;align-items:start} body.extension-copyverify .flow li:last-child{border-bottom:none} body.extension-copyverify .flow .st{font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px} body.extension-copyverify .flow .st i{width:10px;height:10px;border-radius:50%;background:var(--run);flex-shrink:0} body.extension-copyverify .flow .st.pre i{background:#888}body.extension-copyverify .flow .st.end i{background:var(--ok)} body.extension-copyverify .flow p{font-size:14px;color:#ccc} body.extension-copyverify .flow .hd{font-family:var(--mono);font-size:12.5px;color:#fff;background:#111;border:1px solid #333;border-radius:8px;padding:6px 10px;justify-self:start} body.extension-copyverify .flow .hd small{display:block;color:var(--mute);font-size:10.5px;letter-spacing:.06em;font-family:var(--sans)} /* ---------- sections ---------- */ body.extension-copyverify section.block{max-width:1200px;margin:0 auto;padding:90px 20px 0} body.extension-copyverify .sec-head{text-align:center;margin-bottom:30px} body.extension-copyverify .sec-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:700;letter-spacing:.06em;line-height:1.3} body.extension-copyverify .sec-head p{margin-top:10px;font-size:15px;font-weight:300;color:#ddd;letter-spacing:.04em} body.extension-copyverify .box{background:var(--panel);border-radius:20px;padding:36px} /* ---------- simulator (signature) ---------- */ body.extension-copyverify .sim{display:grid;grid-template-columns:1fr 230px;gap:24px} body.extension-copyverify .stages{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap} body.extension-copyverify .stage{flex:1;min-width:110px;padding:9px 12px;border-radius:10px;background:var(--btn);border:1px solid var(--line);font-size:13px;color:var(--mute);display:flex;justify-content:space-between;gap:8px;transition:all .3s} body.extension-copyverify .stage b{font-weight:500;color:inherit} body.extension-copyverify .stage span{font-family:var(--mono);font-size:11px} body.extension-copyverify .stage.now{color:var(--ink);border-color:var(--run);background:rgba(26,140,255,.18)} body.extension-copyverify .stage.done{color:#ddd} body.extension-copyverify .stage.done span{color:var(--ok)} body.extension-copyverify .exec{background:#000;border:1px solid #2a2a2a;border-radius:12px;padding:18px 20px;font-size:14px;min-height:300px} body.extension-copyverify .exec h4{font-size:16px;font-weight:700;margin-bottom:10px} body.extension-copyverify .bar{height:8px;background:#3a3a3a;border-radius:99px;overflow:hidden;margin-bottom:12px} body.extension-copyverify .bar i{display:block;height:100%;width:0;background:#e9e9e9;border-radius:99px;transition:width .12s linear} body.extension-copyverify .prow{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:12.5px;flex-wrap:wrap} body.extension-copyverify .psub{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:2px} body.extension-copyverify .bytes{margin-top:14px;padding:10px 12px;border-radius:8px;background:#0d0d0d;border:1px solid #222;font-family:var(--mono);font-size:12px;line-height:1.9;overflow:hidden} body.extension-copyverify .bytes .lab{color:var(--mute);display:inline-block;width:46px} body.extension-copyverify .bytes .b{display:inline-block;width:2.4ch;text-align:center;border-radius:3px;transition:background .15s} body.extension-copyverify .bytes .b.eq{color:var(--ok)} body.extension-copyverify .bytes .b.ne{background:var(--ng);color:#000} body.extension-copyverify .errs{margin-top:14px;padding-top:12px;border-top:1px solid #333} body.extension-copyverify .errs h5{color:var(--ng);font-size:13.5px;font-weight:700;margin-bottom:4px} body.extension-copyverify .errs li{list-style:none;color:var(--ng);font-size:13px;font-family:var(--mono);animation:extension-copyverify-fadeUp .4s both} body.extension-copyverify .result{margin-top:12px;font-weight:700;font-size:14px} @keyframes extension-copyverify-fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} body.extension-copyverify .ctrl{display:flex;gap:0;margin-bottom:14px} body.extension-copyverify .ctrl button{font:inherit;font-size:14px;font-weight:700;border:none;cursor:pointer;padding:10px 14px;transition:filter .2s,opacity .2s} body.extension-copyverify .run-btn{flex:1;background:var(--run);color:#fff;border-radius:10px 0 0 10px} body.extension-copyverify .run-btn:disabled{opacity:.5;cursor:not-allowed} body.extension-copyverify .stop-btn{width:120px;background:#fff;color:#d63031;border-radius:0 10px 10px 0} body.extension-copyverify .stop-btn:disabled{opacity:.35;cursor:not-allowed} body.extension-copyverify .ctrl button:not(:disabled):hover{filter:brightness(1.08)} body.extension-copyverify .timepane{background:#9c9c9c;color:#111;border-radius:12px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:2} body.extension-copyverify .timepane .t{display:flex;justify-content:space-between} body.extension-copyverify .timepane hr{border:none;border-top:1px solid #6a6a6a;margin:4px 0} body.extension-copyverify .timepane .tot{font-weight:700} body.extension-copyverify .timepane .stopc{color:#b34700;font-weight:700} body.extension-copyverify .sim-note{font-size:12px;color:var(--mute);margin-top:12px} /* ---------- anatomy ---------- */ body.extension-copyverify .anat{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start} body.extension-copyverify .anat-fig{position:relative;width:min(100%,420px);margin:0 auto} body.extension-copyverify .anat-fig img{border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08)} body.extension-copyverify .pin{position:absolute;left:calc(3.15% - 13px);margin-top:-13px;width:26px;height:26px;border-radius:50%;background:#d63031;color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;border:2px solid #000;cursor:pointer;transition:transform .2s} body.extension-copyverify .pin.on,body.extension-copyverify .pin:hover{transform:scale(1.2);background:var(--amber);color:#111} body.extension-copyverify .parts{list-style:none;display:flex;flex-direction:column;gap:8px} body.extension-copyverify .part{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 16px;border-radius:12px;background:var(--btn);border:1px solid var(--line);transition:background-color .2s,border-color .2s;cursor:default} body.extension-copyverify .part.on{background:var(--btn-on);border-color:var(--line-hi)} body.extension-copyverify .part .n{width:28px;height:28px;border-radius:50%;background:#d63031;display:grid;place-items:center;font-weight:700;font-size:13px} body.extension-copyverify .part h3{font-size:16px;font-weight:700} body.extension-copyverify .part h3 small{font-weight:400;font-size:12px;color:var(--mute);margin-left:8px;font-family:var(--mono)} body.extension-copyverify .part p{font-size:13.5px;color:#ccc;margin-top:2px} /* ---------- steps ---------- */ body.extension-copyverify .steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} body.extension-copyverify .steps li{counter-increment:s;background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:18px 18px 18px 58px;position:relative;font-size:14px;color:#ddd} body.extension-copyverify .steps li::before{content:counter(s);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:8px;background:#fff;color:#111;font-weight:700;font-size:14px;display:grid;place-items:center;font-family:var(--mono)} body.extension-copyverify .steps li b{display:block;color:#fff;font-size:15px;margin-bottom:2px} body.extension-copyverify .kbd{font-family:var(--mono);font-size:12px;padding:1px 7px;border-radius:6px;background:#1a1a1a;border:1px solid #444;color:#fff;white-space:nowrap} body.extension-copyverify .tip{margin-top:16px;padding:14px 18px;border-radius:12px;background:var(--mustard);font-size:13.5px;display:flex;gap:12px;align-items:flex-start} body.extension-copyverify .tip .icon-warning{margin-top:3px} /* ---------- safety ---------- */ body.extension-copyverify .two{display:grid;grid-template-columns:1fr 1fr;gap:20px} body.extension-copyverify .card-w{background:var(--paper);color:var(--paper-ink);border-radius:18px;padding:26px 28px} body.extension-copyverify .card-w h3{font-size:19px;margin-bottom:4px} body.extension-copyverify .card-w .lead{font-size:13px;color:#555;margin-bottom:14px} body.extension-copyverify .rule{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid #e6e6e6;font-size:14px} body.extension-copyverify .rule:first-of-type{border-top:none} body.extension-copyverify .tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap} body.extension-copyverify .tag.del{background:#ffe3e3;color:#b0262a} body.extension-copyverify .tag.keep{background:#dff3e5;color:#1d6b3a} body.extension-copyverify .tag.warn{background:#fff1cc;color:#7a5a00} body.extension-copyverify .guard{margin-top:16px;padding:14px 16px;border-radius:12px;background:#f3f3f3;font-size:13px;color:#333} body.extension-copyverify .guard ol{padding-left:1.3em;margin-top:4px} body.extension-copyverify .big-rule{margin-top:20px;text-align:center;font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:.04em} body.extension-copyverify .big-rule em{font-style:normal;color:var(--amber)} /* ---------- NG table ---------- */ body.extension-copyverify .ng-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px} body.extension-copyverify .ng{background:var(--btn);border:1px solid var(--line);border-radius:12px;padding:16px 18px} body.extension-copyverify .ng code{font-family:var(--mono);font-size:13px;color:var(--ng);font-weight:700} body.extension-copyverify .ng p{font-size:13.5px;color:#ccc;margin:6px 0 10px} body.extension-copyverify .ng .tag{font-size:11.5px} body.extension-copyverify .timeout{margin-top:22px;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch} body.extension-copyverify .formula{background:#0d0d0d;border:1px solid #2a2a2a;border-radius:14px;padding:22px} body.extension-copyverify .formula .eq{font-family:var(--mono);font-size:clamp(14px,1.8vw,18px);color:#fff;margin:8px 0 14px} body.extension-copyverify .formula .eq b{color:var(--amber)} body.extension-copyverify .calc{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px;color:#ccc} body.extension-copyverify .calc input{width:110px;font:inherit;font-family:var(--mono);background:#1a1a1a;border:1px solid #444;color:#fff;border-radius:8px;padding:7px 10px} body.extension-copyverify .calc select{font:inherit;background:#1a1a1a;border:1px solid #444;color:#fff;border-radius:8px;padding:7px 8px} body.extension-copyverify .calc-out{margin-top:12px;font-family:var(--mono);font-size:22px;color:var(--ok)} body.extension-copyverify .calc-out small{font-size:12px;color:var(--mute);margin-left:6px} body.extension-copyverify .kill{list-style:none;display:flex;flex-direction:column;gap:8px} body.extension-copyverify .kill li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;background:var(--btn);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:13.5px;color:#ddd} body.extension-copyverify .kill code{font-family:var(--mono);font-size:12px;color:var(--stop)} /* ---------- misc info ---------- */ body.extension-copyverify .three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} body.extension-copyverify .mini h3{font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px} body.extension-copyverify .mini h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} body.extension-copyverify .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px} body.extension-copyverify .kv dt{color:var(--mute)} body.extension-copyverify .kv dd{color:#eee} body.extension-copyverify .mono{font-family:var(--mono);font-size:12.5px} body.extension-copyverify .log{margin-top:14px;font-family:var(--mono);font-size:12px;line-height:1.8;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:10px;padding:12px 14px;overflow-x:auto;white-space:pre;color:#ddd} body.extension-copyverify .log .r{color:var(--ng)} body.extension-copyverify .log .m{color:#888} body.extension-copyverify .cmd{display:flex;align-items:center;gap:10px;background:#0d0d0d;border:1px solid #2a2a2a;border-radius:12px;padding:12px 12px 12px 18px;font-family:var(--mono);font-size:14px;margin-bottom:18px} body.extension-copyverify .cmd code{flex:1;overflow-x:auto;white-space:nowrap} body.extension-copyverify .cmd code::before{content:"$ ";color:var(--mute)} body.extension-copyverify .copy-btn{font:inherit;font-size:12.5px;font-family:var(--sans);padding:7px 14px;border-radius:8px;border:1px solid var(--line-hi);background:var(--btn);color:#fff;cursor:pointer;white-space:nowrap} body.extension-copyverify .copy-btn:hover{background:var(--btn-hi)} body.extension-copyverify .notes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} body.extension-copyverify .notes li{padding:14px 16px;border-radius:12px;background:var(--btn);border:1px solid var(--line);font-size:13.5px;color:#ddd;display:flex;gap:12px} body.extension-copyverify .notes li .icon-warning{margin-top:4px} /* ---------- CTA / footer ---------- */ body.extension-copyverify .cta{text-align:center;padding:100px 20px 40px} body.extension-copyverify .cta h2{font-size:clamp(26px,3.8vw,40px);letter-spacing:.05em;line-height:1.35} body.extension-copyverify .cta p{color:#ddd;font-weight:300;margin:12px 0 26px} body.extension-copyverify .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} body.extension-copyverify .btn-g{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:12px;font-weight:700;text-decoration:none;font-size:15px;border:1px solid var(--line-hi);transition:transform .2s,background-color .2s} body.extension-copyverify .btn-g:hover{transform:translateY(-2px)} body.extension-copyverify .btn-g.green{background:var(--green)} body.extension-copyverify .btn-g.mustard{background:var(--mustard)} body.extension-copyverify footer{border-top:1px solid rgba(255,255,255,.08);padding:26px 20px 40px;text-align:center;font-size:12.5px;color:var(--mute)} body.extension-copyverify footer nav{display:flex;gap:18px;justify-content:center;margin-bottom:8px;flex-wrap:wrap} body.extension-copyverify footer a{text-decoration:none;color:#ccc} body.extension-copyverify footer a:hover{color:#fff} html.root-page-extensions.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease} html.root-page-extensions.js .reveal.in{opacity:1;transform:none} /* ---------- responsive ---------- */ @media (max-width:980px){ body.extension-copyverify .feat-grid,body.extension-copyverify .pane-grid{grid-template-columns:1fr} body.extension-copyverify .purpose{grid-template-columns:1fr;gap:10px} body.extension-copyverify .flow li{grid-template-columns:1fr;gap:8px} body.extension-copyverify .sim{grid-template-columns:1fr} body.extension-copyverify .anat{grid-template-columns:1fr} body.extension-copyverify .two,body.extension-copyverify .timeout{grid-template-columns:1fr} body.extension-copyverify .three{grid-template-columns:1fr} body.extension-copyverify .notes{grid-template-columns:1fr} body.extension-copyverify .steps{grid-template-columns:1fr 1fr} } @media (max-width:560px){body.extension-copyverify .steps{grid-template-columns:1fr}} @media (max-width:640px){ body.extension-copyverify .topnav a:not(.dl){display:none} body.extension-copyverify .box{padding:22px 16px} body.extension-copyverify .text-card{padding:22px 20px} body.extension-copyverify .dtable td:first-child{white-space:normal;min-width:6.5em} body.extension-copyverify .exec{padding:14px} body.extension-copyverify .kill li{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ body.extension-copyverify *,body.extension-copyverify *::before,body.extension-copyverify *::after{animation:none!important;transition:none!important} body.extension-copyverify .reveal{opacity:1;transform:none} } /* 商品ナビは共通固定ヘッダーの下の通常フロー。768px以下も説明リンクは残す。 */ body.extension-copyverify .topbar { position:relative; top:auto; } body.extension-copyverify .topbar-in { flex-wrap:wrap; } body.extension-copyverify .brand { flex-shrink:0; } body.extension-copyverify .topnav { min-width:0; } /* 旧ページのbody省略記法と副題の下余白だけは参照側の初期値へ戻す。 */ body.extension-copyverify { font-size:16px; font-weight:400; } body.extension-copyverify .submain-title { margin-bottom:0; line-height:inherit; } /* 写真未提供でも機能説明は常時可読。枠は画像の縦横比を捏造せず最低高だけ確保。 */ body.extension-copyverify .extension-figure { margin:18px 0 0; min-width:0; } body.extension-copyverify #features > .extension-figure { margin:0 0 22px; } body.extension-copyverify .extension-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; min-height:180px; padding:24px; border:1px dashed #555; border-radius:12px; background:#111; color:#aaa; text-align:center; font-size:12.5px; line-height:1.8; overflow-wrap:anywhere; } body.extension-copyverify .extension-placeholder strong { color:#ddd; font-size:14px; font-weight:500; } body.extension-copyverify .extension-placeholder code { font-family:var(--mono); } body.extension-copyverify .extension-figure img { width:auto; height:auto; max-width:100%; margin:auto; border-radius:12px; } body.extension-copyverify .extension-disclaimer { font-size:14.5px; line-height:1.9; color:#ccc; overflow-wrap:anywhere; } body.extension-copyverify .cta .extension-download-note { font-size:12.5px; color:var(--mute); margin-top:18px; } body.extension-copyverify .extension-page-footer { margin-top:90px; } @media(max-width:768px) { body.extension-copyverify .topnav { width:100%; margin-left:0; justify-content:flex-start; } body.extension-copyverify .topnav a:not([data-xitsw-download]) { display:inline-flex; align-items:center; min-height:44px; } } @media(prefers-reduced-motion:reduce) { html.root-page-extensions { scroll-behavior:auto; } } /* 共通規約・免責。トップのセレクターや既存の商品部品には作用しない。 */ @media(max-width:400px){ body.page-copy .dtable { table-layout:fixed; width:100%; } body.page-copy .dtable th,body.page-copy .dtable td,body.page-copy .dtable td:first-child { white-space:normal; overflow-wrap:anywhere; padding:8px 5px; font-size:11px; } body.page-copy .dtable code,body.page-copy .kbd { white-space:normal; overflow-wrap:anywhere; } body.page-copy .steps li>div { min-width:0; overflow-wrap:anywhere; } } body .xitsw-legal,body .xitsw-legal * { box-sizing:border-box; } body .xitsw-legal { flex:0 0 auto; width:calc(100% - 40px); max-width:1120px; margin:64px auto; padding:32px; border:1px solid #484848; border-radius:18px; background:#141414; color:#ddd; text-align:left; font:400 15px/1.95 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; overflow-wrap:anywhere; } body .xitsw-legal h2 { margin:0 0 20px; padding:0; font-size:26px; line-height:1.5; color:#fff; } body .xitsw-legal p { margin:0 0 18px; padding:0; font:inherit; color:inherit; } body .xitsw-legal a { color:#f5c451; text-underline-offset:4px; } body .xitsw-legal a:focus-visible { outline:2px solid #f5c451; outline-offset:4px; } body .xitsw-liability-note { margin:22px 0 0; padding:18px 20px; border-left:3px solid #f5c451; background:#24221c; color:#eee; font-size:14px; line-height:1.95; overflow-wrap:anywhere; } body .xitsw-legal .xitsw-liability-note { margin:22px 0; padding:18px 20px; } body.page-map { overflow:auto; background:#222; } body.page-map .xitsw-map-viewport { position:relative; height:100vh; width:100%; } body.page-map #map { width:100%; } body.page-terms,body.page-terms * { box-sizing:border-box; } body.page-terms { background:#222; color:#ddd; font:400 15px/1.95 -apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; } body.page-terms .terms-main { max-width:1000px; margin:0 auto; padding:64px 32px 72px; overflow-wrap:anywhere; } body.page-terms a { color:#f5c451; text-underline-offset:4px; } body.page-terms :focus-visible { outline:2px solid #f5c451; outline-offset:4px; } body.page-terms .terms-kicker { color:#bbb; font-size:13px; letter-spacing:.1em; margin:0 0 18px; } body.page-terms h1 { color:#fff; margin:0 0 22px; font-size:clamp(36px,6vw,60px); line-height:1.4; letter-spacing:.06em; } body.page-terms h1 span { font-size:.45em; letter-spacing:0; } body.page-terms .terms-lead { font-size:clamp(22px,3vw,30px); color:#fff; line-height:1.65; margin:0 0 24px; } body.page-terms .terms-draft { background:#302b20; border-left:3px solid #f5c451; padding:18px 22px; margin:26px 0; } body.page-terms .terms-meta { display:grid; grid-template-columns:150px minmax(0,1fr); padding:20px 24px; border:1px solid #555; border-radius:12px; margin:0; gap:12px 20px; } body.page-terms .terms-meta dt { color:#bbb; } body.page-terms .terms-meta dd { margin:0; color:#fff; } body.page-terms .terms-services { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:32px 0 48px; } body.page-terms .terms-services a { display:flex; align-items:center; padding:14px 18px; background:#161616; border:1px solid #555; border-radius:10px; text-decoration:none; } body.page-terms .terms-services a:hover { background:#303030; } body.page-terms .terms-toc { padding:28px 32px; background:#111; border-radius:18px; } body.page-terms .terms-toc h2 { margin:0 0 18px; font-size:23px; color:#fff; } body.page-terms .terms-toc ol { display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; padding-left:1.8em; margin:0; } body.page-terms .terms-toc a { display:inline-block; padding:5px 0; } body.page-terms .terms-articles section { padding:38px 0; border-bottom:1px solid #505050; } body.page-terms .terms-articles h2 { color:#fff; font-size:clamp(20px,2.8vw,26px); line-height:1.6; margin:0 0 20px; } body.page-terms .terms-articles p { margin:0 0 16px; } body.page-terms .terms-articles p:last-child { margin-bottom:0; } body.page-terms .terms-service-notes { margin:0; } body.page-terms .terms-service-notes dt { margin-top:22px; font-weight:700; } body.page-terms .terms-service-notes dd { margin:8px 0 0; } body.page-terms .terms-source-note { color:#bbb; font-size:14px; } body.page-terms .extension-disclaimer { background:#111; border-radius:12px; padding:24px; } body.page-terms .terms-end { display:flex; flex-wrap:wrap; gap:24px; margin-top:36px; } @media(max-width:768px) { body .xitsw-legal { width:calc(100% - 32px); margin:40px auto; padding:24px 20px; font-size:14px; } body .xitsw-legal h2 { font-size:23px; } body .xitsw-liability-note,body .xitsw-legal .xitsw-liability-note { padding:16px; } body.page-terms .terms-main { padding:36px 18px 48px; } body.page-terms .terms-meta { grid-template-columns:1fr; padding:20px; gap:4px; } body.page-terms .terms-meta dd:not(:last-child) { margin-bottom:12px; } body.page-terms .terms-services { grid-template-columns:1fr; gap:8px; margin:24px 0 32px; } body.page-terms .terms-toc { padding:24px 20px; } body.page-terms .terms-toc ol { grid-template-columns:1fr; gap:4px; } body.page-terms .terms-articles section { padding:30px 0; } body.page-terms .extension-disclaimer { padding:20px; } }