@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap"); /* ============================================================ はねつーる（HANETOOL）新ツール共通スタイル（本番）各ページは or に --brand / --brand-dark / --tint を上書きするだけで配色が変わる。既存ツール（pdf/csv/gazo/moji）の見た目に合わせてある（角丸なし・白パネル・薄い枠線）。 ============================================================ */ :root{ --panel:#ffffff; --border:#dde3ee; --border-strong:#c7cee0; --text:#1e2837; --muted:#6b7585; --brand:#4f46e5; --brand-dark:#3a31b8; --tint:#eef0ff; --danger:#e11d48; --ok:#0f8a5f; --shadow-sm:0 1px 2px rgba(30,40,60,.06); --shadow-md:0 6px 16px rgba(30,40,60,.09); --shadow-lg:0 20px 44px rgba(50,40,90,.16); } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans", "Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif; color:var(--text); font-size:14px; line-height:1.65; min-height:100vh; background: radial-gradient(1200px 600px at 12% -8%, var(--tint) 0%, transparent 55%), radial-gradient(1000px 560px at 100% 0%, var(--tint) 0%, transparent 50%), linear-gradient(180deg,#eef1f6,#f4f6fa); background-attachment:fixed; } body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background:url("/assets/car-bg.jpg") center center / cover no-repeat fixed; filter:grayscale(1); opacity:.10; } header,main,footer,.toolbar{ position:relative; z-index:1; } /* ===== ヘッダー ===== */ header.app-header{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:0 22px; min-height:56px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:sticky; top:0; z-index:40; } .app-header .brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; } /* ロゴ画像が用意できるまでの文字ロゴ。既存ロゴ（明朝＋紫グラデ）の雰囲気に寄せる */ .brand-word{ font-family:"Times New Roman","Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif; font-size:25px; font-weight:700; letter-spacing:.01em; line-height:1; background:linear-gradient(105deg,var(--brand-dark),var(--brand) 55%,var(--brand-dark)); -webkit-background-clip:text; background-clip:text; color:transparent; white-space:nowrap; } /* ツールページのヘッダーロゴ。既存ツール（gazo/moji/csv）と同じ 30px に合わせる */ .brand-logo{ height:30px; width:auto; max-width:100%; display:block; } .app-header .spacer{ flex:1; } /* 「ブラウザ内で処理」は安全のしるしなので、ツールのブランド色ではなく既存6ツール（HANEPDF・HANECSV・HANECopy）と同じ緑に固定する。ブランド色を使うと HANEHanko が赤、HANETanni が黄になり、警告のように見えてしまう。 */ .privacy-badge{ font-size:12px; color:#0f7a39; background:#e7f9ef; border:1px solid #b6ecc9; padding:4px 11px; white-space:nowrap; font-weight:600; } .test-badge{ font-size:11.5px; font-weight:800; color:#8a5300; background:#fff4d6; border:1px solid #f0d18a; padding:4px 10px; white-space:nowrap; letter-spacing:.02em; } /* ヘッダー内ナビ（テスト中ツール間の移動） */ .topnav{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .topnav a,.topnav span.current{ box-sizing:border-box; height:32px; padding:0 11px; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#46566a; text-decoration:none; border:1px solid transparent; white-space:nowrap; } .topnav a:hover{ color:var(--brand-dark); background:var(--tint); } .topnav span.current{ color:var(--brand-dark); border-color:var(--brand); background:var(--tint); } /* ===== レイアウト ===== */ main{ max-width:1080px; margin:0 auto; padding:22px 18px 40px; } main.narrow{ max-width:860px; } main.wide{ max-width:1240px; } .page-head{ margin:0 0 18px; } .page-head h1{ font-size:21px; font-weight:900; margin:0 0 4px; letter-spacing:.01em; } .page-head p{ margin:0; font-size:13.5px; color:var(--muted); } .panel{ background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow-md); padding:18px 20px 20px; margin-bottom:16px; } .panel > h2{ font-size:14.5px; font-weight:800; margin:0 0 13px; padding-bottom:8px; border-bottom:2px solid var(--brand); color:#1e2837; } .panel > h2 .h2note{ font-size:12px; font-weight:600; color:var(--muted); margin-left:8px; } .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .row.top{ align-items:flex-start; } .grow{ flex:1 1 220px; min-width:0; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; } @media (max-width:820px){ .split{ grid-template-columns:1fr; } } /* ===== フォーム部品 ===== */ label.fld{ display:block; margin-bottom:12px; } label.fld > span.lb{ display:block; font-size:12.5px; font-weight:700; color:#46566a; margin-bottom:4px; } input[type=text],input[type=number],input[type=search],input[type=date],input[type=time], input[type=datetime-local],select,textarea{ width:100%; font-family:inherit; font-size:14px; color:var(--text); background:#fff; border:1px solid var(--border-strong); border-radius:0; padding:8px 10px; line-height:1.5; } input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--tint); } input[type=color]{ width:46px; height:34px; padding:2px; border:1px solid var(--border-strong); background:#fff; cursor:pointer; } textarea{ resize:vertical; min-height:120px; line-height:1.75; } select{ cursor:pointer; } .hint{ font-size:12px; color:var(--muted); margin:4px 0 0; } .chk{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; cursor:pointer; user-select:none; } .chk input{ width:16px; height:16px; accent-color:var(--brand); cursor:pointer; margin:0; } /* 幅を内容に合わせたい入力 */ .w-auto{ width:auto; } .w-90{ width:90px; } .w-140{ width:140px; } /* ===== ボタン ===== */ .btn{ font-family:inherit; font-size:13.5px; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:0 15px; background:#fff; color:#3c4a5e; border:1px solid var(--border-strong); border-radius:0; cursor:pointer; transition:background .12s,border-color .12s,color .12s,transform .08s; white-space:nowrap; } .btn:hover{ background:#f5f7fb; border-color:var(--brand); color:var(--brand-dark); } .btn:active{ transform:translateY(1px); } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; } .btn.primary{ background:var(--brand); border-color:var(--brand); color:#fff; } .btn.primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; } .btn.big{ min-height:46px; font-size:15px; padding:0 24px; } .btn.sm{ min-height:29px; font-size:12.5px; padding:0 10px; } .btn.ghost{ background:transparent; border-color:transparent; color:var(--muted); } .btn.ghost:hover{ background:#eef1f7; color:var(--text); border-color:transparent; } .btn.danger:hover{ border-color:var(--danger); color:var(--danger); background:#fff5f7; } /* セグメント（タブ風の切替） */ .seg{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--border-strong); background:#fff; } .seg button{ font-family:inherit; font-size:13px; font-weight:700; color:#54627a; background:transparent; border:none; border-right:1px solid var(--border); padding:8px 14px; cursor:pointer; min-height:34px; } .seg button:last-child{ border-right:none; } .seg button:hover{ background:#f2f5fb; color:var(--brand-dark); } .seg button[aria-selected="true"]{ background:var(--brand); color:#fff; } /* ===== 表 ===== */ table.tbl{ width:100%; border-collapse:collapse; font-size:13.5px; } table.tbl th,table.tbl td{ border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; } table.tbl th{ background:#f5f7fb; font-weight:700; color:#46566a; white-space:nowrap; } table.tbl tbody tr:hover{ background:#fafbfe; } /* ===== 結果表示 ===== */ .result-box{ background:#f7f9fd; border:1px solid var(--border); border-left:3px solid var(--brand); padding:13px 15px; font-size:14px; line-height:1.9; } .big-value{ font-size:clamp(24px,5vw,34px); font-weight:900; color:var(--brand-dark); letter-spacing:.02em; line-height:1.3; word-break:break-all; } .mono{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; } .empty{ color:var(--muted); font-size:13.5px; padding:18px 0; text-align:center; } /* ===== トースト ===== */ .toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(14px); bottom:calc(34px + var(--dpg-cc-h, 0px)); /* クッキー同意バーの高さぶん持ち上げる */ background:#1e2837; color:#fff; font-size:13.5px; font-weight:700; padding:11px 20px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:2147483300; } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ===== フッター ===== */ .site-footer{ background:#0f1b2d; color:#cdd7e6; padding:34px 20px 22px; margin-top:30px; } .site-footer .inner{ max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; gap:24px 48px; } .site-footer .nm{ font-size:14px; font-weight:800; color:#fff; } .site-footer .ad{ font-size:12px; color:#90a0b4; margin-top:6px; } .site-footer .col h4{ font-size:12.5px; color:#fff; margin:0 0 8px; font-weight:800; } .site-footer .col a{ display:block; color:#aab8c9; text-decoration:none; font-size:13px; padding:3px 0; } .site-footer .col a:hover{ color:#fff; } .site-footer .copy{ max-width:1080px; margin:22px auto 0; border-top:1px solid #24344c; padding-top:14px; font-size:11.5px; color:#7e8ea3; } .hidden{ display:none !important; } /* display を指定した要素（.row や .btn など）は hidden 属性だけでは消えない。ブラウザ既定の [hidden]{display:none} のほうが弱いため。ここで確実に消す。 */ [hidden]{ display:none !important; } @media (max-width:640px){ header.app-header{ padding:8px 12px; gap:8px 10px; } .privacy-badge{ display:none; } .topnav{ flex:1 1 100%; order:5; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; } .topnav::-webkit-scrollbar{ height:0; } main{ padding:16px 12px 30px; } .panel{ padding:15px 14px 16px; } } @media print{ header.app-header,.site-footer,.toast,.toolguide{ display:none !important; } body::after{ display:none; } } /* ===== よく使う設定（テンプレート）のバー ===== DPT.presets() が差し込む。パネルの中でも、単独でも置ける。 */ .preset-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 13px; margin-bottom:16px; background:var(--tint); border:1px solid var(--border-strong); border-left:3px solid var(--brand); } .preset-bar .preset-lb{ font-size:12.5px; font-weight:700; color:var(--brand-dark); white-space:nowrap; } .preset-bar select.preset-sel{ width:auto; min-width:190px; max-width:100%; flex:0 1 240px; background:#fff; } .preset-bar input.preset-name{ width:auto; min-width:150px; flex:0 1 210px; background:#fff; } .preset-bar .preset-sp{ flex:1 1 0; min-width:0; } .preset-bar .preset-note{ flex:1 0 100%; margin:0; font-size:11.5px; color:var(--muted); line-height:1.6; } @media (max-width:640px){ .preset-bar{ gap:6px; } .preset-bar .preset-lb{ flex:1 0 100%; } .preset-bar select.preset-sel, .preset-bar input.preset-name{ flex:1 1 140px; min-width:120px; } .preset-bar .preset-sp{ display:none; } }