/* * さくら事務所 報告書DX — 共有デザイントークン / コンポーネントCSS * 一次ソース: /sakura-inspector.html （sakura-karte.html, sakura-hq.html と共通） * v0.2 フェーズ0: beta/index.html, beta/hq.html, beta/karte.html から読み込む。 * * フォント（Shippori Mincho / Zen Kaku Gothic New / Inter）は各ページの * に で読み込むこと（このファイルには含めない）。 */ /* ===================== 1. デザイントークン ===================== */ :root{ /* ベースカラー */ --bg:#F6F4EE; --card:#FFFFFF; --ink:#1B2A28; --sub:#71807C; --line:#E9E4D9; /* ブランドカラー */ --brand:#0E6B5C; --brand-deep:#0A4A40; --brand-soft:#E3F0EC; /* アクセント */ --coral:#E25A41; --coral-soft:#FCEAE5; --amber:#D9912A; --amber-soft:#FBF1DF; --blue:#3D6FA8; --blue-soft:#E7EEF7; --gold:#C9A24B; /* 判定色（j1〜j5） j1 = 要是正 / コーラル j2 = 要経過観察 / アンバー（保存値は「経過観察」） j3 = 参考 / ブルー j4 = 施工者確認 / パープル j5 = 調査不能 / グレー（保存値は「未調査」） */ --j1:var(--coral); --j1-soft:var(--coral-soft); --j1-ink:#B33A24; --j2:var(--amber); --j2-soft:var(--amber-soft); --j2-ink:#A86E15; --j3:var(--blue); --j3-soft:var(--blue-soft); --j3-ink:var(--blue); --j4:#6B4FA0; --j4-soft:#EFE9F7; --j4-ink:#6B4FA0; --j5:#79837E; --j5-soft:#EFEDE6; --j5-ink:#59635E; /* 形状・余白 */ --r:20px; --safe-b:max(12px, env(safe-area-inset-bottom)); /* 影（薄く広い影を基本とする） */ --shadow-card:0 6px 22px rgba(27,42,40,.05); --shadow-card-sm:0 4px 14px rgba(27,42,40,.04); --shadow-pop:0 14px 32px rgba(226,90,65,.38); --shadow-phone:0 40px 90px rgba(0,0,0,.55), 0 0 0 2px #3A4A47; /* フォント（3層） */ --font-serif:"Shippori Mincho","Hiragino Mincho ProN","Noto Serif JP","Yu Mincho",serif; --font-sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif; --font-num:"Inter","Zen Kaku Gothic New",sans-serif; } /* ===================== 2. リセット / ベース ===================== */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{height:100%} body{ background:var(--bg); font-family:var(--font-sans); color:var(--ink); -webkit-font-smoothing:antialiased; font-feature-settings:"palt"; text-rendering:optimizeLegibility; } button{font-family:inherit;cursor:pointer;color:inherit} svg{display:block;flex-shrink:0} .serif{font-family:var(--font-serif);letter-spacing:.045em;font-weight:700} .num{font-family:var(--font-num);font-variant-numeric:tabular-nums} /* ===================== 3. 電話フレーム（現場アプリ / カルテ） ===================== */ .stage{ min-height:100vh; display:flex;align-items:center;justify-content:center; background:radial-gradient(1200px 700px at 70% -10%,#3A4F4B 0%,#1D2927 55%,#131B1A 100%); padding:28px 16px; } .deviceWrap{display:flex;align-items:center;gap:56px} .pitch{max-width:300px;color:#D9E2DF} .pitch .lg{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-weight:800;color:#fff;letter-spacing:.08em;font-size:13px} .pitch h1{font-size:29px;line-height:1.55;color:#fff;margin-bottom:14px} .pitch p{font-size:13px;line-height:2;color:#9FB0AC;margin-bottom:18px} .pitch .chips{display:flex;flex-wrap:wrap;gap:8px} .pitch .chips span{font-size:11px;font-weight:700;border:1px solid #46615C;color:#BFD0CC;padding:7px 12px;border-radius:99px} .pitch .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .pitch .links a{font-size:11.5px;font-weight:700;color:#EAF2EF;border:1px solid rgba(255,255,255,.28);padding:8px 14px;border-radius:99px;text-decoration:none} .pitch .links a:hover{background:rgba(255,255,255,.08)} .pitch .betaTag{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#FFE9A8;border:1px solid rgba(255,233,168,.5);padding:6px 12px;border-radius:99px;margin-bottom:16px} .phone{width:390px;height:790px;background:#000;border-radius:54px;padding:11px;box-shadow:var(--shadow-phone);flex-shrink:0} .screen{position:relative;width:100%;height:100%;background:var(--bg);border-radius:44px;overflow:hidden;display:flex;flex-direction:column} .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:118px;height:32px;background:#000;border-radius:20px;z-index:60} @media(max-width:860px){ .stage{padding:0;background:var(--bg)} .pitch{display:none} .phone{width:100%;height:100vh;height:100dvh;border-radius:0;padding:0;box-shadow:none} .screen{border-radius:0} .notch{display:none} } .sbar{display:flex;justify-content:space-between;align-items:center;padding:16px 26px 6px;font-size:13px;font-weight:700;flex-shrink:0} .sbar .r{display:flex;align-items:center;gap:5px} /* ===================== 4. ページ / メインレイアウト ===================== */ main{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none} main::-webkit-scrollbar{display:none} .page{display:none;padding:6px 18px 140px;animation:fade .25s} .page.on{display:block} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* placeholder card used for pages not yet implemented (phase 1-3) */ .placeholder{ background:var(--card); border:1.5px dashed var(--line); border-radius:var(--r); padding:26px 20px; text-align:center; color:var(--sub); margin-top:16px; } .placeholder b{display:block;font-size:14px;color:var(--ink);margin-bottom:6px} .placeholder p{font-size:11.5px;line-height:1.9} .placeholder em{display:inline-block;margin-top:12px;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:var(--gold);background:#FBF7EA;border:1px solid #E8DFC6;border-radius:99px;padding:6px 14px} /* ===================== 5. 下部ナビ（.tabbar 必須。素の nav に当てると 本部コンソールのサイドバー内 nav が絶対配置で崩れるため） ===================== */ nav.tabbar{ position:absolute;bottom:0;left:0;right:0; background:rgba(255,255,255,.95);backdrop-filter:blur(14px); border-top:1px solid #E7E3D8; display:flex;align-items:flex-end; padding:8px 10px var(--safe-b); z-index:50; } nav.tabbar>button{ flex:1;appearance:none;border:0;background:none;font-family:inherit; display:flex;flex-direction:column;align-items:center;gap:3px; font-size:10px;font-weight:700;color:#9AA6A2;padding:6px 0;cursor:pointer; } nav.tabbar>button.on{color:var(--brand-deep)} nav.tabbar .camB{ width:64px;height:64px;flex:0 0 64px;appearance:none;border:0;border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow:0 10px 26px rgba(14,107,92,.45); margin:-30px 6px 4px;color:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer; } /* ===================== 6. カード / 見出し ===================== */ .card{background:var(--card);border-radius:var(--r);padding:17px 18px;box-shadow:var(--shadow-card);margin-bottom:12px} h4.sec{font-size:14px;margin:18px 2px 10px;display:flex;align-items:baseline;justify-content:space-between} h4.sec em{font-style:normal;font-size:9px;color:#A6B0AC;letter-spacing:.18em;font-weight:800} /* ===================== 7. チップ（ピル選択） ===================== */ .lbl{font-size:10px;font-weight:800;color:#9AA49F;letter-spacing:.12em;margin:14px 0 7px} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips button{ appearance:none;font-family:inherit;border:1.5px solid #E4E0D2;background:#fff; border-radius:99px;font-size:12px;font-weight:700;color:#5A6663;padding:9px 14px; cursor:pointer;transition:.12s; } .chips button.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-deep)} .chips.judge button.j1.on{border-color:var(--j1);background:var(--j1-soft);color:var(--j1-ink)} .chips.judge button.j2.on{border-color:var(--j2);background:var(--j2-soft);color:var(--j2-ink)} .chips.judge button.j3.on{border-color:var(--j3);background:var(--j3-soft);color:var(--j3-ink)} .chips.judge button.j4.on{border-color:var(--j4);background:var(--j4-soft);color:var(--j4-ink)} .chips.judge button.j5.on{border-color:var(--j5);background:var(--j5-soft);color:var(--j5-ink)} /* ===================== 8. 判定バッジ (.bj) ===================== */ .bj{display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:5px 10px;border-radius:99px;white-space:nowrap} .bj.j1{background:var(--j1-soft);color:var(--j1-ink)} .bj.j2{background:var(--j2-soft);color:var(--j2-ink)} .bj.j3{background:var(--j3-soft);color:var(--j3-ink)} .bj.j4{background:var(--j4-soft);color:var(--j4-ink)} .bj.j5{background:var(--j5-soft);color:var(--j5-ink)} .bj.adv{background:#F5EEDB;color:#A8862E} /* ===================== 9. ボトムシート機構 ===================== */ #dim{position:absolute;inset:0;background:rgba(20,30,28,.45);opacity:0;pointer-events:none;transition:.25s;z-index:70} #dim.on{opacity:1;pointer-events:auto} .sheet{ position:absolute;left:0;right:0;bottom:0;background:#fff; border-radius:26px 26px 0 0; padding:10px 20px calc(var(--safe-b) + 14px); transform:translateY(103%); transition:.32s cubic-bezier(.2,.8,.2,1); z-index:80;max-height:80%;overflow-y:auto;scrollbar-width:none; } .sheet.on{transform:none} .sheet::-webkit-scrollbar{display:none} .grip{width:40px;height:4px;border-radius:99px;background:#E2DECF;margin:4px auto 12px} .recHd{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px} .recHd b{font-size:17px} .recHd span{font-size:10px;color:var(--sub);font-weight:700;background:#F4F1E8;padding:5px 10px;border-radius:99px} /* ===================== 10. トースト ===================== */ #toast{ position:absolute;left:50%;bottom:118px;transform:translate(-50%,18px); background:var(--ink);color:#fff;font-size:12px;font-weight:600; padding:12px 20px;border-radius:99px;opacity:0;transition:.35s;z-index:96; white-space:nowrap;box-shadow:0 12px 30px rgba(0,0,0,.3); } #toast.on{opacity:1;transform:translate(-50%,0)} /* ===================== 11. ボタン共通 ===================== */ .saveBtn{ width:100%;appearance:none;border:0;font-family:inherit;background:var(--brand);color:#fff; font-weight:800;font-size:14.5px;padding:15px;border-radius:14px;cursor:pointer; margin-top:12px;box-shadow:0 10px 24px rgba(14,107,92,.3); } .sendBig{ width:100%;appearance:none;border:0;font-family:inherit; background:linear-gradient(135deg,var(--coral),#C24530);color:#fff; font-weight:800;font-size:15px;padding:17px;border-radius:16px;cursor:pointer; box-shadow:var(--shadow-pop);margin-top:6px; } .sendBig:disabled{opacity:.4;box-shadow:none;cursor:default} /* ===================== 12. 本部コンソール（サイドバー＋メイン） ===================== */ .app{display:flex;min-height:100vh} .side{width:230px;flex:none;background:var(--brand-deep);color:#E9F2EF;display:flex;flex-direction:column;position:sticky;top:0;height:100vh} .main{flex:1;min-width:0;display:flex;flex-direction:column} .wrap{padding:26px 34px 120px;max-width:1180px;width:100%;margin:0 auto} .logo{display:flex;align-items:center;gap:11px;padding:22px 20px 18px} .logo .mark{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center} .logo .t1{font-family:var(--font-serif);font-size:16px;font-weight:700;letter-spacing:.06em;line-height:1.3} .logo .t2{font-size:10px;letter-spacing:.22em;color:#9DBDB4;font-weight:500} .side-sec{padding:10px 12px 0;font-size:10px;letter-spacing:.2em;color:#7FA79D;font-weight:700;margin-top:6px} .side-nav{padding:6px 10px;display:flex;flex-direction:column;gap:3px} .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:#C9DCD6;font-weight:500;font-size:13.5px;text-align:left;width:100%;transition:background .15s;border:0;background:none} .nav-item:hover{background:rgba(255,255,255,.06)} .nav-item.on{background:rgba(255,255,255,.13);color:#fff;font-weight:700} .nav-item .bdg{margin-left:auto;background:var(--coral);color:#fff;font-size:11px;font-weight:700;border-radius:99px;padding:0 7px;line-height:18px} .side-foot{margin-top:auto;padding:16px 18px 20px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px} .avatar{width:34px;height:34px;border-radius:50%;background:#155F52;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .side-foot .nm{font-size:13px;font-weight:700;color:#fff;line-height:1.3} .side-foot .rl{font-size:11px;color:#9DBDB4} .top{display:flex;align-items:center;gap:16px;padding:18px 34px;border-bottom:1px solid var(--line);background:rgba(246,244,238,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)} .top h1{font-family:var(--font-serif);font-size:19px;font-weight:700;letter-spacing:.04em} .top .date{font-size:12.5px;color:var(--sub)} .top .sp{flex:1} @media(max-width:900px){ .app{display:block} .side{position:static;height:auto;width:100%} .wrap{padding:20px 18px 80px} }