/* 触れる見本 v0 ─ 見た目（デザイン定義書 v1 の色・文字・形に合わせる） */ :root{ --ink:#14202B; --sub:#5B6773; --mute:#6B7682; /* 補足の小さな文字（白との比 4.6） */ --teal-text:#007B85; /* 水色の文字・主のボタン（白との比 5.0） */ --teal:#00C6D2; /* 水色の印（文字は乗せない） */ --teal-deep:#02A1B0; --teal-soft:#E6F8F9; --teal-pale:#F0FAFB; --teal-ink:#0B4E55; /* 水色の面に乗せる文字 */ --teal-line:#BFE3E6; --bg:#F4F7F8; --bg-2:#E9EEF1; --line:#E3E8EC; --line-2:#EEF1F4; --line-3:#C9D2D9; /* 押せる物の縁・強めの線 */ --card:#FFFFFF; --card-2:#FBFCFC; --field:#FFFFFF; --side-bg:#FFFFFF; --tabs-bg:#FFFFFF; --strip-bg:rgba(255,255,255,.92); --seg-on:#FFFFFF; --label-bg:rgba(255,255,255,.85); --on-acc:#FFFFFF; /* 水色・赤の面に乗せる文字 */ --on-ink:#FFFFFF; /* 濃い面（--ink）に乗せる文字 */ --pri-hover:#006A73; --icon-mute:#A9B3BC; --warn-bg:#FFF4E5; --warn:#8A4B00; --warn-line:#E8B675; --danger:#B3261E; --danger-bg:#FCEEEE; --danger-line:#EBC3C0; --priv:#8E6BCF; /* 私用の印 */ --priv-soft:#F3EEFB; --priv-text:#5A3E91; --priv-line:#CDBDEB; --ok:#13784A; --ok-bg:#E8F5EE; --ok-dot:#1FA463; --blue-ink:#1F5FA8; --blue-bg:#E7F0FB; --badge-bg:#A85400; --badge-ink:#FFFFFF; --toast-icon:#7FE3EA; --b-catv:#0A8F99; --b-nuro:#7E5BC2; --b-ztv:#C46F12; --b-company:#4F5B66; --b-other:#8A949E; --b-catv-t:#05707A; --b-nuro-t:#6A45B0; --b-ztv-t:#934F05; --b-company-t:#4F5B66; --sp-exp:#0A8F99; --sp-itaku:#1E5A63; --sp-rent:#7FD7DD; --sp-shaho:#E08A2E; --sp-other:#B8C0C7; --shadow:0 1px 2px rgba(20,32,43,.04),0 4px 16px rgba(20,32,43,.05); --shadow-2:0 2px 6px rgba(20,32,43,.06),0 16px 40px rgba(20,32,43,.12); --r16:16px; --r12:12px; --strip:56px; --ease:cubic-bezier(.2,.7,.2,1); } /* ===== 見た目は2つ：近未来（はじめ）と実務（2026-10-15 15回目）===== * 切り替えは html の data-theme（dark＝近未来・light＝実務）だけ。画面の作り（並び・部品）は1つで、色・光・地・線・影は下の変数で決まる。 * 部品は色を直に書かず、変数だけを使う（新しい画面も、この変数で2つの見た目に同時に合う）。 * 実務＝上の :root（明るい業務の画面）＋ここの「見た目の変数」。近未来＝ホームの秘書の間と同じ夜の紺・水色の細い線・柔らかい光・星の点と格子。 */ :root{ --hl:#14202B; /* 目立たせる文字（見出し・大きな数字） */ --cy:#00939E; /* 水色の印（線・点） */ --cy-ink:#0B4E55; /* 水色寄りの文字 */ --cy-hi:#007B85; /* 明るい水色の文字・輪 */ --num-cool:#0B4E55; /* 水色の大きな数字 */ --gold:#A35F00; /* 金の数字・印（白との比 4.9） */ --gold-2:#A35F00; --gold-hi:#8A4B00; /* 金の大きな数字 */ --gold-t:#8A4B00; /* 金の言葉（状態） */ --acc-1:#007B85; --acc-2:#00939E; /* 塗りの札（いまここ）のグラデーション */ --mic-1:#00939E; --mic-2:#007B85; /* ［話しかける］の塗り */ --hud-rgb:0 139 150; --hud2-rgb:0 139 150; --hud3-rgb:0 123 133; /* 線・枠の水色（透明度は使う所で） */ --fg-rgb:20 32 43; /* 地の上の薄い面（近未来は白） */ --glass-rgb:255 255 255; /* 枠の中の面（近未来は紺） */ --gold-rgb:196 120 0; --warn-rgb:200 110 0; --ok-rgb:19 120 74; --priv-rgb:142 107 207; --danger-rgb:179 38 30; --blue-rgb:31 95 168; --glow:0; /* 光の強さ（0＝光らせない・1＝近未来） */ --wx-cloud:#7D8A96; --wx-cloud2:#8F9BA6; --wx-rain:#2F7FCF; --wx-snow:#6E98C9; --page-bg:var(--bg); /* 本文の地 */ --page-img:none; --page-glow:none; --page-size:auto; --page-pos:0 0; --hall-glow:none; /* ホームの真ん中の青い光 */ --frame-bg:var(--card); /* 枠（カード）の地・線・影 */ --frame-line:transparent; --frame-shadow:var(--shadow); --frame-here-line:var(--teal-text); --frame-here-shadow:0 0 0 1px var(--teal-text),var(--shadow); --frame-r:16px; --side-bg2:var(--side-bg); --side-line:var(--line); --side-bw:0 1px 0 0; --side-m:0; --side-r:0; --side-shadow:none; --chat-bg:var(--bg); --chat-m:20px 20px 20px 0; --nav-on-bg:var(--teal-soft); --nav-on-ink:var(--teal-text); --nav-on-line:transparent; --nav-on-shadow:0 0 0 0 transparent; --me-bg:var(--teal-soft); --me-ink:var(--ink); --me-line:var(--teal-line); --bot-bg:var(--bg); --bot-line:var(--line); --sun-blend:normal; --sun-mask:radial-gradient(circle closest-side,#000 61%,transparent 64%); --sun-box:80%; --rays:.35; /* 太陽の光の筋・波紋の強さ（実務は控えめ） */ --pri-bg:var(--teal-text); --pri-ink:var(--on-acc); --pri-line:transparent; --pri-shadow:0 1px 2px rgba(0,123,133,.2); --pri-hover-bg:var(--pri-hover); --seg-bg:var(--line-2); --seg-line:transparent; --seg-on-ink:var(--ink); --seg-on-shadow:0 1px 2px rgba(20,32,43,.08),0 2px 8px rgba(20,32,43,.06); --nav-ic:currentColor; --nav-ink:var(--sub); --dock-glow:0 0 0 0 transparent; --chip-w-bg:var(--teal-soft); --chip-w-line:var(--teal-line); --chip-w-ink:var(--teal-ink); --chip-p-bg:var(--priv-soft); --chip-p-line:var(--priv-line); --chip-p-ink:var(--priv-text); --num-big:var(--ink); --num-glow:0 0 0 transparent; --today-ring:inset 0 0 0 0 transparent; --inv-bg:var(--ink); --inv-ink:var(--on-ink); --inv-line:var(--ink); --inv-shadow:0 0 0 0 transparent; --band-fill:var(--warn-bg); --toast-bg:var(--ink); --toast-ink:var(--on-ink); --pv-lead-bg:#F4FAFB; } /* 近未来：ホームの秘書の間と同じ色（全ページ・窓・スマホの下の帯とタブ） */ :root[data-theme="dark"]{color-scheme:dark; --ink:#EAF4F7; --sub:#A9C4CE; --mute:#9DB3BD; --teal-text:#5CE1E8; --teal:#00C6D2; --teal-deep:#0AB4C0; --teal-soft:rgba(0,198,210,.16); --teal-pale:rgba(0,198,210,.08); --teal-ink:#BFF5F8; --teal-line:rgba(92,225,232,.45); --bg:#0A2038; --bg-2:#071A2E; --line:rgba(0,198,210,.24); --line-2:rgba(0,198,210,.13); --line-3:rgba(92,225,232,.48); --card:#081D35; --card-2:#071A30; --field:#04142A; --side-bg:#06111E; --tabs-bg:#06111E; --strip-bg:rgba(3,10,22,.94); --seg-on:rgba(0,198,210,.26); --label-bg:rgba(8,25,42,.94); --on-acc:#03141E; --on-ink:#03141E; --pri-hover:#8BEDF2; --icon-mute:#7F98A3; --warn-bg:rgba(255,178,94,.13); --warn:#FFCB85; --warn-line:rgba(255,190,90,.6); --danger:#FFA59C; --danger-bg:rgba(255,120,110,.13); --danger-line:rgba(255,120,110,.45); --priv:#B89BF2; --priv-soft:rgba(184,155,242,.16); --priv-text:#DCCDFF; --priv-line:rgba(184,155,242,.55); --ok:#8EE8B6; --ok-bg:rgba(61,214,140,.14); --ok-dot:#3DD68C; --blue-ink:#A9CBFF; --blue-bg:rgba(120,170,255,.14); --badge-bg:#FFB25E; --badge-ink:#2A1A00; --toast-icon:#0B6B74; --b-catv:#27D4DD; --b-nuro:#B89BF2; --b-ztv:#F2A65A; --b-company:#B9C2CA; --b-other:#A0A8B0; --b-catv-t:#5CE1E8; --b-nuro-t:#C7B0F7; --b-ztv-t:#F7B878; --b-company-t:#C6CED5; --sp-exp:#27D4DD; --sp-itaku:#1C9BA3; --sp-rent:#A8F2F6; --sp-shaho:#F2A65A; --sp-other:#8E9AA4; --shadow:0 0 0 1px rgba(90,228,246,.16),0 0 14px rgba(30,200,240,.12); --shadow-2:0 0 0 1px rgba(90,228,246,.45),0 0 34px rgba(30,200,240,.28),0 24px 70px rgba(0,0,0,.65); --hl:#F3FAFB; --cy:#33D6E0; --cy-ink:#BFEFF5; --cy-hi:#8BEDF2; --num-cool:#C9F7FA; --gold:#FFD84D; --gold-2:#FFD27A; --gold-hi:#FFE9B8; --gold-t:#FFE38A; --acc-1:#5CE1E8; --acc-2:#B5F6FA; --mic-1:#9AF4F9; --mic-2:#38CBE2; --hud-rgb:0 198 210; --hud2-rgb:51 214 224; --hud3-rgb:92 225 232; --fg-rgb:255 255 255; --glass-rgb:5 18 36; --gold-rgb:255 200 80; --warn-rgb:255 178 94; --ok-rgb:61 214 140; --priv-rgb:184 155 242; --danger-rgb:255 120 110; --blue-rgb:120 170 255; --glow:1; --wx-cloud:#C7D2DA; --wx-cloud2:#D3DCE3; --wx-rain:#8FC8FF; --wx-snow:#F2F7FF; --page-bg:#03122A; --page-glow:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(20,90,170,.24),transparent 75%); --page-img:linear-gradient(rgba(70,170,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(70,170,230,.07) 1px,transparent 1px),radial-gradient(rgba(140,210,255,.35) 1px,transparent 1.6px),radial-gradient(rgba(140,210,255,.18) 1px,transparent 1.6px); --page-size:64px 64px,64px 64px,97px 89px,53px 61px; --page-pos:0 0,0 0,13px 7px,31px 41px; --hall-glow:radial-gradient(ellipse 40% 46% at 50% 38%,rgba(40,150,230,.42),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 40%,rgba(20,90,170,.30),transparent 75%); --frame-bg:linear-gradient(180deg,rgba(8,34,66,.80),rgba(4,20,42,.84)); --frame-line:rgba(90,228,246,.78); --frame-shadow:0 0 0 1px rgba(90,228,246,.12),0 0 20px rgba(30,200,240,.45),inset 0 0 26px rgba(30,200,240,.13); --frame-here-line:#8BF0F5; --frame-here-shadow:0 0 0 1px #8BF0F5,0 0 30px rgba(80,230,240,.6),inset 0 0 26px rgba(80,230,240,.14); --frame-r:14px; --side-bg2:linear-gradient(180deg,rgba(8,30,58,.86),rgba(4,16,34,.9)); --side-line:rgba(90,228,246,.7); --side-bw:1px; --side-m:10px 0 10px 10px; --side-r:16px; --side-shadow:0 0 18px rgba(30,200,240,.35),inset 0 0 22px rgba(30,200,240,.10); --chat-bg:transparent; --chat-m:10px 10px 10px 4px; --nav-on-bg:linear-gradient(90deg,rgba(0,198,210,.30),rgba(0,198,210,.12)); --nav-on-ink:#E9FDFF; --nav-on-line:rgba(140,240,245,.9); --nav-on-shadow:0 0 16px rgba(60,220,240,.55),inset 0 0 12px rgba(60,220,240,.25); --me-bg:rgba(5,18,36,.6); --me-ink:#F3FAFB; --me-line:rgba(92,225,232,.55); --bot-bg:rgba(5,18,36,.6); --bot-line:rgba(92,225,232,.55); --sun-blend:screen; --sun-mask:none; --sun-box:94%; --rays:1; --pri-bg:rgba(0,198,210,.14); --pri-ink:#E4FCFE; --pri-line:rgba(140,240,245,.85); --pri-shadow:0 0 14px rgba(60,220,240,.42),inset 0 0 12px rgba(60,220,240,.16); --pri-hover-bg:rgba(0,198,210,.26); --seg-on:linear-gradient(180deg,#A6F6FA,#3FD0E4); --seg-bg:rgba(3,14,30,.7); --seg-line:rgba(90,228,246,.6); --seg-on-ink:#03141E; --seg-on-shadow:0 0 14px rgba(60,220,240,.6); --nav-ic:#5CE1E8; --nav-ink:#DCEBF0; --dock-glow:0 0 22px rgba(0,198,210,.45); --chip-w-bg:rgba(0,150,190,.22); --chip-w-line:rgba(92,225,232,.6); --chip-w-ink:#DDF8FB; --chip-p-bg:rgba(150,110,240,.24); --chip-p-line:rgba(184,155,242,.65); --chip-p-ink:#ECE3FF; --num-big:#FFD84D; --num-glow:0 0 18px rgba(255,200,60,.42); --today-ring:inset 0 0 18px rgba(80,230,240,.3); --inv-bg:linear-gradient(180deg,#A6F6FA,#3FD0E4); --inv-ink:#03141E; --inv-line:rgba(170,245,250,.9); --inv-shadow:0 0 14px rgba(60,220,240,.55); --band-fill:rgba(255,196,70,.36); --toast-bg:#0A2A48; --toast-ink:#EAF4F7; --toast-icon:#5CE1E8; --pv-lead-bg:#F4FAFB; } /* LINE のトーク画面の中・紙の領収書・印刷の見た目は、ダークでもライトの色のまま */ :root[data-theme="dark"] .ln-frame,:root[data-theme="dark"] .print,:root[data-theme="dark"] .paper,:root[data-theme="dark"] .bankp,:root[data-theme="dark"] .sheet{color-scheme:light;color:var(--ink); --ink:#14202B; --sub:#5B6773; --mute:#6B7682; /* 補足の小さな文字（白との比 4.6） */ --teal-text:#007B85; /* 水色の文字・主のボタン（白との比 5.0） */ --teal:#00C6D2; /* 水色の印（文字は乗せない） */ --teal-deep:#02A1B0; --teal-soft:#E6F8F9; --teal-pale:#F0FAFB; --teal-ink:#0B4E55; /* 水色の面に乗せる文字 */ --teal-line:#BFE3E6; --bg:#F4F7F8; --bg-2:#E9EEF1; --line:#E3E8EC; --line-2:#EEF1F4; --line-3:#C9D2D9; /* 押せる物の縁・強めの線 */ --card:#FFFFFF; --card-2:#FBFCFC; --field:#FFFFFF; --side-bg:#FFFFFF; --tabs-bg:#FFFFFF; --strip-bg:rgba(255,255,255,.92); --seg-on:#FFFFFF; --label-bg:rgba(255,255,255,.85); --on-acc:#FFFFFF; /* 水色・赤の面に乗せる文字 */ --on-ink:#FFFFFF; /* 濃い面（--ink）に乗せる文字 */ --pri-hover:#006A73; --icon-mute:#A9B3BC; --warn-bg:#FFF4E5; --warn:#8A4B00; --warn-line:#E8B675; --danger:#B3261E; --danger-bg:#FCEEEE; --danger-line:#EBC3C0; --priv:#8E6BCF; /* 私用の印 */ --priv-soft:#F3EEFB; --priv-text:#5A3E91; --priv-line:#CDBDEB; --ok:#13784A; --ok-bg:#E8F5EE; --ok-dot:#1FA463; --blue-ink:#1F5FA8; --blue-bg:#E7F0FB; --badge-bg:#A85400; --badge-ink:#FFFFFF; --toast-icon:#7FE3EA; --b-catv:#0A8F99; --b-nuro:#7E5BC2; --b-ztv:#C46F12; --b-company:#4F5B66; --b-other:#8A949E; --b-catv-t:#05707A; --b-nuro-t:#6A45B0; --b-ztv-t:#934F05; --b-company-t:#4F5B66; --sp-exp:#0A8F99; --sp-itaku:#1E5A63; --sp-rent:#7FD7DD; --sp-shaho:#E08A2E; --sp-other:#B8C0C7; --shadow:0 1px 2px rgba(20,32,43,.04),0 4px 16px rgba(20,32,43,.05); --shadow-2:0 2px 6px rgba(20,32,43,.06),0 16px 40px rgba(20,32,43,.12); } /* 印刷・LINE・紙の中は、見た目の変数も実務（光らせない）にそろえる */ :root[data-theme="dark"] .ln-frame,:root[data-theme="dark"] .print,:root[data-theme="dark"] .paper,:root[data-theme="dark"] .bankp,:root[data-theme="dark"] .sheet,:root[data-theme="dark"] .fpaper{ --hl:#14202B; /* 目立たせる文字（見出し・大きな数字） */ --cy:#00939E; /* 水色の印（線・点） */ --cy-ink:#0B4E55; /* 水色寄りの文字 */ --cy-hi:#007B85; /* 明るい水色の文字・輪 */ --num-cool:#0B4E55; /* 水色の大きな数字 */ --gold:#A35F00; /* 金の数字・印（白との比 4.9） */ --gold-2:#A35F00; --gold-hi:#8A4B00; /* 金の大きな数字 */ --gold-t:#8A4B00; /* 金の言葉（状態） */ --acc-1:#007B85; --acc-2:#00939E; /* 塗りの札（いまここ）のグラデーション */ --mic-1:#00939E; --mic-2:#007B85; /* ［話しかける］の塗り */ --hud-rgb:0 139 150; --hud2-rgb:0 139 150; --hud3-rgb:0 123 133; /* 線・枠の水色（透明度は使う所で） */ --fg-rgb:20 32 43; /* 地の上の薄い面（近未来は白） */ --glass-rgb:255 255 255; /* 枠の中の面（近未来は紺） */ --gold-rgb:196 120 0; --warn-rgb:200 110 0; --ok-rgb:19 120 74; --priv-rgb:142 107 207; --danger-rgb:179 38 30; --blue-rgb:31 95 168; --glow:0; /* 光の強さ（0＝光らせない・1＝近未来） */ --wx-cloud:#7D8A96; --wx-cloud2:#8F9BA6; --wx-rain:#2F7FCF; --wx-snow:#6E98C9; --page-bg:var(--bg); /* 本文の地 */ --page-img:none; --page-glow:none; --page-size:auto; --page-pos:0 0; --hall-glow:none; /* ホームの真ん中の青い光 */ --frame-bg:var(--card); /* 枠（カード）の地・線・影 */ --frame-line:transparent; --frame-shadow:var(--shadow); --frame-here-line:var(--teal-text); --frame-here-shadow:0 0 0 1px var(--teal-text),var(--shadow); --frame-r:16px; --side-bg2:var(--side-bg); --side-line:var(--line); --side-bw:0 1px 0 0; --side-m:0; --side-r:0; --side-shadow:none; --chat-bg:var(--bg); --chat-m:20px 20px 20px 0; --nav-on-bg:var(--teal-soft); --nav-on-ink:var(--teal-text); --nav-on-line:transparent; --nav-on-shadow:0 0 0 0 transparent; --me-bg:var(--teal-soft); --me-ink:var(--ink); --me-line:var(--teal-line); --bot-bg:var(--bg); --bot-line:var(--line); --sun-blend:normal; --sun-mask:radial-gradient(circle closest-side,#000 61%,transparent 64%); --sun-box:80%; --rays:.35; /* 太陽の光の筋・波紋の強さ（実務は控えめ） */ --pri-bg:var(--teal-text); --pri-ink:var(--on-acc); --pri-line:transparent; --pri-shadow:0 1px 2px rgba(0,123,133,.2); --pri-hover-bg:var(--pri-hover); --seg-bg:var(--line-2); --seg-line:transparent; --seg-on-ink:var(--ink); --seg-on-shadow:0 1px 2px rgba(20,32,43,.08),0 2px 8px rgba(20,32,43,.06); --nav-ic:currentColor; --nav-ink:var(--sub); --dock-glow:0 0 0 0 transparent; --chip-w-bg:var(--teal-soft); --chip-w-line:var(--teal-line); --chip-w-ink:var(--teal-ink); --chip-p-bg:var(--priv-soft); --chip-p-line:var(--priv-line); --chip-p-ink:var(--priv-text); --num-big:var(--ink); --num-glow:0 0 0 transparent; --today-ring:inset 0 0 0 0 transparent; --inv-bg:var(--ink); --inv-ink:var(--on-ink); --inv-line:var(--ink); --inv-shadow:0 0 0 0 transparent; --band-fill:var(--warn-bg); --toast-bg:var(--ink); --toast-ink:var(--on-ink); --pv-lead-bg:#F4FAFB; --seg-on:#FFFFFF; } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} html,body{background:var(--bg);color:var(--ink)} body{font-family:'Noto Sans JP',system-ui,sans-serif;font-size:15px;line-height:1.7;letter-spacing:.02em;-webkit-font-smoothing:antialiased;min-height:100dvh} body.locked{overflow:hidden} button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit} button{cursor:pointer;background:none;border:0} button:disabled{cursor:not-allowed} a{color:var(--teal-text)} img{display:block;max-width:100%} .num{font-family:'Inter','Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.005em} .ms{font-family:'Material Symbols Rounded';font-weight:400;font-style:normal;line-height:1;display:inline-block;font-size:20px;width:1em;overflow:hidden;white-space:nowrap;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased;flex:none;user-select:none} .ms.o{font-variation-settings:'FILL' 0,'wght' 450,'GRAD' 0,'opsz' 24} .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:10px;text-decoration:none} .skip:focus{top:8px} :focus-visible{outline:3px solid rgba(0,123,133,.45);outline-offset:2px;border-radius:10px} [hidden]{display:none!important} /* ---------- ボタン ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--r12);font-size:15px;font-weight:700;letter-spacing:.04em;white-space:nowrap;transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .15s var(--ease),border-color .18s} .btn .ms{font-size:20px} .btn:active:not(:disabled){transform:translateY(1px)} .btn.pri{background:var(--pri-bg);color:var(--pri-ink);box-shadow:inset 0 0 0 1px var(--pri-line),var(--pri-shadow)} .btn.pri:hover:not(:disabled){background:var(--pri-hover-bg)} .btn.sec{background:var(--card);color:var(--ink);border:1px solid var(--line)} .btn.sec:hover:not(:disabled){border-color:var(--line-3);background:var(--card-2)} .btn.ghost{color:var(--teal-text);padding:0 12px} .btn.ghost:hover:not(:disabled){background:var(--teal-soft)} .btn.danger{background:var(--danger);color:var(--on-acc)} .btn.danger-o{background:var(--card);color:var(--danger);border:1px solid var(--danger-line)} .btn.danger-t,.btn.ghost.danger-t{color:var(--danger)} .btn.ghost.danger-t:hover{background:var(--danger-bg)} .btn.sm{min-height:44px;padding:0 14px;font-size:14px} .btn.lg{min-height:52px;padding:0 24px;font-size:16px} .btn.wide{width:100%} .btn:disabled{opacity:.45} .ib{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);flex:none;transition:background .18s} .ib:hover{background:var(--line-2)} .ib .ms{font-size:24px} .ib.bd{border:1px solid var(--line);background:var(--card)} .ib.send{background:var(--teal-text);color:var(--on-acc)} .ib.send:hover{background:var(--pri-hover)} .ib.send .ms{font-size:21px} .link-b{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-top:6px;color:var(--teal-text);font-weight:700;font-size:14px} .link-b .ms{font-size:20px} .chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--teal-line);background:var(--card);color:var(--teal-text);font-size:13.5px;font-weight:500;line-height:1.4;text-align:left;transition:background .18s} .chip:hover{background:var(--teal-soft)} .cand{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-right:6px;border-radius:6px;background:var(--teal-soft);color:var(--teal-text);font-size:13px;font-weight:700;letter-spacing:.04em;vertical-align:1px} .pill{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:8px;border-radius:999px;background:var(--teal-soft);color:var(--teal-text);font-size:13px;font-weight:700;letter-spacing:.04em} .kindtag{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin-left:8px;border-radius:6px;font-size:13px;font-weight:700;letter-spacing:.04em;vertical-align:2px} .kindtag.work{background:var(--teal-soft);color:var(--teal-text)} .kindtag.private{background:var(--priv-soft);color:var(--priv-text)} .blank{display:inline-block;min-width:2.4em;border-bottom:2px solid var(--warn);color:transparent;line-height:1.1} .mute{color:var(--mute)} /* ---------- 上の帯 ---------- */ .strip{position:sticky;top:0;z-index:50;height:var(--strip);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--strip-bg);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)} .strip-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px 0 6px;border-radius:12px;color:var(--sub);text-decoration:none;font-size:14px;font-weight:500} .strip-back:hover{background:var(--line-2);color:var(--ink)} .strip-back .ms{font-size:20px} .sample-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--sub);font-size:13px;font-weight:500;letter-spacing:.04em;white-space:nowrap} .sample-tag i{width:6px;height:6px;border-radius:50%;background:var(--teal)} .seg{display:inline-flex;padding:3px;border-radius:12px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px var(--seg-line);margin:0 auto} .seg-b{min-height:38px;min-width:76px;padding:0 16px;border-radius:9px;font-size:14px;font-weight:700;color:var(--sub);letter-spacing:.04em;transition:background .18s,color .18s,box-shadow .18s} .seg-b[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} .strip-reset{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--sub);font-size:14px;font-weight:500} .strip-reset:hover{background:var(--line-2);color:var(--ink)} .strip-reset .ms{font-size:20px} .lbl-short{display:none} @media (max-width:640px){ .strip{gap:6px;padding:0 8px} .lbl-long{display:none} .lbl-short{display:inline} .strip-back{padding:0 8px 0 4px;font-size:13px} .sample-tag{padding:0 9px;font-size:13px} .seg-b{min-width:0;padding:0 12px;font-size:13.5px} .strip-reset{width:44px;justify-content:center;padding:0} } @media (max-width:360px){ .sample-tag{display:none} } #stage{outline:none} /* ================= LINE ================= */ .v-line{min-height:calc(100dvh - var(--strip))} .ln-wrap{display:flex;align-items:center;justify-content:center;gap:56px;padding:24px 16px;min-height:calc(100dvh - var(--strip))} .ln-aside{width:300px;flex:none} .ln-aside-k{font-size:13px;font-weight:700;color:var(--teal-text);letter-spacing:.08em} .ln-aside-h{font-size:24px;line-height:1.45;font-weight:700;letter-spacing:.04em;margin:8px 0 20px} .ln-aside-ul{list-style:none;display:flex;flex-direction:column;gap:14px} .ln-aside-ul li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.65} .ln-aside-ul .ms{width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--teal-text);font-size:20px;margin-top:-4px} .ln-aside-note{margin-top:24px;font-size:12.5px;color:var(--sub);line-height:1.7} @media (max-width:1099.98px){ .ln-aside{display:none} } .ln-frame{position:relative;width:390px;height:min(844px,calc(100dvh - var(--strip) - 48px));min-height:560px;display:flex;flex-direction:column;background:#9CB1D4;border-radius:36px;overflow:hidden;box-shadow:0 0 0 10px #fff,0 0 0 11px var(--line),0 24px 60px rgba(20,32,43,.18)} @media (max-width:600px){ .ln-wrap{padding:0;display:block} .ln-frame{width:100%;height:calc(100dvh - var(--strip));min-height:0;border-radius:0;box-shadow:none} } .ln-head{flex:none;height:56px;display:flex;align-items:center;gap:8px;padding:0 14px 0 6px;background:#9CB1D4;color:#14202B} .ln-head-back{font-size:28px} .ln-head-av{width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center} .ln-head-av img{width:24px} .ln-head b{font-size:16.5px;font-weight:700;letter-spacing:.02em;flex:1} .ln-head-sub{font-size:11.5px;font-weight:700;color:#23324A;background:rgba(255,255,255,.55);padding:2px 9px;border-radius:999px} .ln-talk{position:relative;flex:1;overflow-y:auto;padding:4px 12px 14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain} .ln-talk:focus-visible{outline-offset:-3px} .ln-day{display:flex;justify-content:center;margin:6px 0 2px} .ln-day span{font-size:12px;color:var(--on-acc);background:#5E7393;padding:2px 12px;border-radius:999px;font-weight:500} .ln-row{display:flex;gap:8px;align-items:flex-start} .ln-row.new{animation:pop .22s var(--ease) both} .ln-row.me{justify-content:flex-end;align-items:flex-end;gap:6px} @keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .ln-av{width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none} .ln-av img{width:26px} .ln-col{min-width:0;flex:1} .ln-who{font-size:11.5px;color:#23324A;margin:0 0 3px 2px;font-weight:500} .ln-line{display:flex;gap:6px;align-items:flex-end} .ln-tm{font-size:11px;color:#23324A;flex:none;padding-bottom:2px} .ln-bub{white-space:pre-line;max-width:262px;background:#fff;color:var(--ink);padding:9px 13px;border-radius:4px 18px 18px 18px;font-size:14.5px;line-height:1.65;text-wrap:pretty;word-break:break-word} .ln-bub.me{background:#D6F5F1;border-radius:18px 4px 18px 18px;max-width:250px} .ln-bub.reading{display:flex;align-items:center;gap:8px;color:var(--sub)} .spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--teal-text);animation:spin .8s linear infinite;flex:none} @keyframes spin{to{transform:rotate(360deg)}} .typing{display:inline-flex;gap:5px;align-items:center;padding:13px 15px} .typing i{width:7px;height:7px;border-radius:50%;background:var(--icon-mute);animation:blink 1.1s infinite} .typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s} @keyframes blink{0%,80%,100%{opacity:.35}40%{opacity:1}} .ln-img{position:relative;width:136px;height:176px;border-radius:14px;overflow:hidden;background:#EEF1F4;box-shadow:0 1px 2px rgba(20,32,43,.08)} .ln-img .paper{position:absolute;left:8px;top:8px;width:240px;transform:scale(.5);transform-origin:top left} .ln-quick{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 12px;background:#9CB1D4;scrollbar-width:none} .ln-quick::-webkit-scrollbar{display:none} .ln-quick .chip{flex:none;border-color:#fff;white-space:nowrap} .ln-bottom{flex:none;background:#fff} .ln-rm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,76px);border-top:1px solid #D5DCE4} .ln-rm-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1.3;text-align:center;padding:4px;transition:background .15s} .ln-rm-b:nth-child(3n){border-right:0} .ln-rm-b:nth-child(n+4){border-bottom:0} .ln-rm-b .ms{font-size:26px;color:var(--teal-text)} .ln-rm-b:hover{background:var(--teal-soft)} .ln-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;border-top:1px solid var(--line)} .ln-bar-m{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 16px;font-size:13.5px;font-weight:500;color:var(--ink)} .ib-sp{width:44px} .ln-input{display:flex;align-items:center;gap:4px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)} .ln-field{flex:1;min-width:0;height:44px;border-radius:22px;border:1px solid var(--line);background:var(--bg);padding:0 16px;font-size:16px} .ln-field:focus{outline:none;border-color:var(--teal-text);background:#fff} /* 送る見本を選ぶ */ .ln-sheet{position:absolute;inset:0;z-index:5;background:rgba(20,32,43,.35);display:flex;align-items:flex-end;animation:fade .18s ease both} @keyframes fade{from{opacity:0}to{opacity:1}} .sheet-in{width:100%;max-height:86%;overflow:auto;background:#fff;border-radius:22px 22px 0 0;padding:18px 16px 20px;animation:up .22s var(--ease) both} @keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}} .sheet-hd{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:12px} .sheet-hd h2{font-size:17px;font-weight:700;letter-spacing:.04em} .sheet-hd p{font-size:13px;color:var(--sub);line-height:1.6;margin-top:2px} /* LINE のカード（吹き出しの中） */ .fx{width:262px;background:var(--card);border-radius:18px;overflow:hidden;box-shadow:0 1px 1px rgba(20,32,43,.06)} .fx-h{padding:12px 16px 11px;background:linear-gradient(120deg,#0D3E47,#0B6B74);color:#fff} .fx-h.warn{background:linear-gradient(120deg,#6E3B00,#8A4B00)} .fx-k{display:flex;align-items:center;gap:5px;font-size:13px;color:#C9F1F4;font-weight:500;letter-spacing:.06em} .fx-h.warn .fx-k{color:#FFE2BF} .fx-k .ms{font-size:15px} .fx-h b{display:block;font-size:16px;line-height:1.5;font-weight:700;letter-spacing:.03em;margin-top:1px} .fx-lead{padding:11px 16px;background:var(--teal-pale);border-bottom:1px solid var(--line)} .fx-lead p{font-size:13.5px;line-height:1.65;font-weight:500;color:var(--teal-ink)} .fx-lead p+p{margin-top:4px} .fx-s{padding:10px 16px 10px;border-bottom:1px solid var(--line)} .fx-s:last-child{border-bottom:0} .fx-s h3{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--teal-text);letter-spacing:.08em;margin-bottom:4px} .fx-s h3 .num{color:var(--sub);font-weight:600} .fx-ev{display:flex;gap:10px;font-size:14px;line-height:1.7;padding-left:9px;position:relative} .fx-ev::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--teal)} .fx-ev.private::before{background:var(--priv)} .fx-ev .num{width:40px;flex:none;font-weight:600} .fx-ev em{font-style:normal;color:var(--sub)} .fx-td{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:1.75} .fx-td em{font-style:normal;font-size:13px;color:var(--sub);white-space:nowrap} .fx-kv{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;line-height:1.85} .fx-kv b{font-weight:600;white-space:nowrap} .fx-kv b small{font-size:12px;margin-left:1px} .fx-kv.warn b{color:var(--warn)} .fx-sub{font-size:13px;color:var(--sub);font-weight:400;line-height:1.3} .fx-kv span{line-height:1.45} .fx-big{display:flex;flex-direction:column;margin-bottom:6px} .fx-big span{font-size:13px;color:var(--sub)} .fx-big b{font-size:28px;font-weight:600;line-height:1.3} .fx-big small{font-size:12px;color:var(--sub)} .fx-note{font-size:13px;color:var(--sub);line-height:1.6;margin-top:4px} .fx-empty{font-size:13.5px;color:var(--sub)} .fx-b{padding:8px 16px 14px} .fx-b .btn{min-height:44px;font-size:14px} .fx-b.two{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fx-b.three{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fx-b.three .btn{padding:0 8px} .fx-b.three .btn:last-child{grid-column:1/-1} .fx-done{display:flex;align-items:center;gap:6px;padding:11px 16px;font-size:13.5px;font-weight:700;color:var(--teal-text);background:var(--teal-pale);border-top:1px solid var(--line)} .fx-done.mute{color:var(--sub);background:var(--bg)} .fx-help{display:flex;gap:10px;align-items:flex-start;padding:5px 0} .fx-help .ms{color:var(--teal-text);font-size:20px;margin-top:2px} .fx-help b{display:block;font-size:14px} .fx-help span{font-size:13px;color:var(--sub);line-height:1.55;display:block} .fx-why{font-size:14px;font-weight:700;color:var(--warn)} .fx-tips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .fx-tips li{font-size:13px;padding:3px 10px;border-radius:999px;background:var(--bg);color:var(--ink)} .fx-ask{display:flex;gap:6px;align-items:center;margin-top:6px;padding:7px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:700} .fx-ask .ms{font-size:17px} .rc-kv{display:grid;grid-template-columns:62px 1fr;gap:8px;font-size:13.5px;line-height:1.85} .rc-kv span{color:var(--sub)} .rc-kv b{font-weight:500;word-break:break-word} .rc-kv.rc-amt b{font-size:20px;font-weight:600;line-height:1.5} .rc-kv.rc-amt span{padding-top:3px} .rc-rates{font-size:13px;font-weight:500!important} .fx.conf .cf-q{display:flex;gap:6px;align-items:center;padding:12px 16px 4px;font-size:13px;color:var(--sub);font-weight:500} .fx.conf .cf-q .ms{font-size:18px;color:var(--teal-text)} .cf-d{padding:4px 16px 12px} .cf-when{font-size:18px;font-weight:600;line-height:1.45} .cf-t{font-size:15px;font-weight:700;margin-top:2px} .cf-m{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--sub);margin-top:4px;line-height:1.5} .cf-m .ms{font-size:16px} .cf-m.nf{flex-wrap:wrap;align-items:flex-start} .cf-m.nf .ms{margin-top:3px} .cf-m.nf > span:not(.ms){flex:1;min-width:0} .cf-m .cf-link{flex:0 0 auto;margin:2px 0 0 21px;min-height:32px;padding:0;color:var(--teal-text);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px;text-align:left} .cf-m.nf::after{content:"";flex-basis:100%;order:1} .cf-m.nf .cf-link{order:2} .cf-kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px} .cf-kind .kd{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:700;color:var(--sub);transition:background .15s,border-color .15s} .cf-kind .kd i{width:9px;height:9px;border-radius:3px;background:var(--teal)} .cf-kind .kd.private i{background:var(--priv)} .cf-kind .kd[aria-pressed="true"].work{background:var(--teal-soft);border-color:var(--teal-line);color:var(--teal-text)} .cf-kind .kd[aria-pressed="true"].private{background:var(--priv-soft);border-color:var(--priv-line);color:var(--priv-text)} .cf-kind .kd:disabled{cursor:default} .cf-kind .kd:disabled[aria-pressed="false"]{display:none} .cf-guess{flex-basis:100%;font-size:13px;color:var(--sub);line-height:1.5} .cf-from{font-size:13.5px;color:var(--sub);text-decoration:line-through;text-decoration-color:var(--icon-mute);margin-top:4px} .cf-arrow{color:var(--teal-text);line-height:1;margin:2px 0} .cf-arrow .ms{font-size:18px} .cf-picks{display:flex;flex-direction:column;gap:6px;padding:6px 12px 4px} .pk{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);text-align:left;font-size:13.5px;line-height:1.45;transition:border-color .15s,background .15s} .pk:hover:not(:disabled){border-color:var(--teal-text);background:var(--teal-pale)} .pk b{width:24px;height:24px;border-radius:50%;background:var(--teal-soft);color:var(--teal-text);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none} .pk > span{display:flex;flex-direction:column} .pk > span .num{font-size:13px;color:var(--sub)} .pk:disabled{opacity:.6;cursor:default} .fx.conf.slim .cf-q{padding:10px 14px;color:var(--sub);font-size:13px} .chip.act{gap:2px;padding-right:8px;font-weight:700} .chip.act .ms{font-size:18px} .conf .fx-b{border-top:1px solid var(--line);padding-top:10px;background:var(--card-2)} /* ================= 領収書の文字の写し ================= */ .paper{position:relative;width:240px;background:#fff;color:#1F2A33;padding:18px 18px 16px;font-size:12px;line-height:1.55;border:1px solid #E6E9EC;box-shadow:0 1px 3px rgba(20,32,43,.06)} .p-stamp{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;color:var(--sub);border:1px solid #CBD2D8;border-radius:4px;padding:0 5px;letter-spacing:.1em;font-family:'Noto Sans JP',sans-serif;background:#fff} .p-shop{font-size:14.5px;font-weight:700;text-align:center;margin-top:12px;padding:0 28px;letter-spacing:.04em;line-height:1.4} .p-addr{font-size:10.5px;text-align:center;color:#56616B} .p-title{text-align:center;font-weight:700;letter-spacing:.4em;margin:8px 0 2px;font-size:12.5px} .p-date{text-align:center;font-size:11px;color:#3A4650} .p-sep{border-top:1px dashed #B9C1C8;margin:7px 0} .p-ln{display:flex;justify-content:space-between;gap:8px} .p-ln span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .p-tot{font-size:14px;font-weight:700;margin-bottom:2px} .p-sm{font-size:10.5px;color:#3A4650} .p-foot{font-size:10px;color:#56616B;margin-top:4px} .p-reg{font-size:10px;color:#3A4650;margin-top:6px;text-align:center} .paper.k-taxi .p-title{letter-spacing:.12em} .paper.k-slip{background:#FCFCF8} .paper.k-faint{filter:blur(.6px)} .paper.k-faint > *:not(.p-stamp){opacity:.22} .paper.k-hand{font-family:'Yomogi','Noto Sans JP',cursive;padding:22px 20px 18px;background:#FFFEF9;color:#24303A} .h-title{text-align:center;font-size:20px;letter-spacing:.3em;margin:6px 0 10px;border-bottom:1px solid #9AA4AD;padding-bottom:4px} .h-to{font-size:13px;margin-bottom:8px;border-bottom:1px solid #C9D0D6;padding-bottom:2px} .h-amt{font-size:22px;text-align:center;margin:6px 0 8px;letter-spacing:.06em} .h-for{font-size:13px} .h-date{font-size:13px;margin-top:4px} .h-note{font-size:11px;color:#56616B;margin-top:8px} .h-shop{font-size:13.5px;text-align:right;margin-top:8px} .h-smudge{display:inline-block;color:transparent;background:radial-gradient(closest-side,rgba(60,70,80,.38),rgba(60,70,80,.08));border-radius:4px;filter:blur(1px);min-width:1.4em} /* 小さな見本の画像（同じ文字の写しを縮める） */ .thumb{position:relative;display:block;width:56px;height:72px;overflow:hidden;border-radius:8px;background:var(--card);border:1px solid var(--line);flex:none} .thumb .paper{position:absolute;left:0;top:0;transform:scale(.233);transform-origin:top left;border:0;box-shadow:none} .thumb.lg{width:100%;height:150px;border-radius:12px;background:var(--bg)} .thumb.lg .paper{left:50%;top:10px;transform:translateX(-50%) scale(.5);transform-origin:top center;box-shadow:0 2px 8px rgba(20,32,43,.08)} .thumb.xl{width:auto;height:auto;overflow:visible;border:0;background:none;display:flex;justify-content:center} .thumb.xl .paper{position:relative;transform:none;width:260px;box-shadow:0 2px 6px rgba(20,32,43,.06),0 12px 32px rgba(20,32,43,.10);border:0} .thumb.pv{width:100%;height:auto;overflow:visible;border:0;background:none} .thumb.pv .paper{position:relative;transform:none;width:100%;box-shadow:none;border:1px solid var(--line-3)} /* 見本を選ぶ */ .pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px} .pick-b{position:relative;display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;transition:border-color .18s,box-shadow .18s} .pick-b:hover:not(:disabled){border-color:var(--teal-text);box-shadow:0 0 0 3px rgba(0,123,133,.12)} .pick-l{font-size:14px;font-weight:700;padding:0 4px} .pick-u{position:absolute;top:14px;right:14px;font-size:13px;font-weight:700;color:var(--sub);background:var(--card);border:1px solid var(--line);padding:1px 8px;border-radius:999px} .pick-all{margin-top:12px;font-size:13px;color:var(--sub)} @media (max-width:600px){ .pick{grid-template-columns:1fr 1fr;gap:10px} .thumb.lg{height:132px} .thumb.lg .paper{transform:translateX(-50%) scale(.44)} } /* ================= 専用画面 ================= */ .app{display:grid;grid-template-columns:240px minmax(0,1fr) var(--chat-w,380px);height:calc(100dvh - var(--strip))} .side{background:var(--side-bg2);border-style:solid;border-color:var(--side-line);border-width:var(--side-bw);margin:var(--side-m);border-radius:var(--side-r);box-shadow:var(--side-shadow);padding:26px 18px 20px;display:flex;flex-direction:column;overflow:auto} .side-logo{width:132px;margin:0 0 24px 10px} .side-shoot{width:100%;margin-bottom:18px;min-height:48px} .side-nav{display:flex;flex-direction:column;gap:4px} .nav-b{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:12px;color:var(--nav-ink);font-weight:500;font-size:15px;text-align:left;transition:background .18s,color .18s} .nav-b:hover{background:var(--line-2);color:var(--ink)} .nav-b .ms{font-size:22px;color:var(--nav-ic)} .nav-b.on{background:var(--nav-on-bg);color:var(--nav-on-ink);box-shadow:inset 0 0 0 1px var(--nav-on-line),var(--nav-on-shadow);font-weight:700} .nav-b.on .ms{color:inherit} .nav-b .cnt{margin-left:auto;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center} .side-status{margin-top:auto;padding:14px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--sub);line-height:1.7;display:flex;flex-direction:column} .side-status b{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13.5px;font-weight:700;margin-bottom:2px} .side-status .ss{display:flex;justify-content:space-between;gap:8px} .side-status .ss em{font-style:normal} .side-status b i{width:8px;height:8px;border-radius:50%;background:var(--ok-dot);box-shadow:0 0 0 3px rgba(31,164,99,.15)} .main{overflow-y:auto;outline:none;scroll-behavior:auto} .page{max-width:1080px;margin:0 auto;padding:30px 32px 48px;display:flex;flex-direction:column;gap:20px} .page.enter{animation:fade .2s ease both} .chat-col{border-left:1px solid var(--line);background:var(--chat-bg);padding:var(--chat-m);display:flex;min-height:0} .chat-col > .chat{flex:1} .tabs,.fab{display:none} @media (min-width:1024px) and (max-width:1279.98px){ .app{grid-template-columns:220px minmax(0,1fr) var(--chat-w,336px)} .page{padding:26px 24px 40px} } @media (max-width:1023.98px){ .app{grid-template-columns:220px minmax(0,1fr)} .chat-col{display:none} } @media (max-width:767.98px){ .app{display:block;height:auto;min-height:calc(100dvh - var(--strip))} .side{display:none} .main{overflow:visible} .page{padding:20px 16px calc(132px + env(safe-area-inset-bottom));gap:16px} .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--tabs-bg);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(20,32,43,.04)} .tab-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:13px;font-weight:500;color:var(--sub);min-height:56px} .tab-b .ms{font-size:25px} .tab-b.on{color:var(--teal-text);font-weight:700} .tab-b i{position:absolute;top:5px;left:calc(50% + 8px);min-width:19px;height:19px;border-radius:999px;background:var(--badge-bg);color:var(--badge-ink);font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px} .fab{display:inline-flex;align-items:center;gap:6px;position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:41;height:56px;padding:0 22px 0 18px;border-radius:28px;background:var(--teal-text);color:var(--on-acc);font-weight:700;font-size:16px;letter-spacing:.06em;box-shadow:0 8px 20px rgba(0,90,98,.32)} .fab .ms{font-size:24px} body[data-view="line"] .fab, body[data-view="line"] .tabs{display:none} } /* ページの見出し */ .pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .pg-head h1{font-size:28px;font-weight:700;line-height:1.3;letter-spacing:.04em} .pg-date{color:var(--sub);font-size:14px;margin-top:4px} .pg-acts{display:flex;gap:8px;flex-wrap:wrap} @media (max-width:767.98px){ .pg-head h1{font-size:24px} .pg-head .btn{min-height:44px} .pg-head .btn[data-act="shoot"]{display:none} } .card{background:var(--frame-bg);border:1px solid var(--frame-line);border-radius:var(--frame-r);box-shadow:var(--frame-shadow)} .ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap} .ch h2{font-size:17px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;gap:8px} .ch h2 .num{font-size:13px;font-weight:500;color:var(--sub)} .ch-r{font-size:13px;color:var(--sub)} .ch-r b{font-size:16px;color:var(--ink);font-weight:600;margin-left:4px} .sub{font-size:13px;color:var(--sub);margin:-4px 0 8px} .empty{font-size:14px;color:var(--sub);padding:10px 0} .big-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 16px;text-align:center} .big-empty .ms{font-size:36px;color:var(--icon-mute)} .ok-mark{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--teal-text)} .ok-mark .ms{font-size:20px} /* ホーム：お金 */ .money{padding:26px 28px 22px} .money-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)} .money .k{font-size:13.5px;font-weight:500;color:var(--sub);display:flex;align-items:center;flex-wrap:wrap} .big{font-size:44px;font-weight:600;line-height:1.2;margin-top:6px;letter-spacing:-.02em} .big small{font-size:22px;margin-right:3px} .money .m,.lsum .m{font-size:13px;color:var(--sub);margin-top:2px} .money .m b,.lsum .m b{font-weight:500;color:var(--ink)} .money-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 4px} .money-row .v{font-size:26px;font-weight:600;line-height:1.3} .money-row .v small{font-size:14px;margin-left:2px} .money-row.warn .v{color:var(--warn)} .money-alert{display:flex;align-items:center;gap:10px;margin-top:12px;padding:6px 6px 6px 14px;border-radius:12px;background:var(--bg);font-size:14px} .money-alert > .ms{color:var(--sub)} .money-alert > span:not(.ms){flex:1} .money-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13px;color:var(--sub);line-height:1.6} .money-note .ms{font-size:18px;margin-top:1px} @media (max-width:767.98px){ .money{padding:20px 18px 18px} .big{font-size:40px} .money-top{align-items:stretch;flex-direction:column} .money-top .btn{display:none} .money-row{flex-direction:column;align-items:stretch} .money-row .btn{width:100%} .money-alert{flex-wrap:wrap;padding:10px 12px 8px 14px} .money-alert .btn{width:100%;background:var(--card);border:1px solid var(--line)} } .home-2{display:grid;grid-template-columns:1.25fr 1fr;gap:20px;align-items:start} @media (max-width:1279.98px){ .home-2{grid-template-columns:1fr} } .sched,.todo,.todos,.cal{padding:22px 24px} @media (max-width:767.98px){ .sched,.todo,.todos,.cal{padding:18px 16px} } .legend{display:inline-flex;gap:12px;font-size:13px;color:var(--sub)} .legend span{display:inline-flex;align-items:center;gap:5px} .legend i,.seg2 i{width:10px;height:10px;border-radius:3px;display:inline-block} .lg-w{background:var(--teal)} .lg-p{background:var(--priv)} .ev{width:100%;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:12px;padding:11px 10px 11px 14px;border-radius:12px;text-align:left;position:relative;transition:background .15s;min-height:56px} .ev{border:1px solid var(--chip-w-line);background:var(--chip-w-bg)} .ev.private{border-color:var(--chip-p-line);background:var(--chip-p-bg)} .ev:hover{filter:brightness(1.06)} .ev+.ev{margin-top:6px} .ev-t{font-size:16px;font-weight:600} .ev-x{display:flex;flex-direction:column;min-width:0} .ev-tt{font-size:15px;font-weight:700;line-height:1.5} .ev-mm{font-size:13px;color:var(--sub);line-height:1.5} .ev.private .ev-tt{color:var(--priv-text)} .ev-go{color:var(--sub)} .tmr{margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)} .tmr h3{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em;margin-bottom:4px} .tmr .ev{min-height:48px;padding-top:7px;padding-bottom:7px} .tmr .ev-t{font-size:14.5px;color:var(--sub)} .tmr .ev-tt{font-size:14px;font-weight:500} .td{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)} .ch + .td,.sub + .td{border-top:0} .td-x{flex:1;min-width:0} .td-x b{display:block;font-size:15px;font-weight:700;line-height:1.5} .td-x span{display:block;font-size:13px;color:var(--sub);line-height:1.5} .td.due .td-x .td-due{color:var(--warn);font-weight:500} .td-x .td-nf{font-size:13px;color:var(--sub)} .td.done .td-x b{color:var(--mute);text-decoration:line-through;text-decoration-color:var(--icon-mute);font-weight:500} .td .btn .ms{font-size:18px} .home-chat-slot .chat{height:560px} .home-chat-slot:empty{display:none} /* 秘書との会話 */ .chat{display:flex;flex-direction:column;min-height:0;overflow:hidden} .chat-top{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)} .chat-av{width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none} .chat-av img{width:30px} .chat-top b{font-size:16px;font-weight:700;display:block;line-height:1.35} .chat-top span{font-size:13px;color:var(--sub);line-height:1.5;display:block} .chat-log{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(var(--card),var(--card-2))} .cm{max-width:92%;font-size:14.5px;line-height:1.7} .cm.new{animation:pop .2s var(--ease) both} .cm .cb{white-space:pre-line;padding:11px 14px;border-radius:4px 16px 16px 16px;background:var(--bg);text-wrap:pretty;word-break:break-word} .cm .ct{font-size:13px;color:var(--mute);margin-top:3px} .cm.me{align-self:flex-end} .cm.me .cb{background:var(--teal-text);color:var(--on-acc);border-radius:16px 4px 16px 16px} .cm.me .ct{text-align:right} .cm .fx{width:100%;max-width:300px;border:1px solid var(--line);box-shadow:none} .chat-quick{display:flex;flex-wrap:wrap;gap:8px;padding:8px 14px 0} .chat-quick::-webkit-scrollbar{display:none} .chat-quick .chip{max-width:100%} .chat-in{display:flex;gap:8px;align-items:center;padding:12px 14px 14px} .chat-in input{flex:1;min-width:0;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:0 14px;font-size:15px} .chat-in input:focus{outline:none;border-color:var(--teal-text);background:var(--field)} .chat-in .mic{border:1px solid var(--line);background:var(--card);color:var(--teal-text)} /* 予定 */ .cal-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px} .cal-nav{display:flex;align-items:center;gap:6px} .cal-title{font-size:19px;font-weight:700;margin-left:8px;letter-spacing:.02em} .cal-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .seg2{display:inline-flex;padding:3px;border-radius:12px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px var(--seg-line)} .seg2 button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;min-width:48px;padding:0 14px;border-radius:9px;font-size:14px;font-weight:700;color:var(--sub);transition:background .18s,color .18s} .seg2 button[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} .seg2.full{display:flex;margin-bottom:16px} .seg2.full button{flex:1} .mgrid{border:1px solid var(--line);border-radius:12px;overflow:hidden} .mrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} .mrow.head span{text-align:center;font-size:13px;font-weight:700;color:var(--sub);padding:8px 0;background:var(--bg);border-bottom:1px solid var(--line)} .sun{color:var(--danger)!important} .sat{color:var(--blue-ink)!important} .mcell{position:relative;min-height:112px;padding:6px 6px 6px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:3px;transition:background .15s} .mrow .mcell:last-child{border-right:0} .mcell:hover{background:var(--card-2)} .mcell.out .mnum{color:var(--mute);font-weight:500} .mcell.out .mchip{background:var(--bg);color:var(--sub);border-color:var(--line-3)} .mnum{font-size:13px;font-weight:600;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center} .mcell.today .mnum{background:var(--teal-text);color:var(--on-acc)!important} .mcell.sel{background:var(--teal-soft)} .mcell.sel:hover{background:var(--teal-soft)} .mchips{display:flex;flex-direction:column;gap:2px;min-width:0} .mchip{display:flex;flex-direction:column;font-size:13px;line-height:1.4;padding:2px 6px 3px;border-radius:6px;background:var(--chip-w-bg);color:var(--chip-w-ink);min-width:0;border:1px solid var(--chip-w-line)} .mchip b{font-weight:600;font-size:13px} .mchip i{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mchip.private{border-color:var(--chip-p-line)} .mchip.private{background:var(--chip-p-bg);color:var(--chip-p-ink)} .mmore{font-size:13px;color:var(--sub);padding-left:6px} .mdots{display:none;gap:3px;justify-content:center} .mdots i{width:6px;height:6px;border-radius:50%;background:var(--teal)} .mdots i.private{background:var(--priv)} .dsel{margin-top:16px} .dsel h3,.wlab{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px} .today-tag{font-size:13px;font-weight:700;color:var(--on-acc);background:var(--teal-text);padding:1px 8px;border-radius:999px} .dsel-td{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .dtd{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;padding:6px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-weight:500} .dtd em{font-style:normal;font-size:13px;opacity:.9} .dtd .ms{font-size:17px} .wlist{display:flex;flex-direction:column} .wday{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)} .wday:first-child{border-top:0} .wday.today{background:linear-gradient(90deg,var(--teal-soft),rgba(230,248,249,0) 60%);border-radius:12px;padding-left:10px} .wlab{flex-direction:column;align-items:flex-start;gap:0} .wlab .num{font-size:18px;font-weight:600} .wlab b{font-size:13px;color:var(--sub);font-weight:500} .wlab em{font-style:normal;font-size:13px;color:var(--teal-text);font-weight:700} .wevs .empty{padding:6px 0;font-size:13px} .dview .ev{min-height:60px} .done-fold{margin-top:10px;border-top:1px solid var(--line);padding-top:6px} .done-fold summary{display:flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--sub);cursor:pointer;list-style:none} .done-fold summary::-webkit-details-marker{display:none} .done-fold[open] summary .ms{transform:rotate(180deg)} .done-fold summary .ms{transition:transform .2s} @media (max-width:767.98px){ .cal-bar{gap:10px} .cal-title{font-size:17px;margin-left:4px} .cal-right{width:100%;justify-content:space-between} .mcell{min-height:52px;padding:4px 2px;align-items:center} .mchips{display:none} .mdots{display:flex} .mnum{font-size:13.5px} .wday{grid-template-columns:64px 1fr;gap:8px} } /* 領収書 */ .alerts{display:flex;flex-direction:column;gap:10px} .alert{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-radius:var(--r16);background:var(--card);box-shadow:var(--shadow)} .alert > .ms{font-size:24px;color:var(--sub)} .alert.warn{background:var(--warn-bg);box-shadow:none} .alert.warn > .ms{color:var(--warn)} .alert > div{flex:1;min-width:0} .alert b{display:block;font-size:15px;line-height:1.5} .alert.warn b{color:var(--warn)} .alert span{display:block;font-size:13px;color:var(--sub);line-height:1.55} @media (max-width:767.98px){ .alert{flex-wrap:wrap} .alert .btn{width:100%} } .filt{padding:16px 18px;display:flex;flex-direction:column;gap:12px} .f-row{display:flex;gap:12px;flex-wrap:wrap} .fld{display:flex;flex-direction:column;gap:4px;min-width:0} .fld > span:first-child{font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.04em;display:flex;align-items:center;gap:6px} .fld.grow{flex:1;min-width:200px} .fld input,.fld select{height:46px;border-radius:12px;border:1px solid var(--line);background:var(--field);padding:0 12px;font-size:16px;width:100%;min-width:0;transition:border-color .18s,box-shadow .18s} .fld select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px;background-repeat:no-repeat} .fld input:focus,.fld select:focus{outline:none;border-color:var(--teal-text);box-shadow:0 0 0 3px rgba(0,123,133,.14)} .f-row .fld:not(.grow){width:200px} .srch{position:relative;display:block} .srch .ms{position:absolute;left:12px;top:13px;color:var(--sub)} .srch input{padding-left:40px} .st-seg{align-self:flex-start;max-width:100%;overflow-x:auto} .st-seg button{white-space:nowrap} @media (max-width:767.98px){ .f-row .fld:not(.grow){width:calc(50% - 6px)} .fld.grow{min-width:100%} .st-seg{align-self:stretch} .st-seg button{flex:1;padding:0 8px} } .rlist{padding:6px 10px 10px} .rl-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--sub);padding:10px 10px 8px;border-bottom:1px solid var(--line)} .rl-head b{color:var(--ink);font-weight:600;margin-left:4px} .rrow{width:100%;display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;text-align:left;transition:background .15s} .rrow+.rrow{border-top:1px solid var(--line-2)} .rrow:hover{background:var(--bg)} .rr-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .rr-t{font-size:15px;font-weight:700;line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px} .rr-m{font-size:13px;color:var(--sub);line-height:1.5} .rr-m .cand{height:18px;font-size:13px;margin-right:4px} .rr-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none} .rr-a{font-size:16px;font-weight:600} .rr-a.neg,.tbl tr.neg td.num.r:first-of-type{color:var(--danger)} .rrow.void .rr-a{text-decoration:line-through;color:var(--mute)} .rrow.void .rr-t{color:var(--sub)} .flag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:13px;font-weight:700;letter-spacing:.02em;background:var(--line-2);color:var(--sub)} .flag.check{background:var(--priv-soft);color:var(--priv-text)} .flag.warn{background:var(--warn-bg);color:var(--warn)} .flag.mute{background:none;color:var(--mute);border:1px solid var(--line);font-weight:500} .st{display:inline-flex;align-items:center;gap:3px;height:24px;padding:0 9px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap} .st .ms{font-size:15px} .st-read{background:var(--warn-bg);color:var(--warn)} .st-ok{background:var(--teal-soft);color:var(--teal-text)} .st-paper{background:var(--line-2);color:var(--sub)} .st-void{background:var(--danger-bg);color:var(--danger)} @media (max-width:767.98px){ .rrow{gap:12px;padding:10px 6px;align-items:flex-start} .rr-t{font-size:14.5px} .rr-m{font-size:13px} .rr-a{font-size:15px} .rr-t .flag.mute{display:none} .rl-head{flex-direction:column;gap:0} } .rr-m .nw{white-space:nowrap} /* 明細 */ .mchips-row{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:2px 0} @media (max-width:767.98px){ .mchips-row{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none} .mchips-row::-webkit-scrollbar{display:none} } .mc{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14.5px;font-weight:700;color:var(--sub);transition:background .18s,color .18s,border-color .18s} .mc:hover{border-color:var(--line-3);color:var(--ink)} .mc[aria-pressed="true"]{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--inv-line);box-shadow:var(--inv-shadow)} .mc-env{font-size:16px!important;opacity:.75} .mc.all{margin-left:0} .lsum{padding:24px 28px} .lsum .k{font-size:13.5px;font-weight:500;color:var(--sub);display:flex;align-items:center;flex-wrap:wrap} .ls-split{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-top:18px} .ls-split > div{padding:14px 16px;border-radius:12px;background:var(--bg);display:flex;flex-direction:column} .ls-split > div.chk{background:var(--priv-soft)} .ls-split .k{font-size:13px} .ls-split b{font-size:24px;font-weight:600;line-height:1.35} .ls-split b small{font-size:14px;margin-right:2px} .ls-split small{font-size:12px;color:var(--sub)} .ls-split .chk .k,.ls-split .chk small{color:var(--priv-text)} .ls-plus{align-self:center;font-size:20px;color:var(--mute)} .ls-warn,.ls-env{display:flex;align-items:center;gap:10px;margin-top:12px;padding:8px 8px 8px 14px;border-radius:12px;font-size:14px} .ls-warn{background:var(--warn-bg);color:var(--warn)} .ls-warn > span:not(.ms){flex:1;font-weight:500} .ls-warn > .ms{font-size:22px} .ls-env{border:1px solid var(--line)} .ls-env > .ms{color:var(--sub);font-size:22px} .ls-env > div{flex:1;min-width:0} .ls-env b{display:block;font-size:14px} .ls-env span{display:block;font-size:13px;color:var(--sub);line-height:1.5} @media (max-width:767.98px){ .lsum{padding:20px 18px} .ls-split{gap:8px} .ls-plus{display:none} .ls-env{flex-wrap:wrap} .ls-warn{flex-wrap:wrap;padding:10px 12px} .ls-warn .btn{width:100%;background:var(--card)} .ls-split{grid-template-columns:1fr} .ls-split > div{padding:12px 14px} .ls-split b{font-size:20px} .ls-env .btn{width:100%} } .lcats,.lcat,.lcheck{padding:20px 22px} .tbl-wrap{overflow-x:auto;margin:0 -4px;padding:0 4px} .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl th{font-size:13px;font-weight:700;color:var(--sub);text-align:left;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.04em} .tbl td{padding:9px 8px;border-bottom:1px solid var(--line-2);vertical-align:top;line-height:1.55} .tbl td .flag{margin-left:6px;height:18px;font-size:13px} .tbl .r{text-align:right} .tbl td.num{white-space:nowrap} .tbl td.reg{font-size:13px;color:var(--sub)} .tbl tfoot td{font-weight:700;border-bottom:0;border-top:1px solid var(--line);padding-top:11px} .tbl tfoot td.num{font-size:15px} .tbl tr.neg td[data-l="金額"]{color:var(--danger)} .tbl.cats td{font-size:14.5px;padding:10px 8px} .tbl.cats td.num{font-weight:600} @media (max-width:767.98px){ .lcats,.lcat,.lcheck{padding:16px} .lcat .tbl thead,.lcheck .tbl thead{display:none} .lcat .tbl tbody tr,.lcheck .tbl tbody tr{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:10px 0;border-bottom:1px solid var(--line-2)} .lcat .tbl tbody td,.lcheck .tbl tbody td{border:0;padding:0;font-size:13px;color:var(--sub)} .lcat .tbl td[data-l="支払先"],.lcheck .tbl td[data-l="支払先"]{grid-column:1;grid-row:1;font-size:14.5px;font-weight:700;color:var(--ink)} .lcat .tbl td[data-l="金額"],.lcheck .tbl td[data-l="金額"]{grid-column:2;grid-row:1;font-size:15px;font-weight:600;color:var(--ink);text-align:right} .lcat .tbl td[data-l="日付"],.lcheck .tbl td[data-l="日付"]{grid-column:2;grid-row:2;text-align:right} .lcat .tbl td[data-l="内容"],.lcheck .tbl td[data-l="内容"]{grid-column:1;grid-row:2} .lcat .tbl td[data-l="税率"],.lcat .tbl td[data-l="支払い"],.lcat .tbl td[data-l="登録番号"],.lcat .tbl td[data-l="No."], .lcheck .tbl td[data-l="税率"],.lcheck .tbl td[data-l="支払い"],.lcheck .tbl td[data-l="登録番号"],.lcheck .tbl td[data-l="No."]{grid-column:1/-1;display:inline;font-size:13px} .lcat .tbl td[data-l="税率"]::before,.lcheck .tbl td[data-l="税率"]::before{content:"税率 "} .lcat .tbl td[data-l="No."]::before,.lcheck .tbl td[data-l="No."]::before{content:"No."} .lcat .tbl td.r[data-l="No."],.lcheck .tbl td.r[data-l="No."]{text-align:left} .lcheck .tbl td[data-l="確かめる訳"]{grid-column:1/-1;color:var(--priv-text);font-weight:500;font-size:13px;margin-top:2px} .lcat .tbl tfoot tr,.lcheck .tbl tfoot tr{display:flex;justify-content:space-between} .lcat .tbl tfoot td:empty,.lcheck .tbl tfoot td:empty{display:none} .lcat .tbl tbody tr > td:nth-child(n+5),.lcheck .tbl tbody tr > td:nth-child(n+5){display:inline-block;margin-right:10px} } /* ================= 窓 ================= */ .layer{position:relative;z-index:80} .ov{position:fixed;inset:0;z-index:80;background:rgba(20,32,43,.42);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .18s ease both} .ov.top{z-index:90} .dlg:focus{outline:none} .print:focus{outline:none} .dlg{width:min(560px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--card);border-radius:20px;box-shadow:var(--shadow-2);overflow:hidden;animation:dlg .22s var(--ease) both} @keyframes dlg{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .dlg-shoot,.dlg-detail,.dlg-dup{width:min(940px,100%)} .dlg-confirm{width:min(440px,100%);padding:24px 24px 20px} .dlg-confirm h2{font-size:18px;font-weight:700;line-height:1.5;letter-spacing:.02em} .dlg-confirm p{font-size:14.5px;color:var(--sub);margin-top:8px;line-height:1.7} .dlg-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} .dlg-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 14px 24px;border-bottom:1px solid var(--line)} .dlg-hd h2{font-size:19px;font-weight:700;line-height:1.45;letter-spacing:.02em} .dlg-hd p{font-size:13.5px;color:var(--sub);margin-top:3px;line-height:1.6} .dlg-hd .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px} .dlg-bd{padding:20px 24px;overflow-y:auto;flex:1} .dlg-ft{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px;border-top:1px solid var(--line);background:var(--card-2);flex-wrap:wrap} .dlg-ft .sp,.rv-ft .sp{flex:1} .guide{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--teal-ink);background:var(--teal-pale);border-radius:12px;padding:10px 14px;margin-bottom:14px} .guide .ms{color:var(--teal-text)} .split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start} .split-l{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0;background:var(--bg);border-radius:16px} .src{font-size:13px;color:var(--sub)} .reading-bd{display:flex;justify-content:center;padding:32px 24px} .read-card{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .read-card p{font-size:14px;color:var(--sub)} .read-bar{width:220px;height:4px;border-radius:2px;background:var(--line);overflow:hidden} .read-bar i{display:block;height:100%;width:40%;background:var(--teal-text);border-radius:2px;animation:slide 1s ease-in-out infinite} @keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}} .retake{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center} .retake-why{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--warn);margin-bottom:6px} .done-big{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px} .done-big .ms{font-size:44px;color:var(--teal-text)} .done-big p{font-size:15px;line-height:1.8} .void-note{display:flex;gap:8px;align-items:center;margin:12px 24px 0;padding:10px 14px;border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:13.5px;font-weight:500} .void-note.mute{background:var(--bg);color:var(--sub)} @media (max-width:767.98px){ .ov{padding:0;align-items:flex-end} .dlg{width:100%;max-height:calc(100dvh - 24px);border-radius:20px 20px 0 0} .dlg-confirm{border-radius:20px 20px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))} .dlg-bd{padding:16px} .dlg-hd{padding:16px 12px 12px 16px} .dlg-ft{padding:12px 16px calc(12px + env(safe-area-inset-bottom))} .dlg-ft .btn{flex:1} .dlg-ft .sp{display:none} .split{grid-template-columns:1fr;gap:16px} .split-l{position:static} .thumb.xl .paper{width:240px} .retake{grid-template-columns:1fr;justify-items:center;text-align:center} .retake .fx-tips{justify-content:center} } /* 欄 */ .rform{display:flex;flex-direction:column;gap:14px} .fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end} .fg3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .fld.need > span:first-child{color:var(--warn)} .fld.need input{border-color:var(--warn-line);background:var(--warn-bg);box-shadow:0 0 0 3px rgba(232,182,117,.18)} .fld.doubt input,.fld.doubt select{border-color:var(--warn-line)} .fld em{font-style:normal;font-size:13px;font-weight:700;color:var(--warn);background:var(--warn-bg);padding:1px 7px;border-radius:999px} .ask-box{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn)} .ask-box b{display:block;font-size:14.5px} .ask-box > .ms{font-size:22px;margin-top:1px} .ask-box span{display:block;font-size:13px;line-height:1.55} .day-in{display:flex;align-items:center;gap:8px} .day-in input{width:84px!important;text-align:center;-moz-appearance:textfield} .day-in input::-webkit-outer-spin-button,.day-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .day-in b{font-weight:500;font-size:15px;white-space:nowrap} .lines{border:1px solid var(--line);border-radius:14px;padding:10px 14px 12px} .lines legend,.sub-f legend{font-size:13px;font-weight:700;color:var(--sub);padding:0 6px;letter-spacing:.04em} .lrow{display:grid;grid-template-columns:minmax(0,1fr) 128px 104px;gap:10px;align-items:end} .lrow + .lrow{margin-top:10px} .lrow .fld.rate select{padding-right:22px} .yen-in{position:relative;display:block} .yen-in b{position:absolute;left:12px;top:12px;color:var(--sub);font-weight:500} .yen-in input{padding-left:28px;text-align:right} .ltot{display:flex;justify-content:flex-end;align-items:baseline;gap:12px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--sub)} .ltot b{font-size:20px;font-weight:600;color:var(--ink)} .chk-l{display:flex;align-items:center;gap:10px;min-height:46px;font-size:14px;cursor:pointer} .chk-l input{width:22px;height:22px;accent-color:var(--teal-text);flex:none} .sub-f{border:1px solid var(--line);border-radius:14px;padding:10px 14px 14px} .ai-orig{border-radius:12px;background:var(--bg);padding:0 14px} .ai-orig summary{display:flex;align-items:center;gap:6px;min-height:44px;font-size:13.5px;font-weight:500;color:var(--sub);cursor:pointer;list-style:none} .ai-orig summary::-webkit-details-marker{display:none} .ai-orig > div{padding:0 0 12px;font-size:13px;color:var(--sub);line-height:1.7} .ai-orig ul{padding-left:18px} .form-err{padding:10px 14px;border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:14px;font-weight:500} @media (max-width:767.98px){ .fg2{grid-template-columns:1fr} .fg3{grid-template-columns:1fr 1fr} .fg3 .fld:last-child{grid-column:1/-1} .lrow{grid-template-columns:1fr 1fr} .lrow .fld:first-child{grid-column:1/-1} } /* まとめて確かめる（全画面） */ .ov.full{padding:0;align-items:stretch;justify-content:stretch;top:var(--strip)} .dlg-review{width:100%;max-height:none;height:100%;border-radius:0;background:var(--bg);animation:fade .2s ease both} .rv-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 32px;background:var(--card);border-bottom:1px solid var(--line)} .rv-top h2{font-size:20px;font-weight:700;letter-spacing:.02em} .rv-top p{font-size:13.5px;color:var(--sub)} .rv-prog{display:flex;align-items:center;gap:14px;padding:12px 32px;background:var(--card);border-bottom:1px solid var(--line);font-size:13.5px;font-weight:600} .rv-prog .bar{flex:1;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden} .rv-prog .bar i{display:block;height:100%;background:var(--teal-text);border-radius:3px;transition:width .25s var(--ease)} .rv-prog span:last-child{color:var(--sub);font-weight:500} .dup-inline{display:flex;align-items:center;gap:12px;margin:16px 32px 0;padding:12px 12px 12px 16px;border-radius:14px;background:var(--warn-bg);color:var(--warn)} .dup-inline > div:nth-child(2){flex:1} .dup-inline b{display:block;font-size:14.5px} .dup-inline > .ms{font-size:24px} .dup-inline span{font-size:13px} .dup-b{display:flex;gap:8px} .rv-body{flex:1;overflow-y:auto;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,640px);gap:32px;justify-content:center;padding:24px 32px 32px;align-items:start} .rv-l{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 0;border-radius:16px;background:var(--bg-2)} .rv-r{background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:22px 22px} .rv-ft{display:flex;align-items:center;gap:10px;padding:14px 32px calc(14px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)} .rv-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:32px} .rv-done > .ms{font-size:56px;color:var(--teal-text)} .rv-done h3{font-size:22px;font-weight:700} .rv-done p{font-size:15px;color:var(--sub);max-width:460px} .rv-done p b{color:var(--ink);font-weight:600} .rv-done-b{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;justify-content:center} @media (max-width:767.98px){ .rv-top{padding:12px 16px} .rv-top h2{font-size:16.5px;line-height:1.45} .rv-top p{display:none} .rv-top .btn{padding:0 12px} .rv-prog{padding:10px 16px;gap:10px} .dup-inline{margin:12px 16px 0;flex-wrap:wrap} .dup-b{width:100%} .dup-b .btn{flex:1} .rv-body{grid-template-columns:1fr;padding:16px;gap:16px} .rv-l{position:static;padding:16px 0} .rv-r{padding:16px} .rv-ft{padding:10px 16px calc(10px + env(safe-area-inset-bottom));flex-wrap:wrap} .rv-ft .sp{display:none} .rv-ft .btn.lg{flex:1 1 100%;order:-1} .rv-ft .btn.sec,.rv-ft .btn.ghost{flex:1} } /* 重なり */ .dup-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .dup-c{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border-radius:16px;background:var(--bg)} .dup-c dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13.5px;width:100%;max-width:260px} .dup-c dt{color:var(--sub)} .dup-help{margin-top:16px;font-size:13.5px;color:var(--sub);line-height:1.7} @media (max-width:767.98px){ .dup-grid{grid-template-columns:1fr 1fr;gap:8px} .dup-c{padding:10px 6px} .dup-c .thumb.xl .paper{width:150px;font-size:9px;padding:12px 10px} .dup-c dl{font-size:13px} .dup-c .btn{width:100%;padding:0 6px;font-size:13px} } /* 予定の中身 */ .ev-dl{display:grid;grid-template-columns:auto 1fr;gap:12px 18px;font-size:15px} .ev-dl dt{display:flex;align-items:center;gap:8px;color:var(--sub);font-size:13.5px;white-space:nowrap} .ev-dl dt .ms{font-size:19px} .aform{display:flex;flex-direction:column;gap:14px} /* 知らせ */ .toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,20px);opacity:0;pointer-events:none;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;background:var(--toast-bg);color:var(--toast-ink);font-size:14.5px;font-weight:500;box-shadow:var(--shadow-2);transition:opacity .2s var(--ease),transform .2s var(--ease);max-width:calc(100% - 32px)} .toast .ms{color:var(--toast-icon)} .toast.on{opacity:1;transform:translate(-50%,0)} @media (max-width:767.98px){ .toast{bottom:calc(148px + env(safe-area-inset-bottom))} body[data-view="line"] .toast{bottom:calc(220px + env(safe-area-inset-bottom))} } /* ================= 印刷の見た目 ================= */ .print{position:fixed;inset:0;z-index:100;background:#E7ECEF;overflow-y:auto} .pv-bar{position:sticky;top:0;z-index:2;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .pv-bar-in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px} .pv-bar-t{flex:1;min-width:0} .pv-bar-t b{display:block;font-size:15px} .pv-bar-t span{display:block;font-size:12.5px;color:var(--sub)} @media (max-width:640px){ .pv-bar-t span{display:none} .pv-bar-in{gap:8px} .pv-bar .btn{padding:0 12px;font-size:14px} } .pv-pages{display:flex;flex-direction:column;align-items:center;gap:20px;padding:24px 12px 48px} .sheet{width:794px;min-height:1123px;background:#fff;box-shadow:0 1px 3px rgba(20,32,43,.08),0 10px 30px rgba(20,32,43,.08);padding:56px 60px;color:#14202B;font-size:12px;line-height:1.6} .sheet.cover{display:flex;flex-direction:column} .pv-logo{width:120px;margin-bottom:56px} .pv-k{font-size:13px;font-weight:700;color:var(--teal-text);letter-spacing:.12em} .sheet.cover h1{font-size:34px;font-weight:700;letter-spacing:.1em;margin:4px 0 28px} .pv-meta{display:grid;grid-template-columns:230px 1fr;border-top:2px solid #14202B} .pv-meta dt,.pv-meta dd{padding:10px 0;border-bottom:1px solid #DDE3E8;font-size:13.5px} .pv-meta dt{color:var(--sub)} .pv-meta dd{font-weight:500} .pv-lead{margin-top:24px;padding:14px 16px;border-left:3px solid var(--teal);background:#F4FAFB;font-size:13.5px;line-height:1.75} .pv-warn{margin-top:10px;padding:10px 16px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:500} .pv-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px} .pv-2 h2{font-size:14px;font-weight:700;padding-bottom:6px;border-bottom:1px solid #14202B;margin-bottom:8px} .pv-2 ul{padding-left:18px;font-size:12.5px;line-height:1.9} .pv-foot{margin-top:auto;padding-top:28px;font-size:11px;color:var(--mute)} .pv-hd{display:flex;justify-content:space-between;font-size:10.5px;color:var(--sub);padding-bottom:8px;border-bottom:1px solid #DDE3E8;margin-bottom:18px} .pv-h{font-size:20px;font-weight:700;letter-spacing:.06em;margin-bottom:14px} .pv-cat{font-size:13.5px;font-weight:700;margin:18px 0 6px;padding-left:8px;border-left:3px solid var(--teal)} .pv-cat small{font-weight:400;color:var(--sub);font-size:11px;margin-left:4px} .pv-t{width:100%;border-collapse:collapse;font-size:11px} .pv-t th{text-align:left;font-weight:700;color:#3F4A54;background:#F2F5F7;padding:5px 6px;border-bottom:1px solid #C9D2D9;white-space:nowrap} .pv-t td{padding:5px 6px;border-bottom:1px solid #E6EAEE;vertical-align:top} .pv-t td.num{white-space:nowrap} .pv-t .r{text-align:right} .pv-t tfoot td{font-weight:700;border-top:1.5px solid #14202B;border-bottom:0;font-size:12px} .pv-sub{text-align:right;font-size:12px;margin-top:6px;color:#3F4A54} .pv-sub b{font-size:13px;color:#14202B} .pv-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;padding:12px 0;border-top:2px solid #14202B;border-bottom:1px solid #14202B;font-size:14px;font-weight:700} .pv-total b{font-size:18px} .pv-split{display:flex;justify-content:flex-end;gap:28px;margin-top:8px;font-size:12px;color:var(--sub)} .pv-split b{color:#14202B;margin-left:4px} .pv-note{font-size:12px;color:var(--sub);margin-bottom:10px} .pv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px} .pv-grid figure{break-inside:avoid} .pv-grid .paper{font-size:9px;padding:12px 10px} .pv-grid .p-shop{font-size:11px} .pv-grid .h-title{font-size:14px} .pv-grid .h-amt{font-size:15px} .pv-grid figcaption{font-size:10.5px;margin-top:4px;color:#3F4A54} @media print{ @page{size:A4;margin:12mm} html,body{background:#fff} body > *:not(#print){display:none!important} #print{position:static;overflow:visible;background:#fff} .pv-bar{display:none} .pv-pages{padding:0;gap:0;display:block} .sheet{width:auto;min-height:0;box-shadow:none;padding:0;zoom:1!important;break-after:page} .sheet:last-child{break-after:auto} .pv-t tr{break-inside:avoid} .paper{box-shadow:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ===== 2026-10-12 大晴さんの直し ===== */ /* 通知（Google カレンダーのように、数と単位を何件でも） */ .nf .nf-list{display:flex;flex-direction:column;gap:8px} .nf .nf-list:empty{display:none} .nf-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .fld .nf-row input.nf-n{width:76px;text-align:right} .fld .nf-row select.nf-u{width:104px} .fld .nf-row input.nf-at{width:124px} .nf-t{color:var(--sub);font-size:15px} .nf-del{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--sub);transition:background .15s,color .15s} .nf-del:hover{background:var(--line-2);color:var(--ink)} .nf-del .ms{font-size:22px} .nf-add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;margin-top:2px;color:var(--teal-text);font-weight:700;font-size:15px;border-radius:10px} .nf-add:hover{background:var(--teal-soft)} .nf-hint{font-size:13px;color:var(--sub);margin-top:-2px} /* 横のメニュー：上の端からロゴまでと、ロゴから「撮る」までを同じ 32px に。開け閉めできる */ .side{position:relative;padding-top:32px;transition:padding .2s} .side-top{display:flex;align-items:center;justify-content:center;margin:0 0 32px} .side-logo{width:140px;margin:0;display:block} .side-mark{display:none;width:40px} .side-tg{position:absolute;top:8px;right:8px;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--sub);transition:background .15s,color .15s} .side-tg:hover{background:var(--line-2);color:var(--ink)} .side-tg .ms{font-size:22px} .app{transition:grid-template-columns .2s ease} .app.side-min{grid-template-columns:76px minmax(0,1fr) var(--chat-w,380px)} .side-min .side{padding-left:12px;padding-right:12px;overflow:visible} .side-min .side-logo{display:none} .side-min .side-mark{display:block} .side-min .side-tg{position:static;margin:-20px auto 12px;width:44px;height:44px} .side-min .side-shoot{padding:0;width:52px;margin-left:auto;margin-right:auto} .side-min .side-shoot > span:not(.ms){display:none} .side-min .nav-b{justify-content:center;padding:0;position:relative} .side-min .nav-b > span:not(.ms):not(.cnt){display:none} .side-min .nav-b .cnt{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 5px;font-size:11px} .side-min .side-status{display:none} /* 閉じた時：上の端→印 と 印→開け閉めの印 を、見える所で測って同じ 24px に */ .side-min .side{padding-top:22px} .side-min .side-top{margin-bottom:0} .side-min .side-tg{margin:11px auto 12px} @media (min-width:1024px) and (max-width:1279.98px){ .app.side-min{grid-template-columns:76px minmax(0,1fr) var(--chat-w,336px)} } @media (max-width:1023.98px){ .app.side-min{grid-template-columns:76px minmax(0,1fr)} } /* 丸いアイコン：ロゴ全体（印と SUNROAD）を円の真ん中に */ .ln-head-av img,.ln-av img,.chat-av img{width:76%;height:auto;display:block} .ln-head-av,.ln-av,.chat-av{overflow:hidden;border:1px solid var(--line)} .nw{white-space:nowrap} .chat-av{width:48px;height:48px} .ln-av{width:40px;height:40px} .ln-head-av{width:36px;height:36px} /* ロゴは見た目の重さの真ん中（不透明な画素の重心）が円の真ん中に来るよう、logo_icon.svg の枠を合わせてある */ .ln-head-av,.ln-av,.chat-av{display:flex!important;align-items:center;justify-content:center;padding:0} .ln-head-av img,.ln-av img,.chat-av img{width:86%;height:auto;display:block;flex:none} .cf-m.cf-clash{color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:8px 10px;margin:6px 0 2px;align-items:flex-start} .cf-m.cf-clash .ms{color:var(--warn)} /* 年月を選ぶ */ .cal-tw{position:relative} .cal-h{margin:0} .cal-title{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 8px 0 10px;border-radius:10px;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.02em;transition:background .15s} .cal-title:hover{background:var(--line-2)} .cal-title .ms{font-size:22px;color:var(--sub)} .cal-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:300px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-2);padding:12px;animation:fade .15s ease both} .cp-y{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .cp-y b{font-size:16px} .cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .cp-m{min-height:44px;border-radius:10px;font-size:14px;font-weight:700;color:var(--ink);border:1px solid var(--line);background:var(--card)} .cp-m:hover{border-color:var(--teal-text)} .cp-m.on{background:var(--inv-bg);color:var(--inv-ink);border-color:var(--inv-line);box-shadow:var(--inv-shadow)} .cal-pop-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:10px} @media (max-width:767.98px){ .cal-title{font-size:17px} .cal-pop{width:min(300px,calc(100vw - 48px))} } /* ===== 決算までの道のり ===== */ .road{padding:22px 24px} .rd-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .rd-k{display:flex;flex-direction:column;padding:12px 14px;border-radius:12px;background:var(--bg)} .rd-k span{font-size:13px;color:var(--sub);font-weight:500} .rd-k b{font-size:22px;font-weight:600;line-height:1.35} .rd-k b small{font-size:13px;margin-left:2px} .rd-k small{font-size:12px;color:var(--sub)} .rd-bar{list-style:none;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px} .rd-bar li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:var(--sub)} .rd-bar li i{display:block;width:100%;height:12px;border-radius:4px;background:var(--line)} .rd-bar li.now span.num{color:var(--ink);font-weight:700} .rd-bar li.now i{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--ink)} .rd-paper i,i.rd-paper{background:#1E7F86!important} .rd-ok i,i.rd-ok{background:#7FD7DD!important} .rd-read i,i.rd-read{background:#E8A23C!important} .rd-none i{background:var(--line-2)!important} .rd-future i,i.rd-future{background:repeating-linear-gradient(135deg,var(--line-2) 0 4px,var(--card-2) 4px 8px)!important;border:1px solid var(--line)} .rd-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:13px;color:var(--sub)} .rd-lg span{display:inline-flex;align-items:center;gap:5px} .rd-lg i{width:10px;height:10px;border-radius:3px;display:inline-block} @media (max-width:767.98px){ .road{padding:18px 16px} .rd-bar li{font-size:13px} .rd-k b{font-size:19px} } /* ===== 天気 ===== */ .wx-home{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border-radius:14px;background:var(--card);box-shadow:var(--shadow)} .wx-home > .ms{font-size:30px;color:var(--teal-text)} .wx-home b{display:flex;align-items:center;gap:6px;font-size:14px} .wx-home span{display:block;font-size:13px;color:var(--sub)} .wx-home em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:13px;font-weight:700;color:var(--warn)} .wx-home em .ms{font-size:16px} .wx-tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:5px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--sub);letter-spacing:.06em;background:var(--card)} .fx-wx .wx-row{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.6} .fx-wx .wx-row .ms{font-size:22px;color:var(--teal-text)} .fx-wx h3 .wx-tag{margin-left:auto} .wx-rain{display:flex;align-items:center;gap:5px;margin-top:4px;font-size:13px;font-weight:700;color:var(--warn)} .wx-rain .ms{font-size:17px} /* ===== ふり返り・続いた週数 ===== */ .fx-diff{font-size:13px;color:var(--sub);margin-top:2px} .fx-streak{display:flex;align-items:center;gap:6px;margin-top:8px;padding:6px 10px;border-radius:10px;background:var(--bg);font-size:13px;color:var(--ink)} .fx-streak .ms{font-size:17px;color:var(--teal-text)} .fx.furi{width:100%;box-shadow:none;border:1px solid var(--line)} .mc.furi-b{gap:4px;font-weight:700;color:var(--teal-text)} .mc.furi-b .ms{font-size:18px} /* ===== 予定の中身：地図・前回 ===== */ .map-a{display:inline-flex;align-items:center;gap:4px;margin-left:10px;min-height:32px;font-size:13.5px;font-weight:700;color:var(--teal-text)} .map-a .ms{font-size:18px} .prev-memo b{display:block;font-size:13.5px;font-weight:600} .prev-memo span{display:block;font-size:14px;color:var(--ink);background:var(--bg);border-radius:10px;padding:8px 10px;margin-top:4px;line-height:1.6} /* ===== 声 ===== */ .strip-voice{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--sub);font-size:14px;font-weight:500} .strip-voice:hover{background:var(--line-2);color:var(--ink)} .strip-voice .ms{font-size:20px} .strip-voice[aria-pressed="true"]{color:var(--teal-text)} @media (max-width:640px){ .strip-voice{width:44px;justify-content:center;padding:0} } .voice-bar{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:110;width:min(560px,calc(100% - 32px))} .vb-in{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-2);animation:up .2s var(--ease) both} .vb-mic{width:44px;height:44px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:var(--teal-text);color:var(--on-acc)} .vb-mic .ms{font-size:24px} .listening .vb-mic{animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,123,133,.35)}50%{box-shadow:0 0 0 10px rgba(0,123,133,0)}} .vb-x{flex:1;min-width:0;display:flex;flex-direction:column} .vb-x b{font-size:13.5px} .vb-t{font-size:15px;line-height:1.55;color:var(--ink)} .vb-x small{font-size:11px;color:var(--sub);line-height:1.5;margin-top:4px} @media (max-width:767.98px){ .voice-bar{bottom:calc(150px + env(safe-area-inset-bottom))} } .fab-mic{display:none} @media (max-width:767.98px){ .fab-mic{display:flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(144px + env(safe-area-inset-bottom));z-index:41;width:52px;height:52px;border-radius:50%;background:var(--card);color:var(--teal-text);border:1px solid var(--line);box-shadow:0 6px 16px rgba(20,32,43,.14)} .fab-mic .ms{font-size:26px} body[data-view="line"] .fab-mic{display:none} } /* 光らせる（声で切り替えた所・案内の所） */ .hl{position:relative;animation:hlpulse 2.4s ease both;border-radius:14px} @keyframes hlpulse{0%{box-shadow:0 0 0 0 rgba(0,198,210,0)}15%{box-shadow:0 0 0 4px rgba(0,198,210,.55)}80%{box-shadow:0 0 0 4px rgba(0,198,210,.35)}100%{box-shadow:0 0 0 0 rgba(0,198,210,0)}} .guide-on{position:relative;z-index:2;box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--teal)!important;border-radius:14px;transition:box-shadow .2s} .guide-pop{position:fixed;right:24px;bottom:24px;z-index:105;width:min(380px,calc(100% - 32px));background:var(--card);border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-2);padding:16px 16px 12px;animation:up .2s var(--ease) both} .gp-hd{display:flex;align-items:center;justify-content:space-between;gap:8px} .gp-k{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--teal-text);letter-spacing:.04em} .gp-k .ms{font-size:18px} .gp-n{font-size:13px;color:var(--sub);font-weight:600} .gp-t{font-size:15px;line-height:1.75;margin:8px 0 12px} .gp-ft{display:flex;align-items:center;gap:8px} .gp-ft .sp{flex:1} .gp-v{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:13px;color:var(--sub)} .gp-v .ms{font-size:15px} @media (max-width:767.98px){ .guide-pop{left:16px;right:16px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom))} } /* ===== 会話の欄の幅を変える境目 ===== */ .chat-col{position:relative;border-left:0} .chat-split{position:absolute;left:-6px;top:0;bottom:0;width:12px;z-index:5;cursor:col-resize;touch-action:none;outline:none} .chat-split::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:1px;background:var(--line);transition:width .15s,left .15s,background .15s} .chat-split:hover::before,.chat-split:focus-visible::before,body.resizing .chat-split::before{left:4px;width:4px;background:var(--teal);border-radius:2px} .chat-split:focus-visible{outline:none} .chat-split:focus-visible::after{content:"";position:absolute;inset:0 0;border-radius:6px;box-shadow:0 0 0 3px rgba(0,123,133,.35)} body.resizing{cursor:col-resize;user-select:none;-webkit-user-select:none} body.resizing *{user-select:none!important;-webkit-user-select:none!important} @media (max-width:1023.98px){ .chat-split{display:none} } body.resizing .app{transition:none} .seg-b{white-space:nowrap} @media (max-width:420px){ .strip{gap:4px;padding:0 6px} .strip-back{width:44px;justify-content:center;padding:0} .strip-back .lbl-short{display:none} .seg-b{padding:0 10px;font-size:13px} } @media (min-width:1024px){ .guide-pop{right:calc(var(--chat-w,380px) + 24px)} } @media (min-width:1024px) and (max-width:1279.98px){ .guide-pop{right:calc(var(--chat-w,336px) + 24px)} } /* ===== お金・営業（数字はすべて架空） ===== */ .fake-tag{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:700;letter-spacing:.02em} .fake-tag .ms{font-size:17px} .warn-pill{background:var(--warn-bg)!important;color:var(--warn)!important} .mtabs-w{position:relative;align-self:flex-start;max-width:100%} .mtabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px var(--seg-line);overflow-x:auto;scrollbar-width:none;max-width:100%;scroll-behavior:smooth} .mtabs-w::before,.mtabs-w::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1} .mtabs-w::before{left:0;border-radius:14px 0 0 14px;background:linear-gradient(90deg,var(--bg),rgba(244,247,248,0))} .mtabs-w::after{right:0;border-radius:0 14px 14px 0;background:linear-gradient(270deg,var(--bg),rgba(244,247,248,0))} .mtabs-w.fl::before,.mtabs-w.fr::after{opacity:1} .mtabs::-webkit-scrollbar{display:none} .mtab{flex:none;min-height:40px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:700;color:var(--sub);white-space:nowrap;transition:background .15s,color .15s} .mtab.on{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} .pg-head.sub{margin-top:4px} .h-sub{font-size:20px;font-weight:700;letter-spacing:.04em} .fsum,.taxc,.fperiod,.fchart,.flow,.sales-stats,.frames{padding:22px 24px} .fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px} .fstat{display:flex;flex-direction:column;padding:14px 14px 12px;border-radius:12px;background:var(--bg);min-width:0} .fs-k{font-size:13px;font-weight:700;color:var(--ink)} .fstat b{font-size:24px;font-weight:600;line-height:1.35;margin:2px 0} .fstat b small,.hm b small,.tx-rows b small,.per b small{font-size:.62em;margin-right:2px} .fs-m{font-size:13px;color:var(--sub);line-height:1.5} .fs-n{font-size:13px;color:var(--ink);margin-top:4px;line-height:1.5} .link-s{min-height:28px;padding:0;color:var(--teal-text);font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px} @media (max-width:1279.98px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} } .taxc{border:1px solid var(--warn-line)} .tx-big{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap} .tx-big b{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em} .tx-big span{font-size:13px;color:var(--sub)} .tx-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px} .tx-rows > div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;border-radius:12px;background:var(--bg);font-size:13.5px} .tx-rows b{font-size:18px;font-weight:600} .tx-f{margin-top:12px;font-size:13px;color:var(--sub);line-height:1.7;padding:10px 12px;border-radius:10px;border:1px dashed var(--line)} .tx-f b{color:var(--ink);margin-right:6px} .tx-note{display:flex;gap:6px;align-items:flex-start;margin-top:10px;font-size:13px;color:var(--sub);line-height:1.6} .tx-note .ms{font-size:17px;margin-top:1px} .tx-note b{font-weight:500;color:var(--ink)} .tbl.per td{font-size:14.5px;padding:11px 8px} .tbl.per b{font-size:16px;font-weight:600} .tbl.per tr.em td{font-weight:700;background:var(--card-2)} .lg-fee{background:var(--teal)!important} .lg-in{background:var(--sp-itaku)!important} .bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;height:200px;align-items:end;padding:8px 4px 0;border-bottom:1px solid var(--line)} .bars.one{height:170px} .bcol{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .bcol > span.num{font-size:13px;color:var(--sub);padding-bottom:6px} .bcol.now > span.num{color:var(--ink);font-weight:700} .bv{font-size:13px;color:var(--sub)} .bpair{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;min-height:0} .bpair i{display:block;width:min(16px,40%);border-radius:4px 4px 0 0;min-height:2px} .bars.one .bpair i{width:min(26px,60%)} .bfee{background:var(--teal)} .bin{background:var(--sp-itaku)} .payrule{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--bg)} .payrule h3{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700} .payrule h3 .ms{font-size:18px;color:var(--teal-text)} .payrule ul{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:4px} .payrule li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px} .pr-ar{color:var(--teal-text);font-size:18px} .flow-list{display:flex;flex-direction:column} .fl-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px 120px;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line-2);font-size:14px} .fl-l{display:flex;align-items:center;gap:6px;min-width:0} .fl-l em{font-style:normal;font-size:13px;font-weight:700;color:var(--sub);border:1px solid var(--line);border-radius:5px;padding:0 5px} .fl-row.in .fl-l .ms{color:var(--teal-text)} .fl-row.out .fl-l .ms{color:var(--warn)} .fl-a{text-align:right;font-weight:600} .fl-row.in .fl-a{color:var(--teal-text)} .fl-r{text-align:right;color:var(--sub);font-size:13px} .fl-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:12px 0 8px;padding:12px 14px;border-radius:12px;background:var(--bg);font-weight:700} .fl-sum b{font-size:22px} @media (max-width:767.98px){ .fsum,.taxc,.fperiod,.fchart,.flow,.sales-stats,.frames{padding:16px} .fgrid{grid-template-columns:1fr 1fr;gap:8px} .fstat{padding:12px 10px} .fstat b{font-size:19px} .tx-big b{font-size:32px} .tx-rows{grid-template-columns:1fr} .fl-row{grid-template-columns:1fr auto;gap:2px 10px} .fl-d{grid-column:1/-1;font-size:13px;color:var(--sub)} .fl-r{grid-column:2;font-size:13px} .bars{gap:4px;height:170px} .bcol > span.num{font-size:13px} } .hm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 4px} .hm{display:flex;flex-direction:column;padding:12px 12px 10px;border-radius:12px;background:var(--bg);min-width:0} .hm span{font-size:13px;color:var(--sub);font-weight:500;line-height:1.45} .hm b{font-size:21px;font-weight:600;line-height:1.4} .hm small{font-size:11.5px;color:var(--sub)} .hm.tax{background:var(--warn-bg)} .hm.tax span,.hm.tax small{color:var(--warn)} @media (max-width:1279.98px){ .hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .money .money-top{padding-bottom:0;border-bottom:0} @media (min-width:768px){ .money .money-top{align-items:center} } .perm-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:8px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink)} .perm-tag .ms{font-size:18px;color:var(--sub)} .sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px} .sstat{display:flex;flex-direction:column;padding:12px 12px 10px;border-radius:12px;background:var(--bg)} .sstat span{font-size:13px;color:var(--sub);font-weight:500} .sstat b{font-size:26px;font-weight:600;line-height:1.35} .sstat b small{font-size:13px;margin-left:2px} @media (max-width:1279.98px){ .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:767.98px){ .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))} .sstat b{font-size:22px} } .s-link{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:8px 8px 8px 14px;border-radius:12px;border:1px solid var(--line);font-size:13.5px} .s-link > .ms{color:var(--teal-text)} .s-link > span{flex:1;min-width:200px} .cons{list-style:none;display:flex;flex-direction:column} .cons li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px} .cons li .num{font-weight:600;min-width:150px} .fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .frame{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:12px;border:1.5px dashed var(--line-3);color:var(--sub);font-size:13.5px} .frame b{font-size:15px;color:var(--ink)} .frame .ms{font-size:22px;color:var(--sub)} @media (max-width:767.98px){ .fr2{grid-template-columns:1fr} .cons li{flex-direction:column;align-items:flex-start;gap:0} } .pg-money > .card,.pg-sales > .card,.pg-money .card,.pg-sales .card{padding:22px 24px} @media (max-width:767.98px){ .pg-money .card,.pg-sales .card{padding:16px} } .s-link > span:not(.ms){flex:1;min-width:200px} .s-link > span.ms{flex:none;min-width:0} .fl-l em{white-space:nowrap;flex:none} .tx-note > span:not(.ms){flex:1} .sstat span{line-height:1.45} /* ===== お金：全体 → 事業ごと → 中身 ===== */ .persw{display:flex;flex-wrap:wrap;align-items:center;gap:10px} .persel select{height:42px;min-width:150px} .fall,.fbiz,.bzd,.fspend{padding:22px 24px} .big3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .b3{display:flex;flex-direction:column;padding:16px 16px 14px;border-radius:14px;background:var(--bg);min-width:0} .b3.em{background:var(--teal-soft)} .b3-k{font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .b3-k small{font-size:12px;font-weight:500;color:var(--sub)} .b3 b{font-size:32px;font-weight:600;line-height:1.3;margin-top:2px;letter-spacing:-.01em} .b3 b small{font-size:.55em;margin-right:2px} .b3-m{font-size:13px;color:var(--sub)} .big3.sm .b3 b{font-size:24px} .band-w{margin-bottom:14px} .band{display:flex;height:16px;border-radius:8px;overflow:hidden;background:var(--line-2);margin:4px 0 8px} .band span{display:block;height:100%} .band span + span{border-left:2px solid var(--card)} .band-lg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink)} .band-lg span{display:inline-flex;align-items:center;gap:6px} .band-lg span.off{color:var(--sub)} .band-lg i,.sp-dot{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none} .sp-dot{margin-right:8px;vertical-align:0} .bizc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .bz{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;min-height:120px;transition:border-color .15s,box-shadow .15s} .bz:hover{border-color:var(--teal-text)} .bz.on{border-color:var(--teal-text);box-shadow:0 0 0 3px rgba(0,123,133,.14)} .bz.off{background:var(--card-2);border-style:dashed} .bz-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;line-height:1.4} .bz-h i{width:10px;height:10px;border-radius:3px;flex:none} .bz-r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--sub)} .bz-r b{font-size:15px;color:var(--ink);font-weight:600} .bz-r.em b{color:var(--teal-text)} .bz-n{font-size:13px;color:var(--sub);line-height:1.55} .bz-common{margin:12px 0 0} .bz-in{font-size:15px;font-weight:700;margin:18px 0 8px;letter-spacing:.04em} .sgrid.four{grid-template-columns:repeat(4,minmax(0,1fr))} .sstat small{font-size:11.5px;color:var(--sub)} .sp-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px} .sp-total span{font-size:14px;font-weight:700} .sp-total b{font-size:30px;font-weight:600} .sp-total b small{font-size:.55em;margin-right:2px} .sp-t td{font-size:14px} .bank-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:8px;border-radius:6px;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap} .hm.em{background:var(--teal-soft)} @media (max-width:1279.98px){ .bizc{grid-template-columns:repeat(2,minmax(0,1fr))} .sgrid.four{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767.98px){ .fall,.fbiz,.bzd,.fspend{padding:16px} .big3{grid-template-columns:1fr;gap:8px} .b3{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;padding:12px 14px} .b3 b{font-size:24px} .b3-m{flex-basis:100%} .bizc{grid-template-columns:1fr 1fr;gap:8px} .bz{min-height:0;padding:12px} .persw .seg2{flex:1} .persw .seg2 button{flex:1;padding:0 8px} .persel{flex:1 1 100%} .persel select{width:100%} .sp-t th:nth-child(4),.sp-t td:nth-child(4){display:none} .bank-tag{margin-left:0;margin-top:2px} } /* 天気（気象庁の予報） */ .wx-home{max-width:420px} .wx-home .wx-l{display:block;font-size:13px;color:var(--sub);font-weight:500} .wx-home b{font-size:15px} .wx-home .wx-note{display:block;font-size:13px;color:var(--warn)} .wx-home .wx-src,.wx-src{display:block;font-size:13px;color:var(--mute);margin-top:2px} .fx-wx .wx-row{align-items:flex-start} .fx-wx .wx-row b{font-weight:700} .wx-note{font-size:13px;color:var(--warn);margin-top:4px} @media (max-width:767.98px){ .wx-home{max-width:100%} } .sp-c{display:flex;align-items:flex-start} .sp-c .sp-dot{margin-top:6px} .sp-l{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0} .wx-home .num{display:block;font-size:13px;color:var(--sub)} /* ===== 事業（予定とタスク）・工程表 ===== */ .b-catv{--bc:var(--b-catv);--bct:var(--b-catv-t)} .b-nuro{--bc:var(--b-nuro);--bct:var(--b-nuro-t)} .b-ztv{--bc:var(--b-ztv);--bct:var(--b-ztv-t)} .b-company{--bc:var(--b-company);--bct:var(--b-company-t)} .biz-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:8px;border-radius:6px;font-size:13px;font-weight:700;color:var(--bct);background:color-mix(in srgb,var(--bc) 12%,var(--card));vertical-align:2px;white-space:nowrap} .td-open{display:block;text-align:left;min-height:28px;padding:0;color:inherit;border-radius:6px} .td-open:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--icon-mute)} .td-x .td-open b{display:inline} .fld em.guess{font-style:normal;font-size:13px;font-weight:700;color:var(--teal-text);background:var(--teal-soft);padding:1px 7px;border-radius:999px} .kindtag.done-t{background:var(--line-2);color:var(--sub)} .due-t{color:var(--warn);font-weight:600} .sec-h{font-size:17px;font-weight:700;letter-spacing:.04em;margin:8px 0 -6px} .bsw{display:flex;flex-wrap:wrap;gap:8px} .bsw-b{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14.5px;font-weight:700;color:var(--sub);transition:background .15s,color .15s,border-color .15s} .bsw-b i{width:10px;height:10px;border-radius:3px;background:var(--bc)} .bsw-b:hover{border-color:var(--line-3);color:var(--ink)} .bsw-b.on{background:var(--inv-bg);border-color:var(--inv-line);color:var(--inv-ink);box-shadow:var(--inv-shadow)} @media (max-width:767.98px){ .bsw{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px 4px;scrollbar-width:none} .bsw::-webkit-scrollbar{display:none} .bsw-b{flex:none} } .gantt-c{padding:22px 24px 18px} .g-nav{display:flex;align-items:center;gap:6px} .g-range{font-size:13px;color:var(--sub);margin-left:6px} .g-lg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--sub);margin:2px 0 10px} .g-lg span{display:inline-flex;align-items:center;gap:6px} .g-lg i{display:inline-block} .lg-ev{width:10px;height:10px;border-radius:50%;background:var(--b-catv)} .lg-bar{width:22px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--b-catv) 35%,var(--card));border:1.5px solid var(--b-catv)} .lg-done{width:22px;height:8px;border-radius:4px;background:var(--line)} .g-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px 4px;scrollbar-width:thin} .g-in{position:relative;min-width:calc(150px + var(--gdays) * 13px)} .g-head,.g-row{display:grid;grid-template-columns:150px minmax(0,1fr)} .g-head{height:38px;border-bottom:1px solid var(--line)} .g-scale{position:relative} .g-tick{position:absolute;bottom:4px;transform:translateX(2px);display:flex;align-items:baseline;gap:3px;font-size:13px;color:var(--sub);white-space:nowrap} .g-tick b{font-weight:600;color:var(--ink)} .g-today{position:absolute;top:0;bottom:-2px;width:0} .g-today em{position:absolute;top:0;left:50%;transform:translateX(-50%);font-style:normal;font-size:13px;font-weight:700;color:var(--on-acc);background:var(--danger);padding:0 6px;border-radius:999px;white-space:nowrap} .g-body{position:relative} .g-row{border-bottom:1px solid var(--line-2);position:relative;z-index:1} .g-row.hl{animation:hlpulse 2.4s ease both;border-radius:10px} .g-name{position:sticky;left:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 2px;background:var(--card);font-size:13.5px;font-weight:700;line-height:1.35} .g-name i{width:10px;height:10px;border-radius:3px;background:var(--bc);flex:none} .g-track{position:relative;min-height:42px} .g-empty{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--mute)} .g-grid{position:absolute;left:150px;right:0;top:0;bottom:0;pointer-events:none;z-index:0} .g-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2)} .g-grid b{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--danger);opacity:.55} .g-it{position:absolute;height:24px;display:flex;align-items:center;gap:5px;padding:0;border-radius:6px;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;text-align:left;z-index:2} .g-it span{overflow:visible;padding:0 4px;background:var(--label-bg);border-radius:4px;line-height:1.5} .g-ev i,.g-pt i{width:12px;height:12px;border-radius:50%;background:var(--bc);flex:none;box-shadow:0 0 0 2px var(--card)} .g-pt i{border-radius:3px;transform:rotate(45deg)} .g-bar{background:color-mix(in srgb,var(--bc) 18%,var(--card));border:1.5px solid var(--bc);min-width:14px} .g-bar i{display:none} .g-bar span{position:absolute;left:4px;background:none} .g-it.done{opacity:.42} .g-it.done span{text-decoration:line-through;text-decoration-color:rgba(20,32,43,.35)} .g-it:hover span{text-decoration:underline;text-underline-offset:2px} .g-it:focus-visible{outline:3px solid rgba(0,123,133,.45);outline-offset:2px} @media (max-width:767.98px){ .gantt-c{padding:16px 12px 14px} .g-in{min-width:calc(104px + var(--gdays) * 20px)} .g-head,.g-row{grid-template-columns:104px minmax(0,1fr)} .g-grid{left:104px} .g-name{font-size:13px;padding-right:6px;box-shadow:4px 0 6px -4px rgba(20,32,43,.15)} .g-nav .g-range{display:none} } .bl2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .bl{padding:20px 22px} .bl-ev{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 4px;border-bottom:1px solid var(--line-2);text-align:left;font-size:14px} .bl-ev .num{font-size:13px;color:var(--sub);min-width:120px} .bl-ev b{font-weight:700} .bl-ev:hover b{text-decoration:underline;text-underline-offset:3px} @media (max-width:1279.98px){ .bl2{grid-template-columns:1fr} } @media (max-width:767.98px){ .bl{padding:16px} } /* 秘書が先導する */ .lead-c .cf-q{color:var(--ink);font-weight:700} .pk.on{border-color:var(--teal-text);background:var(--teal-soft)} .lead-hint{font-size:13px;color:var(--sub);padding:2px 14px 12px} .g-it.nolab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .g-it.nolab{width:14px} /* 公式 LINE のメニュー V2（画像と押せる場所） */ .ln-rm2{position:relative;width:100%;aspect-ratio:2500/1686;background-size:100% 100%;background-repeat:no-repeat;background-color:#0B4A52;border-top:1px solid #0B4A52} .rm-hit{position:absolute;display:block;background:transparent;border-radius:0;transition:background .15s} .rm-hit:hover{background:rgba(255,255,255,.06)} .rm-hit:active{background:rgba(255,255,255,.12)} .rm-hit:focus-visible{outline:3px solid var(--toast-icon);outline-offset:-3px} /* タスクの行の［修正］［済み］ */ .td-b{display:flex;gap:8px;flex:none} .td-b .btn{min-height:44px;min-width:44px;padding:0 12px} .td-b .btn .ms{font-size:18px} @media (max-width:420px){ .td-b .tb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .td-b .btn{padding:0;width:44px} } /* ===== 手元のお金・見込み・使い道の決まっていないお金 ===== */ .cashc,.freec,.projc,.hgoal,.hnudge,.goals-c,.nudges-c{padding:22px 24px} .cs-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .cs-big{display:flex;flex-direction:column} .cs-big b{font-size:40px;font-weight:600;line-height:1.2;letter-spacing:-.02em} .cs-big b small{font-size:.5em;margin-right:3px} .cs-big span{font-size:13px;color:var(--sub)} .cs-acts{display:flex;gap:8px;flex-wrap:wrap} .cs-note{font-size:13px;color:var(--sub);line-height:1.65;margin-top:10px} .fr-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .fr-row b{font-size:28px;font-weight:600} .fr-row b small{font-size:.55em;margin-right:2px} .fr-f{font-size:13px;color:var(--sub)} .pj-wrap{width:100%;overflow:hidden} .pj-svg{display:block;width:100%;height:auto} .pj-g{stroke:var(--line);stroke-width:1} .pj-g.v{stroke:var(--line-2)} .pj-yl,.pj-xl{font-size:13px;fill:var(--sub);font-family:Inter,'Noto Sans JP',sans-serif} .pj-line{fill:none;stroke:var(--teal-text);stroke-width:2.5;stroke-linejoin:round} .pj-floor{stroke:var(--warn);stroke-width:1.5;stroke-dasharray:5 4} .pj-fl{font-size:13px;fill:var(--warn);font-weight:700} .pj-warn{fill:var(--card);stroke:var(--warn);stroke-width:2.5} .pj-now{fill:var(--teal-text)} .pj-sum{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:8px;font-size:13.5px;color:var(--sub)} .pj-sum b{color:var(--ink);font-weight:600} .pj-alert{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font-size:13.5px;font-weight:500;line-height:1.6} .pj-alert .ms{font-size:20px} .pj-ok{display:flex;gap:6px;align-items:center;margin-top:10px;font-size:13.5px;color:var(--teal-text)} .hm-cash{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:12px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line)} .hm-cash > span{font-size:13px;font-weight:700} .hm-cash b{font-size:24px;font-weight:600} .hm-cash b small{font-size:.55em;margin-right:2px} .hm-cash small{font-size:12px;color:var(--sub)} .hm-cash .link-s{margin-left:auto} .bankp{position:relative;width:300px;background:#FBFCFC;border:1px solid #D9DEE3;border-radius:8px;padding:16px 14px;font-size:11.5px;color:#24303A} .bankp .bk-h{font-weight:700;font-size:13px;margin-bottom:8px} .bankp table{width:100%;border-collapse:collapse;font-family:Inter,'Noto Sans JP',sans-serif;font-size:10.5px} .bankp th,.bankp td{border-bottom:1px solid #E3E8EC;padding:4px 3px;text-align:left;white-space:nowrap} .bankp.app{background:#fff;border-radius:18px} .bk-app{display:flex;flex-direction:column;gap:4px;padding:10px 0} .bk-app b{font-size:24px} .thumb.lg.bank .bankp{position:absolute;left:50%;top:10px;transform:translateX(-50%) scale(.5);transform-origin:top center} .bk-read{font-size:15px} .bk-read b{font-size:26px;font-weight:600;margin-left:8px} @media (max-width:767.98px){ .cashc,.freec,.projc,.hgoal,.hnudge,.goals-c,.nudges-c{padding:16px} .cs-big b{font-size:32px} .cs-acts{width:100%} .cs-acts .btn{flex:1} } /* ===== 目標と声かけ ===== */ .hg2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} @media (max-width:1279.98px){ .hg2{grid-template-columns:1fr} } .gl{padding:10px 0;border-top:1px solid var(--line-2)} .ch + .gl{border-top:0} .gl-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .gl-h b{font-size:14.5px;font-weight:700} .gl-h span{font-size:14px;font-weight:700;color:var(--teal-text)} .gl-bar{height:8px;border-radius:4px;background:var(--line-2);margin:6px 0 4px;overflow:hidden} .gl-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--teal-deep),var(--teal));transition:width .25s var(--ease)} .gl.reached .gl-bar i{background:var(--ok-dot)} .gl.reached .gl-h span{color:var(--ok)} .gl.fin{opacity:.6} .gl-m{font-size:13px;color:var(--sub);line-height:1.6} .gl-m small{margin-left:4px} .gl-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px} .gl-grid .gl{border-top:1px solid var(--line-2)} @media (max-width:1023.98px){ .gl-grid{grid-template-columns:1fr} } .gl-checks{display:flex;flex-direction:column;margin-top:4px} .gl-checks .chk-l{min-height:40px;font-size:13.5px} .gl-acts{display:flex;align-items:center;gap:6px;margin-top:4px} .gl-acts .sp{flex:1} .gl-due{font-size:13px;color:var(--sub)} .nd{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;padding:11px 0;border-top:1px solid var(--line-2)} .ch + .nd{border-top:0} .nd p{font-size:14px;line-height:1.65} .nd .link-s{grid-column:2;justify-self:start} .nd-t{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap;margin-top:2px} .nd.t-0 .nd-t{background:var(--teal-soft);color:var(--teal-text)} .nd.t-1 .nd-t{background:var(--ok-bg);color:var(--ok)} .nd.t-2 .nd-t{background:var(--priv-soft);color:var(--priv-text)} .nd.t-3 .nd-t{background:var(--warn-bg);color:var(--warn)} .nd-f{margin:2px 0 6px;flex-wrap:wrap} .fx-word p{font-size:13.5px;line-height:1.65;color:var(--ink)} .gform textarea{width:100%;border-radius:12px;border:1px solid var(--line);padding:10px 12px;font-size:15px;font-family:inherit;resize:vertical} .gform{display:flex;flex-direction:column;gap:14px} .pj-band{fill:var(--band-fill);opacity:.8} /* ===== お客様対応 ===== */ .bl2.cs2{grid-template-columns:1fr} .cs-c .ch,.bl .ch{flex-wrap:wrap;gap:8px} .cs-hb{display:flex;gap:8px;flex-wrap:wrap} .cs-sub{font-size:13px;color:var(--sub);line-height:1.65;margin:-2px 0 12px} .cs-f{margin:4px 0 6px} .cs-props{margin:0 0 14px;padding:12px 14px 4px;border-radius:14px;background:var(--teal-soft)} .cs-props h3{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--teal-text);margin-bottom:2px} .cs-props h3 .num{margin-left:4px;font-weight:600} .cs-props .nd{border-top:1px solid rgba(10,143,153,.18)} .cs-props h3 + .nd{border-top:0} .pr-b{grid-column:2;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px} .pr-b .btn{min-height:44px;min-width:72px} .cs-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)} .cs-rows .cs-row:first-child{border-top:0} .cs-open{flex:1;min-width:0;display:flex;align-items:center;gap:14px;text-align:left;min-height:52px;border-radius:10px;padding:4px 6px;margin-left:-6px} .cs-open:hover{background:var(--bg-soft,var(--bg))} .cs-when{flex:none;width:96px;display:flex;flex-direction:column;line-height:1.3} .cs-when b{font-size:14px;font-weight:600} .cs-when small{font-size:12px;color:var(--sub)} .cs-row.today .cs-when b{color:var(--teal-text)} .cs-row.late .cs-when b{color:var(--warn)} .cs-x{min-width:0;display:flex;flex-direction:column;gap:2px} .cs-tt{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .cs-tt b{font-size:15px;font-weight:700} .cs-mm{font-size:13px;color:var(--sub);line-height:1.5} .cs-row.done{opacity:.62} .cs-row.done .cs-tt b{text-decoration:line-through;text-decoration-color:rgba(20,32,43,.35)} .cs-type{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:700;white-space:nowrap;background:var(--teal-soft);color:var(--teal-text);margin-left:6px} .cs-tt .cs-type{margin-left:0} .cs-type.t0{background:var(--blue-bg);color:var(--blue-ink)} .cs-type.t2{background:var(--ok-bg);color:var(--ok)} .cs-type.t3{background:var(--danger-bg);color:var(--danger)} .cs-type.t4{background:var(--priv-soft);color:var(--priv-text)} .cs-type.t5{background:var(--warn-bg);color:var(--warn)} .cs-type.t6{background:var(--line-2);color:var(--sub)} .cs-mini{display:inline-block;margin-right:6px;padding:0 6px;border-radius:5px;background:var(--teal-soft);color:var(--teal-text);font-size:13px;font-weight:700} .cs-cal{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13px;color:var(--teal-text)} .cs-why{font-size:13.5px;line-height:1.65;margin-bottom:8px} .cf-t .cs-type{vertical-align:middle} .g-name small{display:block;font-size:11.5px;font-weight:500;color:var(--sub)} .g-row.g-cs{border-top:1px dashed var(--line-2)} .g-row.g-first{border-top:1px solid var(--line)} .g-sub{width:10px!important;height:10px!important;background:transparent!important;border-left:2px solid var(--line);border-bottom:2px solid var(--line);border-radius:0 0 0 4px!important;margin-left:2px} .g-cs i{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--bc)!important} .lg-pt{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--b-catv)} /* 顧客管理（見本） */ .dlg.dlg-crm{width:min(900px,100%)} @media (max-width:767.98px){ .dlg.dlg-crm{width:100%} } .crm-note{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--sub);line-height:1.65;padding:10px 12px;border-radius:12px;background:var(--bg-soft,var(--bg));margin-bottom:14px} .crm-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px} .crm{width:100%;border-collapse:collapse;font-size:13.5px;min-width:680px} .crm th,.crm td{padding:8px 10px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle} .crm thead th{font-size:13px;color:var(--sub);font-weight:700;background:var(--card-2);white-space:nowrap} .crm tbody th{font-weight:700;white-space:nowrap} .crm tr:last-child th,.crm tr:last-child td{border-bottom:0} .crm tr.on{background:var(--teal-soft)} .crm-n{max-width:240px;line-height:1.55} .crm-n small{display:block;font-size:11.5px;color:var(--warn);font-weight:700} .crm .btn{white-space:nowrap;min-height:44px} .crm-f{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--teal)} .crm-f label{font-size:14px} .crm-in{display:flex;gap:8px} .crm-in input{flex:1;min-width:0;min-height:46px;border-radius:12px;border:1px solid var(--line);padding:0 12px;font-size:16px;font-family:inherit} .crm-ex{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--sub)} @media (max-width:767.98px){ .cs-when{width:78px} .cs-open{gap:10px} .crm .tb-l{display:none} .crm .btn{min-width:44px;padding:0 10px} } @media (max-width:767.98px){ .cs-mm .m-biz,.cs-mm .m-src{display:none} } .td-x .biz-tag{display:inline-flex;color:var(--bct);font-size:13px;line-height:1} .g-it.flip{flex-direction:row-reverse;transform:translateX(calc(-100% + 12px))} .pg-head h1.hello{font-size:26px} .hello-l{margin-top:6px;font-size:15px;line-height:1.7;color:var(--ink);max-width:40em} .hello-l + .pg-date{margin-top:4px} .nodata .big-empty span{display:block;font-size:13px;color:var(--sub);margin-top:4px} @media (max-width:767.98px){ .pg-head h1.hello{font-size:21px} .hello-l{font-size:14px} } .nodata .big-empty .ms,#rc-nodata .ms{font-size:36px;color:var(--sub);display:block;margin:0 auto 6px} /* ===== ライト／ダークの切り替え（上の帯） ===== */ .theme-sw{display:inline-flex;padding:3px;border-radius:12px;background:var(--line-2);flex:none} .th-b{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:38px;min-width:38px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:700;color:var(--sub)} .th-b .ms{font-size:19px} .th-b[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} .th-b:hover{color:var(--ink)} @media (max-width:1100px){ .th-b .lbl-long{display:none} .th-b{padding:0} } @media (max-width:640px){ .theme-sw{padding:2px} .th-b{min-width:36px;min-height:40px} } :root[data-theme="dark"] .side-logo{opacity:1} /* ===================== 1回目の作り直し：ホーム・下の帯・会話の窓・見本の時刻 ===================== */ :root{--now-bg:#E6F8F9;--now-line:#BFE3E6;--today-col:#EAF7F8;--done-ink:#5B6773} :root[data-theme="dark"]{--now-bg:rgba(0,198,210,.10);--now-line:rgba(92,225,232,.45);--today-col:rgba(0,198,210,.13);--done-ink:#B4C6CD} /* 段1 いま */ .now{position:relative;border-radius:var(--r16);background:var(--now-bg);border:1px solid var(--now-line);padding:24px 26px 22px;display:flex;flex-direction:column;gap:10px} .now-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .now h1.hello{font-size:26px;font-weight:700;line-height:1.35;letter-spacing:.04em} .now .pg-date{font-size:14px;color:var(--sub)} .clock-tag{display:inline-flex;margin-left:10px;padding:1px 8px;border-radius:999px;border:1px solid var(--now-line);font-size:13px;color:var(--teal-ink)} .now .hello-l{font-size:16px;line-height:1.75;margin:0;max-width:none} .now-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px} .btn.xl{min-height:56px;padding:0 24px;border-radius:14px;font-size:17px;gap:10px} .btn.xl .ms{font-size:24px} .now-free{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--teal-ink);font-weight:500} .now-side{flex:1;min-width:260px;display:flex;flex-direction:column;gap:6px} .now-next{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:15px} .nn-k{font-size:13px;color:var(--sub);font-weight:700} .now-next b{font-size:18px} .nn-t{font-weight:700} .nn-u{font-size:14px;color:var(--teal-text);font-weight:700} .now-next .map-a{font-size:14px} .now .wx-home{max-width:none;background:transparent;box-shadow:none;padding:0;gap:8px;align-items:flex-start} .now .wx-home > .ms{font-size:22px;margin-top:2px} .now .wx-home .wx-x{font-size:14px;line-height:1.6;color:var(--ink)} .now .wx-home .wx-l{display:inline;font-size:13px;color:var(--sub)} .now .wx-home b{display:inline;font-size:14px} .now .wx-home .num{display:inline;font-size:14px;color:var(--ink)} .now .wx-home em{font-size:14px} .now .wx-home .wx-note{display:inline;margin-left:6px;font-size:13px} .now .wx-home .wx-src{display:inline;margin-left:6px;font-size:13px;color:var(--sub)} .mcard{margin-top:6px;padding:16px 18px;border-radius:14px;background:var(--card);box-shadow:var(--shadow)} .mcard h2{display:flex;align-items:center;gap:6px;font-size:16px;margin-bottom:6px} .mcard p,.mc-l li{font-size:15px;line-height:1.7} .mc-l{list-style:none;margin:0 0 6px} .mc-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} /* 段2〜4 */ .home-mid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start} .home-r{display:flex;flex-direction:column;gap:20px} @media (max-width:1279.98px){ .home-mid{grid-template-columns:1fr} } .flow .ch,.decide .ch,.notice .ch,.nums .ch{flex-wrap:wrap;gap:8px} .fl-list{display:flex;flex-direction:column} .fl{display:grid;grid-template-columns:34px 58px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:52px;padding:6px 4px;border-top:1px solid var(--line-2);text-align:left;width:100%;border-radius:0} .fl-list > .fl:first-child{border-top:0} button.fl:hover,.fl-open:hover{background:var(--card-2)} .fl-m{display:inline-flex;align-items:center;justify-content:center;height:24px;border-radius:6px;font-size:13px;font-weight:700;color:var(--sub)} .fl-m .ms{font-size:18px} .fl.next .fl-m{background:var(--teal-text);color:var(--on-acc)} .fl.done .fl-m{background:var(--line-2);color:var(--done-ink)} .fl-t{font-size:15px;font-weight:600} .fl-x{min-width:0;display:flex;flex-direction:column;text-align:left} .fl-x b{font-size:15px;font-weight:700;line-height:1.45} .fl-x small{font-size:13px;color:var(--sub);line-height:1.45} .fl.done .fl-t,.fl.done .fl-x b{color:var(--done-ink);font-weight:500} .fl.done .fl-x b{text-decoration:line-through;text-decoration-color:var(--icon-mute)} .fl.next{background:var(--teal-pale)} .fl.next .fl-t,.fl.next .fl-x b{color:var(--ink)} .fl.priv .fl-x b{color:var(--priv-text)} .fl.flag .fl-m{color:var(--warn)} .fl.flag .fl-t{font-size:13px;color:var(--warn);font-weight:700} .fl.flag.late .fl-t{color:var(--danger)} .fl-open{padding:4px 0;border-radius:6px} .fl-done{min-height:44px} .fl-more{font-size:14px;color:var(--sub);margin-top:4px} .fl-ft{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px} .decide .nd{grid-template-columns:auto 1fr} .decide .nd p{font-size:15px} .decide .nd-t,.notice .nd-t{font-size:13px;height:24px} .nt-l{list-style:none;display:flex;flex-direction:column;gap:8px} .nt-l li{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.6} .nt-l .ms{color:var(--teal-text);font-size:20px;margin-top:2px} /* 段5 数字 */ .nums-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .nums-r .ch-r{font-size:13px} .nb-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:6px} .nb{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:var(--card-2);border:1px solid var(--line-2);min-width:0} .nb-k{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--sub);white-space:nowrap} .nb b{font-size:21px;font-weight:600;line-height:1.3} .nb b small{font-size:.6em;margin-right:1px} .nb.em{background:var(--teal-pale);border-color:var(--teal-line)} .nb.tax{background:var(--warn-bg);border-color:var(--warn-line)} .qm{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-3);font-size:13px;font-weight:700;color:var(--sub);background:var(--card);flex:none;position:relative} .qm::after{content:"";position:absolute;inset:-11px} .qm[aria-expanded="true"]{background:var(--teal-text);border-color:var(--teal-text);color:var(--on-acc)} .qm-a{display:flex;gap:6px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:10px;background:var(--card-2);font-size:14px;line-height:1.6} .qm-a .ms{color:var(--teal-text)} @media (max-width:1279.98px){ .nb-row{grid-template-columns:repeat(3,minmax(0,1fr))} } .gl-rows{display:flex;flex-direction:column;margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px} .gl-rows h3{font-size:14px;font-weight:700;color:var(--sub);margin-bottom:2px} .glr{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) 46px auto;align-items:center;gap:12px;min-height:44px;text-align:left;border-radius:8px;padding:0 4px} .glr:hover{background:var(--card-2)} .glr-t{font-size:15px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .glr-bar{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden} .glr-bar i{display:block;height:100%;background:var(--teal-deep);border-radius:4px} .glr.reached .glr-bar i{background:var(--ok-dot)} .glr b{font-size:15px;text-align:right} .glr-r{font-size:13px;color:var(--sub);white-space:nowrap} .road-line{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:15px} .road-line > span{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .road-line .ms{color:var(--teal-text)} .nums .road{margin-top:10px;box-shadow:none;border:1px solid var(--line-2)} /* 見本の時刻（上の帯） */ .clock-sw{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--line-2);flex:none} .ck-l{font-size:13px;color:var(--sub);padding:0 6px;white-space:nowrap} .ck-b{min-height:38px;min-width:38px;padding:0 8px;border-radius:9px;font-size:14px;font-weight:700;color:var(--sub)} .ck-b[aria-pressed="true"]{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-shadow)} .ck-n{display:none;align-items:center;gap:2px;min-height:40px;padding:0 8px;border-radius:9px;font-size:14px;font-weight:700;color:var(--ink)} .ck-n .ms{font-size:18px;color:var(--sub)} @media (max-width:1180px){ .ck-l{display:none} } @media (max-width:767.98px){ .ck-b{display:none} .ck-n{display:inline-flex} .clock-sw{padding:2px} } /* スマホ：下の固定の帯と、下から出る会話の窓（浮いたボタンは無くす） */ .fab,.fab-mic{display:none!important} .dock,.tsheet,.tsheet-ov{display:none} @media (max-width:1023.98px){ .dock{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:42;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--tabs-bg);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.06)} body[data-view="line"] .dock{display:none} .dock-talk{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border-radius:14px;background:var(--teal-text);color:var(--on-acc);text-align:left} .dock-talk .ms{font-size:26px} .dk-x{display:flex;flex-direction:column;line-height:1.3} .dk-x b{font-size:16px} .dk-x small{font-size:13px;opacity:.92} .dock-shoot{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 18px;border-radius:14px;border:1.5px solid var(--teal-text);color:var(--teal-text);background:var(--card);font-size:16px} .dock-shoot .ms{font-size:24px} .page{padding-bottom:calc(110px + env(safe-area-inset-bottom))} .tsheet-ov:not([hidden]){display:block;position:fixed;inset:0;z-index:90;background:rgba(10,16,22,.45);animation:fade .18s ease both} .tsheet:not([hidden]){display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:91;height:85dvh;background:var(--bg);border-radius:20px 20px 0 0;box-shadow:var(--shadow-2);animation:up .22s var(--ease) both;padding-bottom:env(safe-area-inset-bottom)} .tsheet-top{display:flex;align-items:center;gap:10px;padding:10px 14px 8px 18px;position:relative} .tsheet-top h2{font-size:16px;flex:1} .tsheet-grab{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:40px;height:4px;border-radius:2px;background:var(--line-3)} .tsheet-slot{flex:1;min-height:0;display:flex;padding:0 10px 10px} .tsheet-slot .chat{flex:1;height:auto;min-height:0} body.sheet-open{overflow:hidden} } @media (max-width:767.98px){ .dock{bottom:calc(64px + env(safe-area-inset-bottom));padding:8px 12px;border-top:1px solid var(--line);box-shadow:none} .page{padding-bottom:calc(150px + env(safe-area-inset-bottom))} .now{padding:18px 16px 16px} .now h1.hello{font-size:21px} .now .hello-l{font-size:15px} .now-row{gap:12px} .now-act{width:100%;justify-content:center} .now-side{min-width:0;width:100%} .nb-row{grid-template-columns:repeat(2,minmax(0,1fr))} .nb.cash{grid-column:1 / -1} .nb b{font-size:19px} .nums-r{width:100%;justify-content:space-between} .nums-r .btn[data-act="shoot"]{display:none} .glr{grid-template-columns:minmax(0,1fr) 46px;row-gap:2px;padding:6px 4px} .glr-bar{grid-column:1 / -1;grid-row:2} .glr-r{display:none} .fl{grid-template-columns:30px 50px minmax(0,1fr) auto} } /* 上の帯：狭い時に全部が収まるように */ @media (max-width:640px){ .strip{gap:6px;padding:0 8px} .theme-sw{background:transparent;padding:0} .th-b{min-width:40px} .seg-b{padding:0 9px} } @media (max-width:440px){ .sample-tag{display:none} } /* ホームの細部 */ .home-mid .card,.nums{padding:20px 22px} @media (max-width:767.98px){ .home-mid .card,.nums{padding:16px} } .nb-k{white-space:normal;line-height:1.35} .fl.flag .fl-t{white-space:nowrap} @media (max-width:767.98px){ .fl{grid-template-columns:30px 66px minmax(0,1fr) auto} } .dc-why{display:block;font-size:13px;color:var(--sub);margin-top:2px} /* ===== 工程表＝見通し表 ===== */ .gantt-c .ch{align-items:center} .g-nav{flex-wrap:wrap;row-gap:8px} .g-range{font-size:14px} .gx-sw{margin-right:6px} .gx-sw button{min-height:36px;padding:0 12px;font-size:14px} .gx-done{display:inline-flex;align-items:center;gap:6px;margin-left:10px;font-size:14px;color:var(--sub);min-height:44px;cursor:pointer} .gx-done input{width:18px;height:18px;accent-color:var(--teal-text)} /* スマホ：日ごとの縦の一覧 */ .gx-days{display:flex;flex-direction:column;gap:2px} .gd{padding:10px 0;border-top:1px solid var(--line-2)} .gd.today{background:var(--today-col);border-radius:10px;padding:10px 8px} .gd h3{display:flex;align-items:baseline;gap:8px;font-size:16px;margin-bottom:4px} .gd h3 .num{font-size:14px;color:var(--sub);font-weight:500} .gd h3 em{font-style:normal;font-size:14px;color:var(--sub);font-weight:500;margin-left:auto} .gd-it{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:44px;padding:4px 8px;margin:2px 0;border-radius:8px;box-shadow:inset 3px 0 0 var(--bc);background:var(--card);text-align:left} .gd-it .ms{font-size:18px;color:var(--bct)} .gd-t{font-size:14px;font-weight:600;color:var(--sub)} .gd-it.late .gd-t{color:var(--danger)} .gd-n{font-size:15px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gd-b{font-size:13px;color:var(--bct);font-weight:700} /* 見通し表：2週を「週の段」2つで（1日の幅を広く取り、名前を枠の中で読めるように） */ .tsheet .chat-top{display:none} .nums .warn-pill{font-size:13px} /* ===================== 2回目：LINE のメッセージ（頼れる相棒の形）・新しい機能 ===================== */ .fx{width:300px;border-radius:20px;box-shadow:0 1px 1px rgba(20,32,43,.06)} .fx-h{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;background:linear-gradient(135deg,#047C88 0%,#036570 100%);color:#fff} .fx-h .t{flex:1;min-width:0} .fx-h small{display:block;font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1.4;color:#E6FAFB} .fx-h b{display:block;font-size:18px;font-weight:900;line-height:1.4;letter-spacing:.02em;margin:0} .fx-h .ic{width:52px;height:52px;border-radius:16px;background:#fff;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden} .fx-h .ic img{width:62px;height:62px;mix-blend-mode:multiply} .fx-s{padding:10px 16px} .fx-s h3{align-items:baseline;font-size:13px;color:var(--teal-text);letter-spacing:.04em;margin-bottom:6px} .fx-s h3 em{font-style:normal;color:var(--sub);font-weight:700} .fx-row{display:flex;gap:10px;font-size:14px;line-height:1.75} .fx-row .tm{width:44px;flex:none;font-weight:700} .fx-row em{font-style:normal;color:var(--sub)} .fx-kv{font-size:14px} .fx-big span{font-size:13px;font-weight:700} .fx-big b{font-size:30px;font-weight:900} .fx-note,.fx-sub,.fx-td em,.fx-help span,.fx-tips li,.fx-diff,.fx-streak{font-size:13px} .fx-pad{padding:0 16px} .fx-lead p{font-size:14px} .fx-koe{display:flex;gap:10px;align-items:flex-start;background:var(--teal-pale);border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.65;margin:4px 0 8px} .fx-koe img{width:34px;height:34px;flex:none;mix-blend-mode:multiply;margin-top:-2px} .fx-koe b{display:block;font-size:13px;color:var(--teal-text)} .fx-word p{font-size:14px} .fx-b{display:flex;flex-direction:column;gap:6px;padding:4px 16px 16px} .fx-b .btn{min-height:44px;border-radius:22px;font-size:15px} .fx-b.two,.fx-b.three{display:grid} .ln-row .fx .btn.pri{background:#047C88;color:#fff} .ln-row .fx .btn.sec{border-color:#BFE3E6;color:#047C88} .ln-tm{font-size:12px} .ln-who{font-size:12px} /* お金の問いの見出し・間に合う */ .qh{display:block;font-size:13px;font-weight:700;color:var(--teal-text);letter-spacing:.02em;margin-bottom:2px} .ch h2 .qh{width:100%} .tx-ready{display:flex;align-items:center;gap:6px;margin:8px 0 4px;padding:8px 12px;border-radius:10px;font-size:15px;font-weight:700} .tx-ready.ok{background:var(--ok-bg);color:var(--ok)} .tx-ready.warn{background:var(--warn-bg);color:var(--warn)} .pj-way{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 8px;font-size:14px;color:var(--sub)} .pj-way .seg2 button{min-height:36px;padding:0 12px} .pj-alt{fill:none;stroke:var(--warn);stroke-width:2.5;stroke-dasharray:6 5} .pj-cmp{display:flex;gap:8px;align-items:flex-start;margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:14px;line-height:1.6} .pj-cmp.warn{background:var(--warn-bg);color:var(--warn)} /* 知らせ：［元に戻す］・失敗の印 */ .toast.bad .ms{color:var(--badge-bg)} .toast-undo{margin-left:6px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid currentColor;color:inherit;font-size:14px;font-weight:700;pointer-events:auto} .toast.has-undo{pointer-events:auto} /* 横のメニュー：控えと知識帳 */ .ss-kb{display:flex;align-items:center;gap:6px;margin-top:8px;min-height:40px;padding:0 10px;border-radius:10px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--teal-text);text-align:left} .side-status{font-size:13px} /* 日誌 */ .jr-week{padding:12px 14px;border-radius:12px;background:var(--teal-pale);margin-bottom:10px} .jr-week h3{font-size:14px;color:var(--teal-text);margin-bottom:4px} .jr-week p{font-size:15px;line-height:1.7} .jr-row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line-2)} .jr-list .jr-row:first-child{border-top:0} .jr-d{font-size:14px;font-weight:700} .jr-d em{display:inline-block;margin-left:6px;font-style:normal;font-size:13px;color:var(--teal-text)} .jr-x p{font-size:15px;line-height:1.65} .jr-x b{display:inline-block;min-width:96px;font-size:13px;color:var(--sub);margin-right:6px} .jr-b{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} @media (max-width:767.98px){ .jr-row{grid-template-columns:1fr;gap:2px} .jr-x b{display:block;min-width:0} } /* 知識帳 */ .kb-sum{font-size:15px;margin-bottom:6px} .kb-top{list-style:none;display:flex;flex-direction:column;gap:6px} .kb-top li{font-size:15px;line-height:1.6} .kb-shl{display:inline-block;margin-right:8px;padding:0 8px;border-radius:6px;background:var(--line-2);font-size:13px;font-weight:700;color:var(--sub)} .dlg-kb{width:min(760px,100%)} .kb-cnt{font-size:14px;color:var(--sub)} .kb-lead{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--card-2);font-size:14px;line-height:1.65;margin-bottom:12px} .kb-lead .ms{color:var(--teal-text)} .kb-q{margin-bottom:10px} .kb-sh{margin-top:14px} .kb-sh h3{display:flex;align-items:center;gap:8px;font-size:15px;margin-bottom:4px} .kb-sh h3 .num{font-size:13px;color:var(--sub)} .kb-it{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-2)} .kb-x{flex:1;min-width:0} .kb-x p{font-size:15px;line-height:1.6} .kb-x small{display:block;font-size:13px;color:var(--sub)} .kb-b{display:flex;gap:8px;flex:none} .kb-b .btn{min-height:44px} .kb-note{font-size:14px;color:var(--sub);line-height:1.6} .kb-ed{padding:12px;border-radius:12px;border:1.5px solid var(--teal);margin-bottom:12px} .kb-ed-b{display:flex;gap:8px;justify-content:flex-end;margin-top:8px} .kb-conf .kb-t{font-size:16px} @media (max-width:420px){ .kb-b .tb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .kb-b .btn{width:44px;padding:0} } /* 44回目：秘書の頭脳の5つの見出し（ページ「頭脳の中身」と、開いて探す窓で同じ形。見出し→説明→1件ずつの行） */ .bh-it[data-act]{cursor:pointer} .bh-chk{display:inline-flex;align-items:center;gap:4px;margin:2px 8px 2px 0;padding:0 8px;border-radius:6px;font-size:13px;font-weight:700;line-height:24px;background:var(--teal-soft);color:var(--teal-text)} .bh-chk .ms{font-size:15px} .bh-chk.part{background:rgb(var(--gold-rgb) / .14);color:var(--gold-t)} .bh-chk.ask{background:var(--line-2);color:var(--sub)} .bh-cn{display:block;font-size:13px;line-height:1.6;color:var(--ink)} .kb-it .bh-chk{margin-top:4px} .kb-week{padding:10px 12px;border-radius:12px;background:var(--card-2);font-size:14px;line-height:1.7} .kb-week ul{margin:4px 0 4px 1.2em} /* 税金対策の壁打ち */ .tx-card .cf-q{flex-wrap:wrap} .tx-gen{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--card-2)} .tx-gen h4{display:flex;align-items:center;gap:6px;font-size:14px;margin-bottom:4px} .tx-gen ul{padding-left:18px;font-size:14px;line-height:1.65} .tx-src{font-size:13px;color:var(--sub);margin-top:6px;line-height:1.6} .dlg-taxmemo{width:min(760px,100%)} .tx-memo h3{font-size:15px;margin:14px 0 6px} .tx-memo p{font-size:15px;line-height:1.7} .tx-q{padding-left:22px;font-size:15px;line-height:1.75} .tx-t td small{display:block;font-size:13px;color:var(--sub)} .tx-warn{color:var(--warn);font-weight:700} .tx-a{list-style:none} .tx-a li{font-size:15px;line-height:1.6;padding:6px 0;border-top:1px solid var(--line-2)} .tx-a small{display:block;font-size:13px;color:var(--sub)} /* ===== 目的の言い直し・道筋 ===== */ .pp{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:-2px 0 6px;font-size:13px;font-weight:700;color:var(--teal-text)} .pp-st{font-style:normal;padding:0 7px;border-radius:999px;background:var(--teal-soft);color:var(--teal-ink);font-size:13px} .cm.me .pp{color:inherit} .m-seen{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--teal-ink)} .pend .nd-t{background:var(--blue-bg);color:var(--blue-ink)} /* ===== 秘書の頭脳 ===== */ .br-note{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--sub);line-height:1.6;margin-bottom:10px} .lg-list{display:flex;flex-direction:column;margin-top:8px} .lg-row{display:grid;grid-template-columns:118px 64px 1fr;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-2)} .lg-d{font-size:13px;color:var(--sub)} .lg-k{font-size:13px;font-weight:700;color:var(--teal-text)} .lg-t{font-size:15px;line-height:1.6} @media (max-width:767.98px){ .lg-row{grid-template-columns:1fr;gap:0} } .chg-done{font-size:13px;color:var(--sub)} /* ===== 設定 ===== */ .side-set{margin-top:auto;margin-bottom:10px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;padding-top:12px} .side-set + .side-status{margin-top:0} .pg-gear{display:none} @media (max-width:767.98px){ .page{position:relative} .pg-gear{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:12px;z-index:3;width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--sub)} .pg-gear .ms{font-size:24px} .page > .pg-head:first-of-type,.page > .now{margin-right:52px} } .st-card{padding:20px 22px} .st-card h2{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:6px} .st-card h2 .ms{color:var(--teal-text)} .st-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line-2)} .st-card h2 + .st-row{border-top:0} .st-x{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px} .st-x b{display:flex;align-items:center;gap:6px;font-size:15px} .st-x span{font-size:14px;color:var(--sub);line-height:1.55} .st-c{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .st-seg{flex-wrap:wrap} .st-seg button{min-height:44px;padding:0 14px;font-size:14px} .st-val{font-size:15px;font-weight:700} .st-dot{width:12px;height:12px;border-radius:3px;background:var(--bc);display:inline-block} .st-sws{display:flex;flex-wrap:wrap;gap:8px 14px} .st-chk{display:flex;align-items:center;gap:8px;font-size:14px} .sw{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font-size:14px;font-weight:700;color:var(--sub)} .sw i{position:relative;width:48px;height:28px;border-radius:14px;background:var(--line-3);transition:background .18s} .sw i::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .18s} .sw.on i{background:var(--teal-text)} .sw.on i::after{left:23px} .sw.on{color:var(--teal-text)} .st-chk .sw span{display:none} /* 文字の大きさ：大きめ */ html.fs-lg .main,html.fs-lg .chat-col,html.fs-lg .tsheet{zoom:1.1} /* ===== 見通し表：箱をやめて「時刻＋短い名前」の行に。罫線と地の色を減らし、今日の列だけ薄い色 ===== */ /* ===== 小さな直し（7-2） ===== */ .rl-m{display:flex;align-items:baseline;gap:10px;font-size:15px;font-weight:700;padding:14px 4px 6px;border-bottom:1px solid var(--line-2)} .rl-m span{font-size:13px;font-weight:700;color:var(--warn)} .rv-hint{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;margin-bottom:12px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-size:14px;line-height:1.6} .cs-g{font-size:14px;font-weight:700;color:var(--teal-text);padding:12px 0 4px;border-bottom:1px solid var(--line-2)} .cs-rows .cs-g:first-child{padding-top:2px} .cs-g + .cs-row{border-top:0} .cs-sub .ms{font-size:16px;vertical-align:-3px;margin-left:4px} .per-scope{display:flex;flex-direction:column;gap:16px;padding:14px;border:1.5px dashed var(--teal-line);border-radius:20px} .per-lab{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--teal-text)} @media (max-width:767.98px){ .per-scope{padding:10px;margin:0 -6px} } .mv-warn{display:flex;gap:6px;align-items:flex-start;margin:4px 0;padding:8px 10px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:14px;line-height:1.55} .ev.past,.mchip.past{opacity:.55} .ev.past .ev-tt{text-decoration:line-through;text-decoration-color:var(--icon-mute)} @media (min-width:1024px){ .mchip i{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} } @media (max-width:767.98px){ .mtabs{flex-wrap:wrap;overflow:visible} .mtabs-w::before,.mtabs-w::after{display:none} .cal-title{font-size:16px;white-space:nowrap} } /* L4：LINE の 1440 の配置（電話の枠を画面の高さいっぱいに・説明は1列） */ @media (min-width:1024px){ .ln-wrap{align-items:stretch;padding:20px 16px} .ln-frame{height:calc(100dvh - var(--strip) - 40px);max-height:900px} .ln-aside{align-self:center;width:340px} .ln-aside-ul li{font-size:15px} } /* 文字の底上げ：補足の small も 13px 以上 */ .cs-when small,.b3-k small,.gl-m small,.sstat small:not(.u),.ls-split small,.chk small,.lsum small{font-size:13px} .gl-m small{display:block;margin-left:0} /* 見通し表の行：時刻と名前を1つの流れに（狭い枠でも2行までで読める） */ .ch h2:has(.qh){flex-wrap:wrap} .qh{flex-basis:100%} .side-status .ss{flex-wrap:wrap} .side-status .ss em{white-space:nowrap} .gd-n{white-space:normal;overflow:visible} /* ===== ファイルを渡す ===== */ .chat{position:relative} .chat.drop{outline:3px dashed var(--teal-text);outline-offset:-6px} .chat-in .att{border:1px solid var(--line);background:var(--card);color:var(--teal-text)} .att-slot{position:absolute;left:12px;right:12px;bottom:70px;z-index:5} .att-slot:empty{display:none} .att-pop{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-2)} .att-h{font-size:13px;font-weight:700;color:var(--sub);padding:6px 8px 2px} .att-it{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 10px;border-radius:10px;font-size:15px;text-align:left} .att-it:hover{background:var(--card-2)} .att-it .ms{color:var(--teal-text)} .att-note{font-size:13px;color:var(--sub);padding:4px 8px} .fbub{display:flex;align-items:center;gap:10px;max-width:280px;padding:8px 12px 8px 8px;border-radius:16px 4px 16px 16px;background:var(--teal-soft);border:1px solid var(--teal-line);text-align:left} .fb-th{position:relative;flex:none;width:56px;height:70px;border-radius:8px;overflow:hidden;background:#fff;border:1px solid var(--line)} .fb-th img{width:100%;height:100%;object-fit:cover} .fb-th .fpaper,.fb-th .bankp{position:absolute;left:50%;top:4px;transform:translateX(-50%) scale(.2);transform-origin:top center} .fb-pdf{display:flex;align-items:center;justify-content:center;color:var(--danger)} .fb-pdf .ms{font-size:30px} .fb-x{display:flex;flex-direction:column;min-width:0} .fb-x b{font-size:14px;line-height:1.45;color:var(--ink);word-break:break-all} .fb-x small{font-size:13px;color:var(--sub)} .fpaper{position:relative;width:280px;padding:18px 16px;background:#FBFCFC;border:1px solid #D9DEE3;border-radius:6px;color:#24303A;display:flex;flex-direction:column;gap:6px;font-size:13px} .fp-h{font-size:18px;text-align:center;letter-spacing:.2em;margin-bottom:4px} .fp-to{font-size:13px;border-bottom:1px solid #C9D0D6;padding-bottom:4px} .fp-r{display:flex;justify-content:space-between;gap:8px} .fp-r em{font-style:normal;color:#56616B} .fp-r i{font-style:normal;font-weight:700} .fp-f{font-size:13px;color:#56616B;text-align:right} .dlg-file .fview{display:flex;flex-direction:column;align-items:center;gap:12px} .fv-big{transform:scale(1.2);transform-origin:top center;margin-bottom:60px} .fv-img{max-width:100%;max-height:60vh;border-radius:10px} :root[data-theme="dark"] .fpaper{color-scheme:light} /* 3回目の仕上げ */ .ss-kb{width:100%;margin-top:8px;white-space:nowrap} .ss-kb span{display:inline-flex;align-items:baseline;gap:2px} .ss-kb small{font-size:13px;font-weight:500;color:var(--sub)} .side-status .ss{flex-wrap:nowrap} .side-status .ss > span{white-space:nowrap} .mc-sum{font-size:15px;line-height:1.7} .mc-sum span{display:block;font-size:13px;color:var(--sub)} .chat-top span{white-space:nowrap;overflow:hidden;text-overflow:clip} /* 見通し表：時刻は1行目に小さく色で、名前は2行目から。言葉の途中で折らない */ .mc-b{flex-wrap:nowrap} @media (max-width:767.98px){ .now.m-open .hello-l,.now.m-open .now-row{display:none} .mcard{padding:12px 14px} .mcard h2{font-size:15px;margin-bottom:2px} .mcard p,.mc-sum{font-size:14px;line-height:1.6} .mcard .fx-koe{font-size:14px;padding:8px 10px;margin:4px 0} .mc-b .btn{flex:1;min-height:44px;padding:0 10px} } /* 最後の仕上げ：横のメニューの「覚えている事」は2段で枠の中に・スマホのあいさつは呼び方で改行 */ .ss-kb{white-space:normal;align-items:flex-start;padding:8px 10px;min-height:44px} .ss-kb .ms{margin-top:2px} .ss-kb span{display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0} .ss-kb span b{font-weight:700;white-space:nowrap} .ss-kb small{font-size:13px;font-weight:500;color:var(--sub);line-height:1.3} .app.side-min .ss-kb > span:not(.ms){display:none} .app.side-min .ss-kb{justify-content:center;padding:8px 0} .sp-br{display:none} @media (max-width:767.98px){ .sp-br{display:inline} .now h1.hello{line-height:1.4} .pg-gear{top:38px} } /* ===== 秘書の核・声の帯と字幕・根拠の枠（2026-10-13 ジャービスの外側） ===== * 水色は面ではなく「印」（輪と線）にだけ使う。動きは状態を伝えるためだけで、transform と opacity だけを動かす。 * 状態は色だけにしない：形と動き（輪・面・弧・分かれた輪・波）＋言葉＋中のアイコンで分ける。 */ :root{ --core:var(--teal); /* 核の輪（印） */ --core-ic:var(--teal-text); /* 核の中のアイコン */ --cap-bg:rgba(16,24,32,.90); /* 字幕の板（白い地の上で白い文字との比 13.5・まだ読んでいない所 8.1） */ --cap-bg-in:rgba(16,24,32,.80); /* 聞いている時の板（少し薄い。白い文字との比 9.5・薄い文字 6.1） */ --cap-ink:#FFFFFF; --cap-ink-2:rgba(255,255,255,.74);/* まだ読んでいない所 */ --cap-line:rgba(255,255,255,0); --ev-line:var(--teal); --ev-glow:rgba(0,198,210,.20); --ev-now:rgba(0,198,210,.16); --ev-dim:rgba(12,20,28,.20); /* 話している間だけ、枠の外を少し暗くする */ } :root[data-theme="dark"]{ --cap-bg:rgba(8,12,16,.90); --cap-bg-in:rgba(8,12,16,.78); --cap-line:rgba(255,255,255,.16); --ev-glow:rgba(6,222,229,.18); --ev-now:rgba(6,222,229,.16); --ev-dim:rgba(0,0,0,.24); } /* --- 核 --- */ .core{--cs:48px;position:relative;display:inline-block;flex:none;width:var(--cs);height:var(--cs);font-style:normal;vertical-align:middle} .core > i,.core > svg{position:absolute;inset:0;border-radius:50%;pointer-events:none} .core .c-halo{background:var(--core);opacity:0;transform:scale(.9);transition:transform .16s linear,opacity .2s ease} .core .c-ring{border:1.5px solid var(--core);opacity:.9} .core .c-wave{border:1.5px solid var(--core);opacity:0} .core .c-arc{inset:-1px;border:2.5px solid transparent;border-top-color:var(--core);opacity:0} .core .c-seg{width:100%;height:100%;opacity:0;overflow:visible;border-radius:0} .core .c-seg path{fill:none;stroke:var(--core);stroke-width:2.6;stroke-linecap:round;opacity:.22;transition:opacity .3s ease} .core .c-seg path.on{opacity:1} .core .c-seg path.cur{opacity:.6;animation:c-blink 1s ease-in-out infinite} .core > .c-ic{inset:auto;left:50%;top:50%;width:1em;border-radius:0;transform:translate(-50%,-50%);font-size:calc(var(--cs) * .44);color:var(--core-ic);font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24} .core[data-st="idle"] .c-ring,.core[data-st="await"] .c-ring{animation:c-breathe 4.4s ease-in-out infinite} .core[data-st="await"] .c-ring{animation-duration:2.4s} .core[data-st="listen"] .c-ring{opacity:1} .core[data-st="listen"] .c-halo{opacity:.16;transform:scale(1.06)} .core[data-st="think"] .c-ring{opacity:.2} .core[data-st="think"] .c-arc{opacity:1;animation:c-spin 1.05s linear infinite} .core[data-st="work"] .c-ring{opacity:0} .core[data-st="work"] .c-seg{opacity:1} .core[data-st="speak"] .c-ring{opacity:1} .core[data-st="speak"] .c-wave{animation:c-wave 1.9s cubic-bezier(.2,.6,.3,1) infinite} .core[data-st="speak"] .c-w2{animation-delay:.95s} @keyframes c-breathe{0%,100%{transform:scale(.9);opacity:.42}50%{transform:scale(1);opacity:.95}} @keyframes c-spin{to{transform:rotate(360deg)}} @keyframes c-wave{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}} @keyframes c-blink{0%,100%{opacity:.28}50%{opacity:.85}} .core-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:56px;height:56px;border-radius:50%;background:transparent} .core-btn:hover .c-ring{opacity:1} /* 会話の欄の上（秘書の顔） */ .chat-top{gap:10px;padding:12px 16px 12px 10px} .chat-top .core{--cs:46px} .chat-top .ct-x{min-width:0;flex:1} .chat-top .core-lab{font-size:14px;color:var(--sub);transition:color .2s} .chat-top .core-lab.on{color:var(--teal-text);font-weight:500} /* 作業の手順（核の下・スマホは帯の上） */ .core-steps{margin:10px 14px 0;padding:12px 14px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)} .core-steps[hidden]{display:none} .cst-h{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:6px;color:var(--ink)} .cst-h b{flex:1;font-weight:700} .cst-h .ms{color:var(--ok);font-size:20px} .cst-h .num{color:var(--sub);font-size:13px} .cst-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .cst-l li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--sub);min-height:28px} .cst-m{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-3);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;flex:none;color:var(--sub)} .cst-m .ms{font-size:15px} .cst-l li.cur{color:var(--ink);font-weight:500} .cst-l li.cur .cst-m{border-color:var(--core);color:var(--teal-text)} .cst-l li.ok{color:var(--ink)} .cst-l li.ok .cst-m{border-color:var(--core);background:var(--card);color:var(--teal-text)} .read-steps{margin:14px 0 0;box-shadow:none;text-align:left;width:100%} /* 横のメニュー（小さな核と、いまの状態） */ .ss-now .ss-core{display:inline-flex;align-items:center;gap:6px;min-width:0} .ss-now .core{--cs:14px} .core-mini > .c-ic{display:none} .core-mini .c-seg path{stroke-width:6} .core-mini .c-arc{border-width:2px} .ss-now [data-core-lab]{white-space:nowrap} .ss-now [data-core-lab].on{color:var(--teal-text);font-weight:500} /* スマホ：［話しかける］が核になる */ .dock-talk .core{--cs:36px;--core:rgba(255,255,255,.92);--core-ic:#FFFFFF} :root[data-theme="dark"] .dock-talk .core{--core:rgba(14,36,38,.9);--core-ic:var(--on-acc)} .dock-talk .core > .c-ic{font-size:20px} .dock-talk .dk-x{min-width:0} .dock-talk .dk-x small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* スマホ：会話の窓の上 */ .ts-face{display:flex;align-items:center;gap:6px;flex:1;min-width:0} .ts-core{width:44px;height:44px;margin-left:-8px} .ts-face .core{--cs:30px} .ts-x{min-width:0;flex:1} .tsheet-top .ts-x h2{font-size:16px;line-height:1.3} .ts-lab{display:block;font-size:13px;line-height:1.4;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ts-lab.on{color:var(--teal-text);font-weight:500} /* --- 声の帯（本文の下の中央）：1つの板に、左に小さな核・字幕・右に［止める］。スマホは下の帯のすぐ上 --- */ .vband{position:fixed;z-index:108;bottom:24px;left:0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none} .vband[hidden]{display:none} .vband > *{pointer-events:auto} .cap{position:relative;display:flex;align-items:center;gap:6px;max-width:min(820px,100%);min-height:52px;padding:4px 8px 4px 4px;border-radius:14px;background:var(--cap-bg);box-shadow:0 0 0 1px var(--cap-line),0 10px 28px rgba(0,0,0,.20);color:var(--cap-ink)} .cap[hidden]{display:none} .cap.in{background:var(--cap-bg-in)} .cap-core{flex:none;width:44px;height:44px;border-radius:12px} .cap-core .core{--cs:28px;--core:rgba(255,255,255,.88);--core-ic:#FFFFFF} .cap-core .core > .c-ic{font-size:16px} .cap-m{flex:1;min-width:0;padding:6px 10px 7px 2px} .cap-t{margin:0;font-size:19px;line-height:1.55;font-weight:500;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;overflow-wrap:anywhere;word-break:auto-phrase;text-wrap:balance} .cap.lab .cap-t{font-size:15px;color:var(--cap-ink-2)} .cap-r{color:var(--cap-ink)} .cap-u{color:var(--cap-ink-2)} .cap.lab .cap-r{color:var(--cap-ink-2)} .cap-ic{display:none} .cap-n{display:inline-block;min-width:24px;height:24px;margin-right:8px;padding:0 6px;border-radius:12px;border:1.5px solid var(--cap-ink);font:600 13px/21px Inter,'Noto Sans JP',sans-serif;text-align:center;vertical-align:2px;color:var(--cap-ink)} .cap-n[hidden]{display:none} .cap-note{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.86)} .cap-note[hidden]{display:none} .cap-x{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;height:44px;padding:0 12px 0 10px;border-radius:10px;border:1px solid rgba(255,255,255,.28);color:var(--cap-ink);font-size:14px;font-weight:700;white-space:nowrap} .cap-x[hidden]{display:none} .cap-x .ms{font-size:18px} .cap-x:hover{background:rgba(255,255,255,.08)} .vband .core-steps{margin:0;width:100%;max-width:520px} @media (min-width:1024px){ .vband .core-steps{display:none} } @media (max-width:1023.98px){ .vband{left:12px;width:calc(100% - 24px)} .cap{width:100%} .cap-t{font-size:17px} .cap-x{padding:0;width:44px} .cap-x .cap-x-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .cap-x .ms{font-size:22px} } /* 知らせは、声の帯が出ている間は帯の上に間を空けて出す */ body.band-on .toast{bottom:var(--band-clear,140px)} /* --- 根拠の枠（秘書が見た所）と「今ここ」 --- */ .kk-frame,.kk-item{position:relative} .kk-x{position:absolute;pointer-events:none;font-style:normal;display:block} .kk-ring{inset:-8px;border-radius:18px;z-index:4;box-shadow:0 0 0 1.5px var(--ev-line),0 0 24px 2px var(--ev-glow);animation:kk-in .4s ease both} .kk-ring.kk-all{box-shadow:0 0 0 2px var(--ev-line),0 0 0 6px var(--ev-now),0 0 28px 4px var(--ev-glow)} .kk-tag{position:absolute;top:-13px;right:14px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px 0 7px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1.5px var(--ev-line);color:var(--teal-text);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap} .kk-tag .ms{font-size:15px} .kk-dim{inset:-8px;border-radius:18px;z-index:3;box-shadow:0 0 0 200vmax var(--ev-dim);opacity:0;transition:opacity .4s ease} .kk-dim.kk-on{opacity:1} .kk-iring{inset:-3px;border-radius:14px;z-index:5;opacity:0;transform:scale(.985);box-shadow:0 0 0 2px var(--ev-line),0 0 0 6px var(--ev-now),0 0 22px 4px var(--ev-glow);transition:opacity .3s ease,transform .3s var(--ease)} .kk-iring.kk-now{opacity:1;transform:none} .kk-iring.kk-read{opacity:1;transform:none;box-shadow:0 0 0 1px var(--teal-line)} .kk-badge{position:absolute;top:-9px;left:-9px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--teal-text);color:var(--on-acc);font:600 12.5px/22px Inter,'Noto Sans JP',sans-serif;text-align:center;box-shadow:0 0 0 2px var(--card)} .kk-iring.kk-read .kk-badge{background:var(--card);color:var(--teal-text);box-shadow:0 0 0 1.5px var(--teal-line)} @keyframes kk-in{from{opacity:0}to{opacity:1}} /* 吹き出しの「根拠」の札 */ .kk-chip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;min-height:44px;max-width:100%;padding:0 12px 0 10px;border-radius:12px;border:1px solid var(--line-3);background:var(--card);color:var(--teal-text);font-size:13.5px;line-height:1.35;text-align:left} .kk-chip b{font-weight:700;flex:none} .kk-chip span:last-child{color:var(--sub);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kk-chip .ms{font-size:18px} .kk-chip:hover{border-color:var(--teal-text)} @media (prefers-reduced-motion:reduce){ .core *,.core,.kk-x,.cap{animation:none!important;transition:none!important} .core[data-st="idle"] .c-ring,.core[data-st="await"] .c-ring{opacity:.75;transform:none} .core[data-st="listen"] .c-halo{opacity:.2;transform:scale(1.14)!important} .core[data-st="think"] .c-arc{opacity:1;transform:rotate(45deg)} .core[data-st="speak"] .c-wave{opacity:.42;transform:scale(1.3)} .core[data-st="speak"] .c-w2{opacity:0} .core .c-seg path.cur{opacity:.6} } /* 会話の欄の顔：待機の時はサンロードの印、動いている時は状態のアイコン */ .ct-core .chat-av{position:absolute;left:50%;top:50%;width:38px!important;height:38px!important;margin:-19px 0 0 -19px;border:0!important;background:transparent;transition:opacity .25s ease,transform .25s ease} .ct-core .chat-av img{width:100%;height:auto} .ct-core .core > .c-dot{display:none} .ct-core .core > .c-ic{transition:opacity .2s ease} .ct-core .core[data-st="idle"] > .c-ic,.ct-core .core[data-st="await"] > .c-ic{opacity:0} .ct-core .core:not([data-st="idle"]):not([data-st="await"]) ~ .chat-av{opacity:0;transform:scale(.86)} @media print{ .core-steps,.vband,.voice-bar{display:none!important} } /* ===== 2回目の直し（2026-10-13 F1〜F6） ===== */ /* F5：待機の核は「輪と点」（会話の欄の顔だけサンロードの印） */ .core > .c-dot{inset:auto;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--core);opacity:0;transition:opacity .2s ease} .core[data-st="idle"] > .c-dot,.core[data-st="await"] > .c-dot{opacity:1} .core-mini > .c-dot{width:4px;height:4px;margin:-2px 0 0 -2px} .core:not([data-st="idle"]):not([data-st="await"]) > .c-dot{opacity:0} /* F3：作業の手順は、会話の流れの中の1つの吹き出し */ .cm.cst-cm{max-width:92%;width:300px} .cm .cb.cst-bub{padding:12px 14px 10px;background:var(--bg);white-space:normal} .cst-bub .core-steps{margin:0;padding:0;border:0;background:transparent;box-shadow:none} /* F6：言葉の途中で折らない・はみ出さない（ボタン・候補・知らせ・札）。長い時は文節の切れ目で2行まで */ .btn.now-act{white-space:normal;height:auto;padding-top:10px;padding-bottom:10px;line-height:1.4;text-align:center} .btn.now-act > span:last-child{min-width:0;word-break:keep-all;overflow-wrap:anywhere;word-break:auto-phrase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .btn.now-act .ms{flex:none} .chip{word-break:keep-all;overflow-wrap:anywhere;word-break:auto-phrase;text-wrap:balance} .toast{width:max-content;max-width:calc(100vw - 32px)} .toast > span{min-width:0;word-break:keep-all;overflow-wrap:anywhere;word-break:auto-phrase} .toast .ms,.toast-undo{flex:none;white-space:nowrap} /* ===== 相談先の振り分けとブレーキ（2026-10-13） ===== */ .sd-card .cf-q .ms{color:var(--warn)} .sd-why{margin:0 0 10px;font-size:15px;line-height:1.7;color:var(--ink)} .sd-sec{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:4px 10px;padding:8px 0;border-top:1px solid var(--line-2)} .sd-l{font-size:13px;font-weight:700;color:var(--sub);padding-top:2px} .sd-q{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.6} .sd-q li::marker{font-family:Inter,'Noto Sans JP',sans-serif;font-weight:600;color:var(--teal-text)} .sd-who,.sd-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.55} .sd-who b{font-weight:700} .sd-who small{display:block;font-size:12.5px;color:var(--sub)} .sd-plan li::before{content:"・"} .sd-bring{margin:0;font-size:14px;line-height:1.6} .sd-next{display:flex;gap:6px;align-items:flex-start;margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line-2);font-size:13px;line-height:1.6;color:var(--sub)} .sd-next .ms{font-size:18px;color:var(--teal-text);margin-top:1px} .sd-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 14px} .sd-row{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 8px;align-items:start;min-height:56px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);text-align:left} .sd-row .sd-ic{grid-row:1/3;font-size:22px;color:var(--teal-text);margin-top:2px} .sd-row .sd-x{min-width:0} .sd-row .sd-x b{display:block;font-size:14.5px;line-height:1.4} .sd-row .sd-x small{display:block;font-size:12.5px;line-height:1.5;color:var(--sub)} .sd-row .sd-st{grid-column:2;justify-self:start;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--bg);color:var(--sub)} .sd-row .sd-st.st-none{background:var(--warn-bg);color:var(--warn)} .sd-row .sd-st.st-set{background:var(--ok-bg);color:var(--ok)} .sd-row.on{border-color:var(--teal-text);box-shadow:0 0 0 1px var(--teal-text)} .sd-row:hover{border-color:var(--line-3)} .sd-memo{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:var(--card-2)} .sd-memo h3{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:16px} .sd-memo h3 .ms{color:var(--teal-text)} .sd-memo h4{margin:12px 0 6px;font-size:13.5px;color:var(--sub)} .sd-state{margin:0;font-size:13.5px;color:var(--sub)} .sd-topic{margin:4px 0 0;font-size:14px;font-weight:700} .sd-meet{display:flex;gap:6px;align-items:center;margin:12px 0 8px;font-size:14px} .sd-meet .ms{color:var(--teal-text)} @media (max-width:767.98px){ .sd-roster{grid-template-columns:minmax(0,1fr)} .sd-sec{grid-template-columns:minmax(0,1fr)} } /* F6（見回し）：言葉の途中で折らない。Chrome は文節で折り（auto-phrase）、最後の行が短くならないように整える（pretty）。 * 収まらない時だけ途中で折る（anywhere）。表は今のまま。Safari など文節で折れないブラウザでも、短い見出し・名前・ボタンは句読点・かっこ・空白でだけ折る */ body{overflow-wrap:anywhere;word-break:auto-phrase} table,table *{overflow-wrap:normal} p,li,.cb,.sub,.br-note,.cs-note,.pg-date,.hello-l,.fx-note,.sd-why{text-wrap:pretty} .btn,.chip,.pill,h1,h2,h3,h4,b,strong,em,small,.ev-tt,.ev-mm,.gd-n,.gx-n,.rr-t,.dtd,.nb-k,.bz-n,.b3-k,.fl-l,.toast > span,.seg2 button,.st-x b,.st-x span,label > span,.sd-row b,.sd-row small,.kb-shl,.p-shop,.cal i{word-break:keep-all;word-break:auto-phrase} .sd-sec{grid-template-columns:minmax(0,1fr)} .num,.bv,[data-v] > .num{overflow-wrap:normal} /* 狭い画面の切り替え（設定・絞り込み）：はみ出さず、収まらない時は文節で2行に */ @media (max-width:767.98px){ .seg2{max-width:100%} .seg2 button{flex:1 1 auto;min-width:0;white-space:normal;text-align:center;line-height:1.3;padding:4px 10px} } .cm .cb{word-break:auto-phrase} /* 相談メモの「聞く事・確かめる事」：光る時は番号の札が行の番号の代わりになる */ .sd-memo .sd-q{padding-left:2em} .sd-memo .sd-q > li:has(> .kk-iring.kk-now)::marker,.sd-memo .sd-q > li:has(> .kk-iring.kk-read)::marker{color:transparent} .sd-memo .sd-q > li > .kk-iring > .kk-badge{left:-31px;top:2px} /* スマホで会話の窓を開いている時の知らせは、窓の上の暗い所に出す（窓の中の候補や入力欄に重ねない） */ @media (max-width:1023.98px){ body.sheet-open .toast{bottom:auto;top:calc(15dvh - 60px)} } /* ===== ホーム＝秘書の間（2026-10-13 3回目） ===== * 暗い地（夜の紺）・細い水色の線・角の括弧・ゆっくりした動き・等幅の数字。真ん中にサンロード（太陽の道）の太陽。 * ライト／ダークの設定にかかわらず、ホームの本文と横のメニューだけをこの色にする（上の帯・スマホの下の帯とタブは今のまま）。 */ .app.is-hall{grid-template-columns:240px minmax(0,1fr) 0} .app.is-hall.side-min{grid-template-columns:76px minmax(0,1fr) 0} .app.is-hall .chat-col{display:none} @media (min-width:1024px) and (max-width:1279.98px){ .app.is-hall{grid-template-columns:220px minmax(0,1fr) 0} } @media (max-width:1023.98px){ .app.is-hall{grid-template-columns:220px minmax(0,1fr)} } /* 色は全体の見た目の変数（近未来／実務）をそのまま使う（15回目で、ホームだけの色の差し替えをやめた） */ .side-logo-h{display:none} .app.is-hall .side-logo{display:none} .app.is-hall .side-logo-h{display:block;width:140px;margin:0} .app.is-hall.side-min .side-logo-h{display:none} .pg-home{max-width:none;padding:20px 22px 40px} .pg-home.enter{animation:fade .35s ease both} .hall{position:relative} .hall-stage{display:grid;grid-template-columns:minmax(0,300px) minmax(390px,1fr) minmax(0,300px) 124px;gap:18px;align-items:start} .hall-l,.hall-r{display:flex;flex-direction:column;gap:14px;min-width:0} .hall-c{position:sticky;top:6px;display:flex;flex-direction:column;align-items:center;min-width:0} /* 枠：角だけの括弧と細い線 */ .hall .card,.hall .now{position:relative;background:var(--card);border:1px solid rgb(var(--hud-rgb) / .15);border-radius:3px;box-shadow:none;padding:14px 16px 14px} .hall .card::before,.hall .now::before,.hall .card::after,.hall .now::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none} .hall .card::before,.hall .now::before{left:-1px;top:-1px;border-left:2px solid var(--hud);border-top:2px solid var(--hud)} .hall .card::after,.hall .now::after{right:-1px;bottom:-1px;border-right:2px solid var(--hud);border-bottom:2px solid var(--hud)} .hall .ch{margin-bottom:8px} .hall .ch h2,.hall .gl-rows h2,.hm-h{font-size:15px;font-weight:700;letter-spacing:.08em;color:var(--teal-ink)} .hall .ch h2 .num{color:var(--sub);font-weight:500;letter-spacing:0} .hall .ch-r{font-size:14px;color:var(--sub)} .hall .link-b{color:var(--teal-text)} /* 左：今日 */ .hall .now{gap:8px;padding:16px 16px 14px} .hall .now-top{flex-direction:column;align-items:flex-start;gap:2px} .hall .now h1.hello{font-size:21px;line-height:1.4;letter-spacing:.04em;color:var(--hl)} .hall .now .pg-date{font-size:14px} .hall .clock-tag{background:transparent;border-color:rgb(var(--hud-rgb) / .4);color:var(--teal-ink)} .hall .now .hello-l{font-size:15px;line-height:1.7;color:var(--ink)} .hall .now-row{flex-direction:column;align-items:stretch;gap:12px} .hall .now-act{width:100%;justify-content:center;min-height:52px;font-size:16px} .hall .now-side{min-width:0} .hall .now-next{font-size:15px} .hall .now-next b{font-size:22px;font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;color:var(--hl)} .hall .wx-home{background:transparent;padding:0;box-shadow:none;border:0} .hall .m-seen{font-size:14px;color:var(--sub)} .hall .mcard{background:rgb(var(--gold-rgb) / .06);border:1px solid rgb(var(--gold-rgb) / .25);border-radius:3px} .hall .flow{padding-bottom:10px} .hall .fl{min-height:44px;padding:6px 6px;border-radius:3px} .hall .fl.next{background:rgb(var(--hud-rgb) / .12)} .hall .fl-t{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;color:var(--hl)} .hall .fl-x b{font-size:15px} .hall .fl-x small{font-size:13px} /* 右：お金・領収書と決算まで・目標 */ .hall .nb-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .hall .nb{background:rgb(var(--glass-rgb) / .55);border:1px solid rgb(var(--hud-rgb) / .14);border-radius:3px;padding:8px 10px} .hall .nb.cash{grid-column:1/-1} .hall .nb-k{font-size:14px;color:var(--sub)} .hall .nb b.num{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;font-size:20px;color:var(--hl);letter-spacing:.01em} .hall .nb.cash b.num{font-size:28px;color:var(--gold-hi)} .hall .nb.em b.num{color:var(--teal-ink)} .hall .nums-r{gap:10px} .hall .qm{background:transparent;border-color:rgb(var(--hud-rgb) / .4);color:var(--teal-ink)} .hall-rc .rc-n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .hall-rc .rc-n b{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;font-size:30px;font-weight:600;color:var(--gold-hi)} .hall-rc .rc-n b small{font-size:15px;margin-left:2px;color:var(--sub)} .hall-rc .rc-n .btn{margin-left:auto} .hall-rc .road-line{margin-top:10px;padding:10px 0 0;border-top:1px solid var(--line-2);font-size:15px;flex-wrap:wrap} .hall-rc .road-line b{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;font-size:18px;color:var(--hl)} .hall-rc .hall-shoot{width:100%;margin-top:12px} .hall .gl-rows{margin:0;padding:0;border:0} .hall .gl-rows h2{margin:0 0 8px} .hall .glr{min-height:44px} .hall .glr-t{font-size:15px} .hall .glr-bar{background:rgb(var(--hud-rgb) / .12)} .hall .glr-bar i{background:linear-gradient(90deg,var(--teal-deep),var(--teal-text))} .hall .glr.reached .glr-bar i{background:linear-gradient(90deg,#E8A33A,var(--gold-2))} /* 真ん中：サンロード（太陽の核）・状態の言葉・字幕・話しかける */ .sun-btn{position:relative;display:block;width:330px;height:330px;border-radius:50%;background:transparent} .sun-btn::after{content:"";position:absolute;left:-36%;right:-36%;top:79%;height:1px;background:linear-gradient(90deg,transparent,rgb(var(--hud-rgb) / .55) 28%,rgb(var(--gold-rgb) / .75) 50%,rgb(var(--hud-rgb) / .55) 72%,transparent);pointer-events:none} .sun-btn:focus-visible{outline:2px solid rgb(var(--hud3-rgb) / .7);outline-offset:4px} .core-sun{--cs:330px;--core:#00C6D2;--core-ic:#FFE7B0;display:block;width:100%;height:100%} .core-sun > i,.core-sun > svg{position:absolute;inset:0;border-radius:50%;pointer-events:none} .core-sun > .c-dot,.core-sun > .c-ic{display:none} .core-sun .s-glow{background:radial-gradient(circle,rgb(255 240 190 / calc(.72 * var(--glow))) 0%,rgb(var(--gold-rgb) / .42) 16%,rgb(255 156 40 / calc(.16 * var(--glow))) 34%,rgb(var(--hud-rgb) / .06) 54%,transparent 68%);opacity:.9;transition:opacity .5s ease,transform .5s ease} .core-sun .s-rays{opacity:.5;transition:opacity .4s ease,transform .16s linear} .core-sun .s-rays svg,.core-sun .s-tick svg{width:100%;height:100%;overflow:visible} .core-sun .s-rays line{stroke:rgb(var(--gold-rgb) / .62);stroke-width:1.1;stroke-linecap:round} .core-sun .s-tick{opacity:.25;transition:opacity .5s ease} .core-sun .s-tick circle{fill:none;stroke:rgb(var(--hud-rgb) / .7);stroke-width:1.2;stroke-dasharray:1.5 8} .core-sun .s-tick .s-tick2{stroke:rgb(var(--hud-rgb) / .35);stroke-width:1;stroke-dasharray:70 14 6 14} .core-sun .s-disc{inset:33%;background:radial-gradient(circle at 42% 38%,#FFFDF3 0%,#FFF1BE 16%,#FFD55E 44%,#FFAF22 74%,#EE8700 100%);box-shadow:0 0 26px 6px rgb(255 190 64 / calc(.6 * var(--glow))),0 0 80px 26px rgb(255 166 40 / calc(.20 * var(--glow)));transition:transform .5s ease,opacity .5s ease} .core-sun .c-ring{inset:23%;border:1.5px solid rgb(var(--hud-rgb) / .5);opacity:.5} .core-sun .c-arc{inset:19%;border:2px solid transparent;border-top-color:var(--teal);border-right-color:rgb(var(--hud-rgb) / .35)} .core-sun > .c-seg{left:16%;top:16%;width:68%;height:68%;border-radius:0} .core-sun .c-seg path{stroke:var(--teal);stroke-width:1.6} .core-sun .c-wave{inset:31%;border:2px solid rgb(var(--gold-rgb) / .7)} .core-sun .c-halo{inset:24%;background:radial-gradient(circle,rgb(var(--hud-rgb) / .30),rgb(var(--hud-rgb) / 0) 70%)} /* 眠っている：小さく、ゆっくり呼吸（光の筋は弱く） */ .core-sun[data-st="idle"] .s-disc,.core-sun[data-st="await"] .s-disc{animation:sun-sleep 5.2s ease-in-out infinite} .core-sun[data-st="await"] .s-disc{animation-duration:2.6s} .core-sun[data-st="idle"] .s-rays{opacity:.16;transform:scale(.86)} .core-sun[data-st="await"] .s-rays{opacity:.3;transform:scale(.9)} .core-sun[data-st="idle"] .s-glow{opacity:.5;transform:scale(.86)} .core-sun[data-st="idle"] .c-ring,.core-sun[data-st="await"] .c-ring{animation:none;opacity:.16} .core-sun[data-st="idle"] .s-tick{opacity:.12} @keyframes sun-sleep{0%,100%{transform:scale(.76);opacity:.78}50%{transform:scale(.82);opacity:.95}} /* 起きている：外の細い輪がゆっくり回る */ .core-sun[data-st="awake"] .s-tick{opacity:.9;animation:c-spin 36s linear infinite} .core-sun[data-st="awake"] .s-rays{opacity:.5} .core-sun[data-st="awake"] .s-disc{animation:sun-awake 4s ease-in-out infinite} .core-sun[data-st="awake"] .c-halo{opacity:.12;transform:none} @keyframes sun-awake{0%,100%{transform:scale(.97)}50%{transform:scale(1)}} /* 聞いている：声の大きさで光の筋が伸び縮み */ .core-sun[data-st="listen"] .s-rays{opacity:.82} .core-sun[data-st="listen"] .s-tick{opacity:.6;animation:c-spin 22s linear infinite} .core-sun[data-st="listen"] .c-halo{opacity:.35;transform:scale(1.05)} /* 考えている：内の輪の弧が回る */ .core-sun[data-st="think"] .c-arc{opacity:1;animation:c-spin 1.2s linear infinite} .core-sun[data-st="think"] .s-tick{opacity:.45;animation:c-spin 9s linear infinite reverse} .core-sun[data-st="think"] .s-rays{opacity:.28} .core-sun[data-st="think"] .s-disc{transform:scale(.93)} .core-sun[data-st="think"] .c-ring{opacity:.25} /* 作業している：輪が手順の数に分かれて埋まる */ .core-sun[data-st="work"] .s-rays{opacity:.28} .core-sun[data-st="work"] .s-disc{transform:scale(.93)} /* 話している：声に合わせて脈打ち、波が広がる */ .core-sun[data-st="speak"] .s-disc{animation:sun-speak .72s ease-in-out infinite} .core-sun[data-st="speak"] .s-rays{opacity:.86} .core-sun[data-st="speak"] .s-glow{opacity:1} .core-sun[data-st="speak"] .c-wave{animation:sun-wave 2.1s cubic-bezier(.2,.6,.3,1) infinite} .core-sun[data-st="speak"] .c-w2{animation-delay:1.05s} @keyframes sun-speak{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}} @keyframes sun-wave{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.1);opacity:0}} /* 受け取った（聞き取れた瞬間）：小さく波打つ */ .core.ack .c-wave{animation:sun-wave .9s cubic-bezier(.2,.6,.3,1) 1!important} .core-sun.ack .s-disc{animation:sun-ack .6s ease-out 1!important} @keyframes sun-ack{0%{transform:scale(1)}35%{transform:scale(1.12)}100%{transform:scale(1)}} .sun-lab{display:flex;flex-direction:column;align-items:center;gap:2px;margin:-6px 0 0;text-align:center} .sun-name{font-size:15px;font-weight:700;letter-spacing:.32em;color:var(--teal-ink);padding-left:.32em} .sun-lab b{font-size:21px;font-weight:700;letter-spacing:.08em;color:var(--gold-hi)} .sun-hint{font-size:14px;color:var(--sub)} .hall-subs{width:min(560px,100%);min-height:118px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;margin-top:12px} .hs{display:grid;grid-template-columns:5em minmax(0,1fr);gap:10px;margin:0;align-items:baseline} .hs b{display:inline-flex;align-items:center;gap:2px;justify-content:flex-end;font-size:14px;font-weight:700;letter-spacing:.06em} .hs b .ms{font-size:16px} .hs.me b{color:var(--teal-text)} .hs.bot b{color:var(--gold-2)} .hs-t{font-size:17px;line-height:1.6;color:var(--hl);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hs.me .hs-t{color:#DDF6F8} .hs.age1{opacity:.82} .hs.age2{opacity:.62} .hs.live .hs-t{font-weight:500} .hs-u{color:var(--sub)} .hs-r{color:var(--hl)} .hs-n{display:inline-block;min-width:22px;height:22px;margin-right:6px;padding:0 5px;border-radius:11px;border:1.5px solid var(--gold-2);font:600 12.5px/19px Inter,sans-serif;font-style:normal;text-align:center;color:var(--gold-hi);vertical-align:2px} .hall-talk{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:14px;width:min(520px,100%)} .hall-mic{min-width:260px;border-radius:999px;box-shadow:0 0 0 1px rgb(92 225 232 / calc(.3 * var(--glow))),0 0 28px rgb(0 198 210 / calc(.25 * var(--glow)))} .hall-in{display:flex;align-items:center;gap:8px;width:100%;padding:4px 4px 4px 14px;border-radius:999px;background:var(--field);border:1px solid rgb(var(--hud-rgb) / .3)} .hall-in input{flex:1;min-width:0;min-height:44px;background:transparent;border:0;color:var(--ink);font-size:15px;outline:none} .hall-in input::placeholder{color:var(--mute)} .hall-in:focus-within{border-color:var(--teal-text);box-shadow:0 0 0 3px rgb(0 198 210 / calc(.2 * var(--glow)))} .hall-in .send{width:44px;height:44px;border-radius:50%;background:var(--teal-text);color:var(--on-acc)} .hall-log{font-size:14px} /* いちばん右：声の波と、動いている事の印 */ .hall-side{display:flex;flex-direction:column;gap:16px;padding:6px 0 0 14px;border-left:1px solid rgb(var(--hud-rgb) / .18);min-width:0} .hall-wave{display:flex;flex-direction:column;gap:6px} .hw-l{font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--teal-ink)} .hw-bars{display:flex;align-items:center;gap:2px;height:68px;padding:4px 0;border-top:1px solid rgb(var(--hud-rgb) / .15);border-bottom:1px solid rgb(var(--hud-rgb) / .15)} .hw-bars i{flex:1;height:100%;border-radius:2px;background:linear-gradient(180deg,var(--cy-hi),var(--teal));transform:scaleY(.08);opacity:.85} .hw-s{font-size:14px;color:var(--sub)} .hall-sig{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .hall-sig li{display:grid;grid-template-columns:10px minmax(0,1fr);gap:2px 6px;align-items:baseline} .hall-sig span{font-size:13px;color:var(--sub);line-height:1.4} .hall-sig b{grid-column:2;font-size:14px;font-weight:500;color:var(--ink);line-height:1.45} .sg-dot{width:7px;height:7px;border-radius:50%;background:var(--ok-dot);box-shadow:0 0 6px rgb(61 214 140 / calc(.7 * var(--glow)));margin-top:4px} /* そのほか（決めてほしい事・気づいた事） */ .hall-more{margin-top:26px;padding-top:16px;border-top:1px solid rgb(var(--hud-rgb) / .16)} .hm-h{margin:0 0 12px} .hm-g{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start} .hall .nd{border-color:rgb(var(--hud-rgb) / .14)} /* 会話を全部見る（Mac の秘書の間の引き出し） */ .hall-drawer{position:fixed;top:var(--strip);right:0;bottom:0;z-index:70;width:400px;max-width:100%;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--card);border-left:1px solid rgb(var(--hud-rgb) / .3);box-shadow:-20px 0 50px rgb(0 0 0 / calc(.45 * var(--glow)));animation:fade .18s ease both} .hall-drawer[hidden]{display:none} .hd-top{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:15px;padding:2px 2px 0 6px} .hd-slot{flex:1;min-height:0;display:flex} .hd-slot .chat{flex:1;height:auto;min-height:0} /* 中くらいの幅（Mac の小さい画面・横向きのタブレット）：核を上に、枠は2列 */ @media (max-width:1279.98px){ .hall-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "l r" "s s"} .hall-c{grid-area:c;position:static} .hall-l{grid-area:l} .hall-r{grid-area:r} .hall-side{grid-area:s;flex-direction:row;flex-wrap:wrap;border-left:0;border-top:1px solid rgb(var(--hud-rgb) / .18);padding:12px 0 0} .hall-wave{flex:0 0 200px} .hall-sig{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} } /* スマホ：上の真ん中に核、その下に字幕、数字は2列の小さな枠 */ @media (max-width:767.98px){ .pg-home{padding:12px 14px calc(150px + env(safe-area-inset-bottom))} .hall-stage{display:flex;flex-direction:column;gap:14px} .hall-c{order:0} .hall-r{order:1} .hall-l{order:2} .hall-side{order:3} .sun-btn{width:212px;height:212px} .core-sun{--cs:212px} .sun-btn::after{left:-20%;right:-20%} .sun-lab b{font-size:19px} .hall-subs{min-height:84px;margin-top:8px} .hs{grid-template-columns:4.2em minmax(0,1fr);gap:8px} .hs-t{font-size:16px} .hall-talk .hall-mic,.hall-talk .hall-in{display:none} .hall-talk{margin-top:6px} .hall .now h1.hello{font-size:20px} .hm-g{grid-template-columns:minmax(0,1fr)} .hall-side{flex-direction:column} .hall-wave{flex:none} .hall-sig{grid-template-columns:repeat(2,minmax(0,1fr))} .hall .pg-gear,.pg-home > .pg-gear{background:rgb(var(--glass-rgb) / .8);border-color:rgb(var(--hud-rgb) / .35);color:var(--teal-ink)} } @media (prefers-reduced-motion:reduce){ .core-sun[data-st="idle"] .s-disc,.core-sun[data-st="await"] .s-disc{transform:scale(.8)} .core-sun[data-st="think"] .c-arc{transform:rotate(45deg)} .core-sun[data-st="speak"] .c-wave{opacity:.45;transform:scale(1.5)} .core-sun[data-st="listen"] .s-rays{transform:scale(1.08)} .hw-bars i{transform:scaleY(.08)!important} } .page-hidden .core *,.page-hidden .hw-bars i{animation-play-state:paused!important} .hall-stage{grid-template-columns:minmax(0,290px) minmax(360px,1fr) minmax(0,290px) 132px} .hs{grid-template-columns:5.8em minmax(0,1fr)} .hall .fl{grid-template-columns:28px 54px minmax(0,1fr) auto;gap:6px} .hall .fl-done{width:44px;padding:0;justify-content:center} .hall .fl-done .tb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hall .fl-ft{margin-top:6px} .core-sun[data-st="idle"] .s-rays{opacity:.22;transform:scale(.88)} @keyframes sun-sleep{0%,100%{transform:scale(.82);opacity:.82}50%{transform:scale(.88);opacity:.97}} @media (max-width:767.98px){ .hs{grid-template-columns:5.6em minmax(0,1fr)} .hs b{font-size:13px} } .app.no-anim{transition:none!important} .nw{white-space:nowrap} .hall-rc .road-line{align-items:flex-start;justify-content:space-between;gap:6px 10px} .hall-rc .rl-l{display:flex;flex-direction:column;gap:2px;min-width:0} .hall-rc .rl-main{display:inline-flex;align-items:baseline;gap:6px;font-size:15px} .hall-rc .rl-main .ms{align-self:center;color:var(--teal-text)} .hall-rc .rl-sub{font-size:14px;color:var(--sub)} .hall-rc .rl-sub b{font-size:15px} .hall-rc .road-line{justify-content:flex-start} .hall-rc .rl-l{align-items:flex-start;text-align:left;flex:1} .hall-rc .road-line{flex-direction:column;align-items:flex-start} /* ===== 秘書の間 4回目（お手本に近づける：光る核が主役・枠は線だけ・大きな光る数字・1画面） ===== */ .app.is-hall .dock-talk .core{--core:rgba(3,20,30,.85);--core-ic:#03141E} .app.is-hall .dock-talk{box-shadow:0 0 22px rgb(0 198 210 / calc(.45 * var(--glow)))} .app.is-hall .dock-shoot{background:transparent;border-color:rgb(var(--hud3-rgb) / .55);color:var(--cy-hi)} /* 核：大きな光の玉と、左右の枠の近くまで届く光の筋 */ .hall-c{z-index:0} .hall-l,.hall-r,.hall-side{position:relative;z-index:1} .sun-btn{width:250px;height:250px;margin-top:64px;z-index:0} .sun-btn::after{left:-120%;right:-120%;top:96%;opacity:.8} .core-sun{--box:820px;--disc:236px;position:absolute;left:50%;top:50%;width:var(--box);height:var(--box);margin:calc(var(--box) / -2) 0 0 calc(var(--box) / -2)} .core-sun > i,.core-sun > svg{border-radius:50%} .core-sun .s-glow{inset:calc((var(--box) - var(--disc) * 3.2) / 2);background:radial-gradient(circle,rgb(255 244 200 / calc(.85 * var(--glow))) 0%,rgb(255 214 110 / calc(.55 * var(--glow))) 12%,rgb(255 170 50 / calc(.24 * var(--glow))) 26%,rgb(255 140 30 / calc(.08 * var(--glow))) 42%,rgb(var(--hud-rgb) / .04) 58%,transparent 70%);opacity:.95} .core-sun .s-rays{inset:0;opacity:.62;animation:c-spin 240s linear infinite} .core-sun .s-rays line{stroke-width:1.1} .core-sun .s-rays .rl{stroke:rgb(var(--gold-rgb) / .55);stroke-width:1.3} .core-sun .s-rays .rm{stroke:rgb(255 206 120 / calc(.42 * var(--glow)))} .core-sun .s-rays .rs{stroke:rgb(var(--hud-rgb) / .35)} .core-sun .s-disc{inset:calc((var(--box) - var(--disc)) / 2);background:radial-gradient(circle at 42% 38%,#FFFFF6 0%,#FFF4C8 14%,#FFDB6A 40%,#FFB52A 70%,#F08C00 100%);box-shadow:0 0 40px 10px rgb(255 196 70 / calc(.65 * var(--glow))),0 0 120px 40px rgb(255 170 40 / calc(.28 * var(--glow))),0 0 220px 80px rgb(255 150 30 / calc(.10 * var(--glow)))} .core-sun .c-wave{inset:calc((var(--box) - var(--disc)) / 2);border-width:2px} .core-sun .c-ring{inset:calc((var(--box) - var(--disc) * 1.2) / 2)} .core-sun .c-arc{inset:calc((var(--box) - var(--disc) * 1.32) / 2);border-width:2.5px} .core-sun .c-halo{inset:calc((var(--box) - var(--disc) * 1.5) / 2)} .core-sun > .c-seg{left:calc((var(--box) - var(--disc) * 1.42) / 2);top:calc((var(--box) - var(--disc) * 1.42) / 2);width:calc(var(--disc) * 1.42);height:calc(var(--disc) * 1.42)} .core-sun .s-tick{inset:calc((var(--box) - var(--disc) * 1.75) / 2)} /* 眠っている時も、静かに光っている（光の筋が短く・ゆっくり・弱いだけ） */ .core-sun[data-st="idle"] .s-disc,.core-sun[data-st="await"] .s-disc{animation:sun-sleep2 6s ease-in-out infinite} .core-sun[data-st="await"] .s-disc{animation-duration:3s} @keyframes sun-sleep2{0%,100%{transform:scale(.9);opacity:.92}50%{transform:scale(.95);opacity:1}} .core-sun[data-st="idle"] .s-rays{opacity:.34;transform:scale(.62)} .core-sun[data-st="await"] .s-rays{opacity:.42;transform:scale(.7)} .core-sun[data-st="idle"] .s-glow{opacity:.78;transform:scale(.9)} .core-sun[data-st="awake"] .s-rays{opacity:.6;transform:scale(.86)} .core-sun[data-st="listen"] .s-rays{animation:none;opacity:.85} .core-sun[data-st="think"] .s-rays,.core-sun[data-st="work"] .s-rays{opacity:.36;transform:scale(.8)} .core-sun[data-st="speak"] .s-rays{opacity:.9;transform:none} .core-sun[data-st="think"] .s-disc,.core-sun[data-st="work"] .s-disc{transform:scale(.94)} /* 枠は線だけで、中を透かす */ .hall .card,.hall .now{background:rgb(var(--glass-rgb) / .32);border-color:rgb(var(--hud-rgb) / .24)} .hall .now-next,.hall .wx-home,.hall .fl-list,.hall .nb,.hall .nd{text-shadow:0 1px 8px rgb(2 8 16 / calc(.8 * var(--glow)))} .hall .nb{background:transparent;border:0;border-top:1px solid rgb(var(--hud-rgb) / .16);border-radius:0;padding:6px 2px 4px} .hall .fl.next{background:rgb(var(--hud-rgb) / .10)} /* 塗りつぶしのボタンを減らす（強く光らせるのは［話しかける］だけ） */ .hall .btn.pri:not(.hall-mic),.app.is-hall .side-shoot{background:rgb(var(--hud-rgb) / .05);color:var(--cy-hi);border:1px solid rgb(var(--hud3-rgb) / .55);box-shadow:inset 0 0 14px rgb(0 198 210 / calc(.12 * var(--glow)))} .hall .btn.pri:not(.hall-mic):hover,.app.is-hall .side-shoot:hover{background:rgb(var(--hud-rgb) / .14)} .hall .btn.sec{background:transparent;border-color:rgb(var(--hud3-rgb) / .4);color:var(--teal-ink)} .hall-mic{background:var(--teal-text);box-shadow:0 0 0 1px rgb(140 240 245 / calc(.55 * var(--glow))),0 0 36px rgb(0 198 210 / calc(.6 * var(--glow))),0 0 80px rgb(0 198 210 / calc(.22 * var(--glow)))} .hall-in{background:rgb(var(--glass-rgb) / .45)} /* 大きな光る数字 */ .hall .big-n,.hall .nb.cash b.num,.hall #nb-sales b.num,.hall .now-next b{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:.01em;line-height:1.1} .hall .nb-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 10px} .hall .nb.cash,.hall #nb-sales{grid-column:1/-1} .hall .nb.cash b.num{font-size:38px;color:var(--gold-hi);text-shadow:0 0 22px rgb(255 190 80 / calc(.5 * var(--glow)))} .hall #nb-sales b.num{font-size:30px;color:var(--num-cool);text-shadow:0 0 20px rgb(0 198 210 / calc(.55 * var(--glow)))} .hall #nb-spend b.num,.hall #nb-profit b.num,.hall #nb-tax b.num{font-size:17px} .hall #nb-spend .nb-k,.hall #nb-profit .nb-k,.hall #nb-tax .nb-k{font-size:13px} .hall .nb-k{font-size:14px} .hall .now-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 10px;align-items:baseline} .hall .now-next .nn-k{grid-column:1/-1;font-size:14px;color:var(--sub)} .hall .now-next b{font-size:44px;color:var(--gold-hi);text-shadow:0 0 24px rgb(255 190 80 / calc(.5 * var(--glow)));grid-row:2} .hall .now-next .nn-t{grid-row:2;font-size:15px;font-weight:700} .hall .now-next .nn-u{grid-column:1/-1;font-size:15px;color:var(--teal-text)} .hall .now-next .map-a{grid-column:1/-1} .hall .now .hello-l{font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hall .now h1.hello{font-size:19px} .hall .now-act{min-height:46px;font-size:15px} .hall-rc .rc-big{display:grid;grid-template-columns:1fr 1fr;gap:10px} .hall-rc .rc-n,.hall-rc .road-line{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0;padding:0;border:0;font-size:14px} .hall-rc .big-n{font-size:40px;color:var(--num-cool);text-shadow:0 0 20px rgb(0 198 210 / calc(.55 * var(--glow)))} .hall-rc #hall-rc-n .big-n{color:var(--gold-hi);text-shadow:0 0 20px rgb(255 190 80 / calc(.5 * var(--glow)))} .hall-rc .big-n small{font-size:15px;margin-left:3px;color:var(--sub);text-shadow:none} .hall-rc .rc-n .btn{margin:6px 0 0} .hall-rc .road-line .nb-k{display:inline-flex;align-items:center;gap:4px} .hall-rc .road-line .nb-k .ms{font-size:16px;color:var(--teal-text)} .hall-rc .rl-sub{font-size:13px;line-height:1.5} .hall-rc .road-line .link-b{font-size:14px;padding:0;min-height:32px} .hall-rc .hall-shoot{margin-top:10px;min-height:44px} /* 1画面に収める：小さな枠は先頭の1件だけ（［全部開く］で全部） */ .hall-stage:not(.open) #home-flow .fl-list > :nth-child(n+5){display:none} .hall-stage:not(.open) #home-nudges > .nd ~ .nd,.hall-stage:not(.open) #home-goals .glr ~ .glr,.hall-stage:not(.open) #home-notice .nt-l li ~ li{display:none} .hall-stage:not(.open) #home-nudges .dc-why{display:none} .hall .decide,.hall .notice,.hall-gl{padding:12px 14px} .hall .decide .nd p{font-size:14px;line-height:1.55;margin:0} .hall .decide .pr-b{margin-top:6px} .hall .notice .nt-l{margin:0;padding:0} .hall .notice .nt-l li{font-size:14px} .hall-stage{height:auto} .hall-l,.hall-r{gap:10px} .pg-home{padding:14px 20px 16px} .hall .card,.hall .now{padding:12px 14px} .hall .ch{margin-bottom:6px} .hall .flow .fl{min-height:40px;padding:4px 6px} .hall-more-b{display:flex;margin:6px auto 0;font-size:14px} /* 右の細い列：意味のあるグラフ */ .hall-chart{display:flex;flex-direction:column} .hall-chart h3{margin:0;font-size:14px;font-weight:700;color:var(--teal-ink);letter-spacing:.06em} .hc-s{margin:1px 0 6px;font-size:12px;line-height:1.4;color:var(--sub)} .hc-bars{display:flex;align-items:flex-end;gap:3px;height:64px;padding-bottom:16px;border-bottom:1px solid rgb(var(--hud-rgb) / .3);position:relative} .hb{position:relative;flex:1;height:100%;display:flex;align-items:flex-end} .hb i{display:block;width:100%;background:linear-gradient(180deg,var(--teal-text),rgb(var(--hud-rgb) / .3));border-radius:1px 1px 0 0;box-shadow:0 0 8px rgb(0 198 210 / calc(.35 * var(--glow)))} .hb.cur i{background:linear-gradient(180deg,var(--gold-2),rgb(var(--gold-rgb) / .35));box-shadow:0 0 8px rgb(255 190 80 / calc(.4 * var(--glow)))} .hb em{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-size:11px;font-style:normal;color:var(--sub)} .hc-pie i{display:block;width:78px;height:78px;margin:2px auto 0;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 54%,#000 55%);mask:radial-gradient(circle,transparent 54%,#000 55%);box-shadow:0 0 14px rgb(0 198 210 / calc(.35 * var(--glow)))} .hc-l{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px} .hc-l li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:5px;align-items:center;font-size:12px;color:var(--sub)} .hc-l li i{width:8px;height:8px;border-radius:2px} .hc-l li b{font-size:12px;color:var(--ink);font-weight:600} .hall-side{gap:12px} .hw-bars{height:48px} .hall-sig{gap:8px} /* 字幕：いちばん新しい行は切らずに全部、古い行だけ短く */ .hs.age0 .hs-t{display:block;-webkit-line-clamp:unset;overflow:visible} .hs.age1 .hs-t,.hs.age2 .hs-t{-webkit-line-clamp:1} .hall-subs{min-height:104px;margin-top:20px} /* スマホ：上の真ん中に核 */ @media (max-width:767.98px){ .sun-btn{width:150px;height:150px;margin:56px auto 30px} .core-sun{--box:390px;--disc:132px} .sun-btn::after{left:-60%;right:-60%} .hall-stage{overflow:hidden} .hall .nb-row{grid-template-columns:repeat(3,minmax(0,1fr))} .hall .nb.cash b.num{font-size:32px} .hall #nb-sales b.num{font-size:26px} .hall-rc .big-n{font-size:36px} .hall .now-next b{font-size:38px} .hall-side{display:grid;grid-template-columns:1fr 1fr;gap:12px} .hall-side .hall-wave,.hall-side .hall-sig{grid-column:1/-1} } @media (prefers-reduced-motion:reduce){ .core-sun[data-st="idle"] .s-disc,.core-sun[data-st="await"] .s-disc{transform:scale(.92)} } /* 4回目の調整：光の玉は小さめの芯＋大きな光、光の筋が見えるように */ .core-sun{--disc:168px} .core-sun .s-glow{inset:calc((var(--box) - var(--disc) * 4.2) / 2);background:radial-gradient(circle,rgb(255 246 210 / calc(.9 * var(--glow))) 0%,rgb(255 220 120 / calc(.62 * var(--glow))) 10%,rgb(255 180 60 / calc(.30 * var(--glow))) 22%,rgb(255 150 40 / calc(.12 * var(--glow))) 36%,rgb(var(--hud-rgb) / .05) 52%,transparent 66%)} .core-sun .s-rays .rl{stroke:rgb(var(--gold-rgb) / .75);stroke-width:1.4} .core-sun .s-rays .rm{stroke:rgb(var(--gold-rgb) / .55)} .core-sun .s-rays .rs{stroke:rgb(var(--hud3-rgb) / .45)} .core-sun[data-st="idle"] .s-rays{opacity:.5;transform:scale(.8)} .core-sun[data-st="await"] .s-rays{opacity:.58;transform:scale(.84)} .sun-btn{width:220px;height:220px;margin-top:84px} .sun-lab{margin-top:22px} /* 今日：時刻を大きく、名前は下の行に */ .hall .now-next{display:flex;flex-direction:column;align-items:flex-start;gap:0} .hall .now-next .nn-t{font-size:15px;line-height:1.45} .hall .now-next .nn-u{font-size:14px} .hall .now-next b{font-size:42px} .hall .now-row{gap:8px} /* お金：手元のお金と売上を大きく、ほかの3つは2列 */ .hall .nb-row{grid-template-columns:repeat(2,minmax(0,1fr))} .hall #nb-tax{grid-column:1/-1} .hall #nb-tax .nb-k{display:inline-flex} .hall-rc b.big-n{font-size:40px;color:var(--num-cool);text-shadow:0 0 20px rgb(0 198 210 / calc(.55 * var(--glow)))} .hall-rc #hall-rc-n b.big-n{color:var(--gold-hi);text-shadow:0 0 20px rgb(255 190 80 / calc(.5 * var(--glow)))} .hall-rc .rl-sub{font-size:12.5px} .hall-rc .road-line .link-b{min-height:28px} .hall .now .hello-l{-webkit-line-clamp:2} .hall .wx-home .wx-x{font-size:14px;line-height:1.5} .hall .wx-home .wx-src{display:none} .hall .now .m-seen{font-size:13px} /* 1画面に収める（Mac）：今日・今日の流れ・決めてほしい事・気づいた事・目標は短く（［全部開く］で全部） */ @media (min-width:1024px){ .hall-stage{grid-template-columns:minmax(0,280px) minmax(360px,1fr) minmax(0,280px) 150px} .hall .now{gap:4px} .hall .now-top{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px} .hall .now h1.hello{font-size:18px;width:100%} .hall .now .pg-date{font-size:13px} .hall .now .hello-l{-webkit-line-clamp:1;font-size:14px} .hall .now-act{min-height:44px;padding-top:6px;padding-bottom:6px} .hall .now-next b{font-size:38px} .hall .now-next .map-a{font-size:13px} .hall .wx-home .wx-x{font-size:13px} .hall-stage:not(.open) #home-flow .fl-list > :nth-child(n+4){display:none} .hall .flow .fl{min-height:38px} .hall .fl-ft{margin-top:2px} .hall .fl-ft .link-b{min-height:32px} .hall-stage:not(.open) #home-nudges .nd .pr-b,.hall-stage:not(.open) #home-nudges .nd .nd-t{display:none} .hall-stage:not(.open) #home-nudges .nd{padding:2px 0 0;border:0} .hall-stage:not(.open) #home-nudges .nd p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .hall .nums .ch{flex-wrap:nowrap} .hall .nums-r{flex-wrap:nowrap;gap:8px} .hall .nums-r .ch-r{display:none} .hall .nb.cash b.num{font-size:34px} .hall #nb-sales b.num{font-size:26px} .hall-rc .big-n,.hall-rc b.big-n{font-size:34px} .hall-rc .road-line .link-b{display:none} .hall-rc .hall-shoot{margin-top:8px} .hall .notice .nt-l li{line-height:1.5} .hall .hc-l li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hall-chart .hc-s{font-size:12px} } .hall-rc .rc-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px} .hall-rc .rc-b .btn{flex:1 1 auto;min-height:44px;margin:0} .hall-more-b{margin:4px auto 0} @media (min-width:1024px){ .hall .nb-row{grid-template-columns:repeat(3,minmax(0,1fr))} .hall #nb-tax{grid-column:auto} .hall .nb.cash,.hall #nb-sales{grid-column:1/-1} .hall #nb-spend .nb-k,.hall #nb-profit .nb-k,.hall #nb-tax .nb-k{font-size:12.5px;line-height:1.35} .hall #nb-spend b.num,.hall #nb-profit b.num,.hall #nb-tax b.num{font-size:15px} .hall-stage:not(.open) #home-notice .nt-l li span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .hall .notice .ch{margin-bottom:2px} } @media (min-width:1024px){ .pg-home{padding-top:10px;padding-bottom:10px} .hall-l,.hall-r{gap:8px} .hall .card,.hall .now{padding:10px 14px} .hall-rc .ch,.hall .nums .ch{margin-bottom:2px} .hall .gl-rows h2{margin-bottom:2px} .hall .glr{min-height:36px} } @media (min-width:1024px){ .hall .nb-row{grid-template-columns:minmax(0,1fr)} .hall #nb-spend,.hall #nb-profit,.hall #nb-tax{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 2px} .hall #nb-spend .nb-k,.hall #nb-profit .nb-k,.hall #nb-tax .nb-k{font-size:13.5px;white-space:nowrap} .hall #nb-spend b.num,.hall #nb-profit b.num,.hall #nb-tax b.num{font-size:16px} .hall-rc .rc-b{flex-wrap:nowrap} .hall-rc .rc-b .btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:13.5px;letter-spacing:.02em} } @media (min-width:1024px){ .hall #nb-spend,.hall #nb-profit,.hall #nb-tax{padding:1px 2px;min-height:28px} .hall #nb-spend .qm,.hall #nb-profit .qm,.hall #nb-tax .qm{width:20px;height:20px;font-size:12px} .hall .nb.cash,.hall #nb-sales{padding:4px 2px 2px} .hall .nb.cash b.num{font-size:32px} .hall #nb-sales b.num{font-size:24px} .hall .nb-row{gap:0} } @media (max-width:767.98px){ .core-sun{--box:400px;--disc:118px} .sun-btn{width:150px;height:150px;margin:50px auto 26px} .hall-stage{overflow:visible} .pg-home{overflow:hidden} } @media (max-width:1023.98px){ .hall-more-b{display:none} } @media (max-width:767.98px){ .pg-home{padding:12px 14px calc(150px + env(safe-area-inset-bottom))} } /* 光の筋は地平線の上だけ（太陽の道：地平線から昇る太陽）。下の字幕と言葉に線を重ねない */ .core-sun .s-rays{-webkit-mask:linear-gradient(180deg,#000 0%,#000 53%,transparent 62%);mask:linear-gradient(180deg,#000 0%,#000 53%,transparent 62%)} .core-sun .s-glow{-webkit-mask:linear-gradient(180deg,#000 0%,#000 58%,transparent 72%);mask:linear-gradient(180deg,#000 0%,#000 58%,transparent 72%)} .core-sun[data-st] .s-rays{animation:none} @media (min-width:1024px){ .hall #nb-spend,.hall #nb-profit,.hall #nb-tax{flex-direction:row} .hall #nb-spend .nb-k,.hall #nb-profit .nb-k,.hall #nb-tax .nb-k{margin:0} } /* ===== ホーム＝秘書の間 6回目（完成見本 design/mock_mac_5.png どおり） ===== * 3列（左右は各約20%・別々に縦にスクロール／真ん中は動かない）。ホームでは横のメニューを出さない。 * 枠：角丸・暗い半透明の地・水色の細い線と柔らかい外側の光。大事な数字は金色か白の大きな等幅の数字。 */ .app.is-hall,.app.is-hall.side-min{grid-template-columns:0 minmax(0,1fr) 0} .app.is-hall .side{display:none} .app.is-hall .main{overflow:hidden} .app.is-hall .main .pg-home{max-width:none;height:100%;box-sizing:border-box;padding:14px 18px;display:block} .sh{--shf:clamp(15px,.8vw,18px);font-size:var(--shf);display:grid;grid-template-columns:clamp(300px,20%,470px) minmax(0,1fr) clamp(300px,20%,470px);gap:clamp(14px,1.1vw,24px);height:100%;color:var(--ink)} .sh-col{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:clamp(12px,.75vw,16px);padding:6px 10px 80px 8px;scrollbar-width:thin;scrollbar-color:rgb(var(--hud2-rgb) / .55) transparent;-webkit-mask:linear-gradient(180deg,#000 0,#000 calc(100% - 90px),transparent);mask:linear-gradient(180deg,#000 0,#000 calc(100% - 90px),transparent)} .sh-col::-webkit-scrollbar{width:6px} .sh-col::-webkit-scrollbar-thumb{background:rgb(var(--hud2-rgb) / .5);border-radius:3px} .sh-col::-webkit-scrollbar-track{background:transparent} /* 枠 */ .sc{position:relative;flex:none;border-radius:var(--frame-r);background:var(--frame-bg);border:1px solid var(--frame-line);box-shadow:var(--frame-shadow);padding:.8em 1em 1em} .sc.here{border-color:var(--frame-here-line);box-shadow:var(--frame-here-shadow)} .sh-h{display:flex;align-items:center;gap:.55em;padding-bottom:.55em;margin-bottom:.7em;border-bottom:1px solid rgb(var(--hud2-rgb) / .28)} .sh-ic{display:inline-flex;color:var(--cy)} .sh-ic .ms{font-size:1.75em} .sh-ic-sun{width:1.9em;height:1.9em;border-radius:50%;overflow:hidden} .sh-ic-sun img{width:100%;height:100%;object-fit:cover;transform:scale(1.5)} .sh-h h2{margin:0;font-size:1.3em;font-weight:700;letter-spacing:.06em;color:var(--hl);display:flex;align-items:center;gap:.5em} .sh-open{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 .2em 0 .6em;font-size:.95em;color:var(--cy-ink);white-space:nowrap} .sh-open .ms{font-size:1.3em} .sh-open:hover{color:var(--hl)} .sh-here{display:inline-flex;align-items:center;margin-left:auto;padding:.15em .9em;border-radius:999px 999px 999px 999px;background:linear-gradient(90deg,var(--teal-text),var(--acc-2));color:var(--on-acc);font-size:.85em;font-weight:700;box-shadow:0 0 14px rgb(92 225 232 / calc(.7 * var(--glow)))} .sh-here + .sh-open{margin-left:.4em} .sh-fake{font-size:.65em;font-weight:700;padding:.1em .6em;border-radius:999px;background:rgb(var(--warn-rgb) / .16);color:var(--warn);letter-spacing:0} .sh-k{display:block;font-size:.92em;color:var(--sub)} .sh-gold{color:var(--gold);text-shadow:0 0 18px rgb(255 200 60 / calc(.45 * var(--glow)))} .sh-big{display:block;font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums;font-weight:700;font-size:2.5em;line-height:1.1;letter-spacing:.01em} .sh-big small{font-size:.5em;margin-left:.1em;font-weight:700} .sh .num{font-family:Inter,'Noto Sans JP',sans-serif;font-variant-numeric:tabular-nums} .sh-sub{display:flex;align-items:baseline;gap:.5em;margin:.7em 0 .35em;font-size:.95em;font-weight:700;color:var(--cy-ink)} .sh-sub .num{color:var(--sub);font-weight:500} .sh-sub b.sh-gold{font-size:1.1em} .sh-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2em .6em;margin:.2em 0;font-size:1em} .sh-line b{font-size:1.25em} .sh-bar{position:relative;display:block;height:.6em;border-radius:.3em;background:rgb(var(--fg-rgb) / .12);overflow:hidden} .sh-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:.3em;background:linear-gradient(90deg,#1BB8D6,var(--teal-text) 70%,var(--gold))} .sh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45em} .sh-list li{display:flex;align-items:baseline;gap:.6em;font-size:1em;line-height:1.5} .sh-lt{min-width:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sh-tag{flex:none;font-size:.78em;padding:.1em .5em;border-radius:6px;background:rgb(var(--hud2-rgb) / .14);color:var(--cy-ink)} .sh .empty{color:var(--sub);font-size:.95em} /* 予定 */ .pl-next{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2em 1em;align-items:end} .pl-time{font-size:3.1em;font-weight:700;line-height:1} .pl-r{display:flex;flex-direction:column;gap:.1em;padding-left:1em;border-left:1px solid rgb(var(--hud2-rgb) / .3);min-width:0} .pl-ti{font-size:1.05em;line-height:1.4} .pl-wh{font-size:.92em;color:var(--sub)} .pl-u{font-size:1.15em;font-weight:700;color:var(--teal-text)} .sh-plan .map-a{font-size:.88em;color:var(--cy-ink)} .sh-plan .fl-list{display:flex;flex-direction:column} .sh-plan .fl{grid-template-columns:.3em 3.6em minmax(0,1fr) auto;gap:.6em;min-height:2.6em;padding:.25em 0;border-top:1px solid rgb(var(--hud2-rgb) / .14);color:var(--ink);background:transparent} .sh-plan .fl.done,.sh-plan .fl.next{display:none} .sh-plan .fl-m{width:.3em;height:1.2em;border-radius:2px;background:var(--cy);font-size:0} .sh-plan .fl-m .ms{display:none} .sh-plan .fl.flag .fl-m{background:var(--gold)} .sh-plan .fl.priv .fl-m{background:var(--priv)} .sh-plan .fl-t{font-size:1em;font-weight:500;color:var(--ink)} .sh-plan .fl.flag .fl-t{font-size:.85em;color:var(--warn)} .sh-plan .fl-x b{font-size:1em;font-weight:500} .sh-plan .fl-x small{font-size:.85em;color:var(--sub)} .sh-plan .fl.priv .fl-x b{color:var(--priv-text)} .sh-plan .fl-done{min-height:44px} /* タスク */ .tk-row{display:flex;align-items:center;gap:1.4em} .tk-donut{position:relative;flex:none;width:7.4em;height:7.4em;display:flex;flex-direction:column;align-items:center;justify-content:center} .tk-donut i{position:absolute;inset:0;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);mask:radial-gradient(circle,transparent 63%,#000 64%);box-shadow:0 0 16px rgb(51 214 224 / calc(.35 * var(--glow)))} .tk-donut b{font-size:2.3em;font-weight:700;color:var(--gold);line-height:1;text-shadow:0 0 14px rgb(255 200 60 / calc(.4 * var(--glow)))} .tk-donut small{font-size:.9em;color:var(--ink)} .tk-l{list-style:none;margin:0;padding:0 0 0 1.2em;border-left:1px solid rgb(var(--hud2-rgb) / .25);flex:1;display:flex;flex-direction:column;gap:.35em} .tk-l li{display:grid;grid-template-columns:.8em minmax(0,1fr) auto;align-items:center;gap:.6em;font-size:1em} .tk-l li i{width:.75em;height:.75em;border-radius:50%} .tk-l li b{font-size:1.2em} /* 営業・目標 */ .sl-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2em;align-items:end} .sl-g{display:flex;flex-direction:column;gap:.35em;padding-left:1em;border-left:1px solid rgb(var(--hud2-rgb) / .25)} .sl-p{align-self:flex-end;font-size:.95em;color:var(--cy-ink)} .sh-sales .sh-line{margin-top:.6em} .sh-goal .gl-rows{display:flex;flex-direction:column;gap:.15em} .sh-goal .glr{display:grid;grid-template-columns:minmax(0,1fr) 6em 3em;align-items:center;gap:.6em;min-height:44px;padding:0;background:transparent;border:0;color:var(--ink);text-align:left} .sh-goal .glr-t{font-size:.95em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-goal .glr b{font-size:1em;color:var(--cy-ink);text-align:right} .sh-goal .glr.first .glr-t{font-weight:700} .pr-l{list-style:none;margin:0;padding:0;counter-reset:pr;display:flex;flex-direction:column;gap:.2em} .pr-l li{counter-increment:pr;display:flex;align-items:center;gap:.6em} .pr-l li::before{content:counter(pr);flex:none;width:1.45em;height:1.45em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 .85em/1 Inter,sans-serif;background:var(--cy);color:var(--on-acc)} .pr-l li:first-child::before{background:var(--gold)} .pr-it{flex:1;min-width:0;display:flex;align-items:center;gap:.4em;min-height:44px;padding:0;background:transparent;border:0;color:var(--ink);text-align:left;font-size:1em;line-height:1.4} .pr-it .ms{flex:none;color:var(--cy);font-size:1.2em} .pr-it span{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pr-it:hover span{text-decoration:underline;text-decoration-color:rgb(var(--fg-rgb) / .4)} .sd-mini li{justify-content:space-between} .sh-st{flex:none;font-size:.8em;font-weight:700;padding:.1em .6em;border-radius:999px;background:rgb(var(--ok-rgb) / .14);color:var(--ok)} .sh-st.st-none{background:rgb(var(--warn-rgb) / .14);color:var(--warn)} .sh-st.st-office{background:rgb(var(--hud2-rgb) / .14);color:var(--cy-ink)} /* お金 */ .mo-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1em} .mo-s{min-width:0} .sh-money .sh-big{font-size:2.35em} .mo-d{display:inline-flex;align-items:baseline;gap:.25em;color:var(--teal-text);font-size:1em} .mo-d .ms{font-size:1.1em;align-self:center} .mo-d b{font-size:1.15em} .mo-d small{font-size:.8em;color:var(--sub)} .mo-d.dn{color:var(--danger)} .mo-bars{flex:none;display:flex;align-items:flex-end;gap:.35em;height:5.2em;padding-bottom:1.3em;position:relative} .hb{position:relative;width:1.3em;height:100%;display:flex;align-items:flex-end} .hb i{display:block;width:100%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--teal-text),#1471C9);box-shadow:0 0 10px rgb(51 214 224 / calc(.35 * var(--glow)))} .hb.cur i{background:linear-gradient(180deg,#FFE680,#E8A21E);box-shadow:0 0 12px rgb(255 200 60 / calc(.5 * var(--glow)))} .hb em{position:absolute;left:50%;bottom:-1.3em;transform:translateX(-50%);font-size:.72em;font-style:normal;color:var(--sub);white-space:nowrap} .mo-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:.8em;border-top:1px solid rgb(var(--hud2-rgb) / .22)} .mo-grid > div{padding:.55em .2em .3em} .mo-grid > div:nth-child(2n){padding-left:1em;border-left:1px solid rgb(var(--hud2-rgb) / .22)} .mo-grid > div:nth-child(n+3){border-top:1px solid rgb(var(--hud2-rgb) / .14)} .mo-grid b.num{font-size:1.5em;font-weight:600;color:var(--hl)} .mo-grid b.num small{font-size:.75em} /* 領収書 */ .rc-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1em} .rc-nums{display:flex;flex-direction:column;gap:.4em;padding-right:1em;border-right:1px solid rgb(var(--hud2-rgb) / .25)} .rc-n{display:block;padding:0;background:transparent;border:0;text-align:left;color:inherit;min-height:44px} .rc-n .sh-big{font-size:2.6em} .sh-rc .road-line b{font-size:1.9em;font-weight:700;display:block;line-height:1.1} .sh-rc .road-line b small{font-size:.5em} .rc-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em;align-self:center} .rc-l li{display:grid;grid-template-columns:3em minmax(0,1fr) auto;gap:.5em;align-items:baseline;font-size:.95em} .rc-d{color:var(--sub)} .rc-x{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rc-l b{font-weight:600} .rc-ft{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.7em;padding-top:.5em;border-top:1px solid rgb(var(--hud2-rgb) / .16)} .sh .link-s{color:var(--cy-ink);font-size:.9em;display:inline-flex;align-items:center;gap:.2em;min-height:44px} .sh .btn.sec{background:transparent;border:1px solid rgb(var(--hud3-rgb) / .5);color:var(--cy-ink)} .sh-rc .road{margin-top:.6em} /* 秘書から */ .fr-l{display:flex;flex-direction:column;gap:.15em} .sh-from .nd{display:block;padding:.15em 0 .15em 1.2em;border:0;background:transparent;position:relative;cursor:pointer} .sh-from .nd::before{content:"";position:absolute;left:0;top:.55em;width:.65em;height:.65em;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgb(255 200 60 / calc(.6 * var(--glow)))} .sh-from .nd .nd-t,.sh-from .nd .dc-why{display:none} .sh-from .nd p{margin:0;font-size:1em;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .sh-from .nd .pr-b{display:none;margin-top:.4em;gap:.4em;flex-wrap:wrap} .sh-from .nd.open .pr-b{display:flex} .sh-from .nd.open p{-webkit-line-clamp:unset} .sh-from .nd .btn{min-height:44px} .sh-from .nd .btn.pri{background:rgb(var(--hud2-rgb) / .12);border:1px solid rgb(var(--hud3-rgb) / .6);color:var(--cy-ink);box-shadow:none} .nt-mini li{position:relative;padding-left:1.2em} .nt-dot{position:absolute;left:0;top:.55em;width:.65em;height:.65em;border-radius:50%;background:var(--cy);box-shadow:0 0 8px rgb(51 214 224 / calc(.6 * var(--glow)))} .rec-l li{align-items:baseline} /* 設定 */ .st-mini{display:flex;flex-direction:column;gap:.3em} .st-mini > div{display:flex;align-items:center;justify-content:space-between;gap:.6em;min-height:44px;font-size:1em} .st-mini .st-rate{flex-wrap:wrap} .st-mini .seg2{background:rgb(var(--fg-rgb) / .08)} .st-mini .seg2 button{color:var(--cy-ink);min-height:40px} .st-mini .seg2 button[aria-pressed="true"]{background:rgb(var(--hud2-rgb) / .25);color:var(--hl)} /* 真ん中 */ .sh-c{display:flex;flex-direction:column;align-items:center;min-height:0;min-width:0;text-align:center} .sh-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:.2em;width:100%} .sh-top h1.hello{margin:0;font-size:2.15em;font-weight:700;letter-spacing:.06em;color:var(--hl);text-shadow:0 0 22px rgb(60 180 255 / calc(.35 * var(--glow)))} .sh-date{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.3em 1em;margin:0;font-size:1.15em;color:var(--hl)} .sh-clock{font-size:.72em;padding:.05em .6em;border-radius:999px;border:1px solid rgb(var(--hud3-rgb) / .4);color:var(--cy-ink)} .sh-date .wx-home{display:inline-flex;align-items:center;gap:.35em;background:transparent;padding:0;border:0;box-shadow:none} .sh-wxi{color:var(--gold);font-size:1.35em} .sh-wx b{font-weight:600} .sh-date .wx-src{font-size:.7em;color:var(--sub)} .sh-top .hello-l{margin:.1em 0 0;max-width:46em;font-size:.95em;color:var(--sub);line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .sh-top .m-seen{margin:0;font-size:.85em;color:var(--sub);display:flex;align-items:center;gap:.3em} .sh-top .mcard{position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:5;width:min(34em,100%);text-align:left;background:rgb(var(--glass-rgb) / .96);border:1px solid rgb(var(--hud3-rgb) / .6);border-radius:14px;box-shadow:0 0 30px rgb(20 190 230 / calc(.35 * var(--glow))),0 20px 60px rgb(0 0 0 / calc(.6 * var(--glow)));padding:1em 1.2em} .sh-core{position:relative;flex:1 1 auto;min-height:160px;width:100%; background:radial-gradient(circle closest-side,transparent 70%,rgb(var(--hud2-rgb) / .16) 70.3%,transparent 70.8%,transparent 84%,rgb(var(--hud2-rgb) / .12) 84.3%,transparent 84.8%,transparent 97%,rgb(var(--hud2-rgb) / .08) 97.3%,transparent 97.8%)} .sh-sunbtn{position:absolute;inset:0;width:100%;height:100%;background:transparent;border-radius:50%} .sh-sunbtn:focus-visible{outline:none} .sh-sunbtn:focus-visible .core-hall{outline:2px solid rgb(var(--hud3-rgb) / .7);outline-offset:-8px;border-radius:50%} .core-hall{position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);display:block} .sh-sunimg{position:absolute;left:9%;top:9%;width:82%;height:82%;mix-blend-mode:screen;pointer-events:none;transition:filter .6s ease,opacity .6s ease} .sh-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .core-hall[data-st="idle"] .sh-sunimg{filter:brightness(.72) saturate(.92);animation:sh-breathe 6s ease-in-out infinite} .core-hall[data-st="await"] .sh-sunimg{filter:brightness(.85);animation:sh-breathe 3s ease-in-out infinite} .core-hall[data-st="awake"] .sh-sunimg{filter:brightness(.92);animation:sh-breathe 4s ease-in-out infinite} .core-hall[data-st="listen"] .sh-sunimg{filter:brightness(1.05)} .core-hall[data-st="think"] .sh-sunimg,.core-hall[data-st="work"] .sh-sunimg{filter:brightness(.9)} .core-hall[data-st="speak"] .sh-sunimg{filter:brightness(1.12);animation:sh-pulse .7s ease-in-out infinite} @keyframes sh-breathe{0%,100%{transform:scale(.96)}50%{transform:scale(1)}} @keyframes sh-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}} .sh-name{margin:.1em 0 0;font-family:Inter,'Noto Sans JP',sans-serif;font-size:2.7em;font-weight:700;letter-spacing:.55em;padding-left:.55em;color:var(--hl);text-shadow:0 0 18px rgb(120 220 255 / calc(.55 * var(--glow)))} .sh-state{display:flex;flex-direction:column;align-items:center;gap:.1em;margin:.15em 0 .6em} .sh-state b{font-size:1.2em;font-weight:700;letter-spacing:.15em;color:var(--gold-t)} .sh-state .sun-hint{font-size:.95em;color:var(--sub)} .sh-mic{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:min(24em,70%);min-height:3.4em;border-radius:999px;background:linear-gradient(180deg,var(--mic-1),var(--mic-2));color:var(--on-acc);font-size:1.3em;font-weight:700;letter-spacing:.12em;box-shadow:0 0 0 1px rgb(170 245 250 / calc(.7 * var(--glow))),0 0 34px rgb(60 220 240 / calc(.6 * var(--glow))),0 0 80px rgb(60 220 240 / calc(.22 * var(--glow)))} .sh-mic .ms{font-size:1.4em} .sh-mic:hover{filter:brightness(1.06)} .sh-talk{display:grid;grid-template-columns:1fr 1fr;gap:1em;width:100%;margin-top:1em;text-align:left} .sh-tb{min-height:8.4em;display:flex;flex-direction:column} .sh-tb .sh-h{margin-bottom:.5em} .sh-tb .sh-h h2{font-size:1.15em} .tb-list{display:flex;flex-direction:column;gap:.5em} .tb-r{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:.5em;align-items:start} .tb-t{font-size:.85em;color:var(--sub);padding-top:.6em;display:inline-flex;align-items:center} .tb-t .ms{color:var(--cy);font-size:1.3em} .tb-b{margin:0;padding:.55em .9em;border-radius:10px;background:rgb(var(--glass-rgb) / .6);border:1px solid rgb(var(--hud3-rgb) / .35);font-size:1.12em;line-height:1.6;color:var(--hl);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .tb-r.live .tb-b{border-color:rgb(var(--hud3-rgb) / .7);box-shadow:0 0 14px rgb(60 220 240 / calc(.25 * var(--glow)));-webkit-line-clamp:4} .tb-b .hs-r{color:var(--hl)} .tb-b .hs-u{color:var(--mute)} .tb-empty{margin:0;color:var(--sub);font-size:.95em} .sh .hs-n{display:inline-block;min-width:1.4em;height:1.4em;margin-right:.4em;border-radius:.7em;border:1.5px solid var(--gold);font:600 .8em/1.25em Inter,sans-serif;font-style:normal;text-align:center;color:var(--gold-t)} /* 狭い画面（1024px 未満）：1列。上に あいさつ・核・名前・状態・発言と返答、その下に枠 */ @media (max-width:1023.98px){ .app.is-hall .main{overflow:visible} .app.is-hall .main .pg-home{height:auto;padding:12px 14px calc(150px + env(safe-area-inset-bottom))} .sh{display:flex;flex-direction:column;gap:14px;height:auto;--shf:15px} .sh-col{display:contents} .sh-c{order:0} .sh-plan{order:1}.sh-task{order:2}.sh-sales{order:3}.sh-goal{order:4}.sh-money{order:5}.sh-rc{order:6}#home-invoice-card{order:7}#home-mail-card{order:8}.sh-from{order:9}.sh-rec{order:10}.sh-kb{order:11}.sh-sd{order:12}.sh-set{order:13} .sh-core{flex:none;height:300px} .sh-top h1.hello{font-size:1.45em;margin-top:.4em} .sh-date{font-size:1em} .sh-name{font-size:2em} .sh-mic{display:none} .sh-talk{grid-template-columns:1fr;gap:12px} .sh-tb{min-height:0} .pl-time{font-size:2.8em} } @media (max-width:767.98px){ .app.is-hall .main .pg-home{padding:10px 12px calc(150px + env(safe-area-inset-bottom))} .sh-top{padding-right:52px;padding-left:52px} } @media (prefers-reduced-motion:reduce){ .core-hall .sh-sunimg{animation:none!important;transform:none} } .page-hidden .core-hall .sh-sunimg{animation-play-state:paused} .app.is-hall > .main{grid-column:2;grid-row:1} /* 太陽の黒い地を「スクリーン」で消すため、太陽と背景のあいだに重なりの層（stacking context）を作らない */ .app.is-hall .main .pg-home,.app.is-hall .main .pg-home.enter{animation:none;opacity:1;transform:none} .sh-sunbtn{display:flex;align-items:center;justify-content:center} .core-hall{position:relative;left:auto;top:auto;transform:none;flex:none} /* 列が狭い時（ノートパソコンの 1440 など）：枠の中を縦に組み替える（言葉の途中で折らない・重ねない） */ .sh{grid-template-columns:clamp(330px,20%,470px) minmax(0,1fr) clamp(330px,20%,470px)} .sh-col{container-type:inline-size} .tb-b{display:block;-webkit-line-clamp:unset;overflow:visible} .sh-plan .fl-done .tb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .sh-plan .fl-done{width:44px;padding:0;justify-content:center} .tk-l li span,.sh-k,.mo-grid .sh-k,.rc-ft .link-s{white-space:nowrap} @container (max-width: 400px){ .pl-next{grid-template-columns:auto minmax(0,1fr);align-items:center} .pl-time{font-size:2.6em} .pl-r{padding-left:.8em} .pl-ti{font-size:1em} .tk-donut{width:6em;height:6em} .tk-donut b{font-size:1.9em} .tk-row{gap:1em} .tk-l{padding-left:.9em} .mo-top{flex-wrap:wrap;align-items:flex-end} .sh-money .sh-big{font-size:2em} .mo-bars{height:4em;margin-left:auto} .hb{width:1.05em} .mo-grid b.num{font-size:1.3em} .mo-grid .sh-k{font-size:.85em} .rc-row{grid-template-columns:1fr} .rc-nums{flex-direction:row;justify-content:space-between;align-items:flex-end;padding:0 0 .5em;border-right:0;border-bottom:1px solid rgb(var(--hud2-rgb) / .2)} .rc-n .sh-big{font-size:2.2em} .rc-l li{grid-template-columns:2.8em minmax(0,1fr) auto} .sl-row{grid-template-columns:auto minmax(0,1fr)} .sh-sales .sh-big{font-size:2.1em} .sh-goal .glr{grid-template-columns:minmax(0,1fr) 4.5em 2.8em} } .hb em small{font-size:1em} @container (max-width: 400px){ .hb em small{display:none} .mo-bars{gap:.45em} } @media (min-width:1024px) and (max-height:1000px){ .sh-top h1.hello{font-size:1.8em} .sh-date{font-size:1.05em} .sh-name{font-size:2.1em;margin-top:0} .sh-state{margin:.05em 0 .45em} .sh-mic{min-height:2.9em;font-size:1.15em} .sh-talk{margin-top:.7em} .sh-tb{min-height:6.6em} .tb-b{font-size:1.02em;padding:.45em .8em} } /* 6回目の仕上げ：完成見本の明るさに近づける（背景の青い光と格子・枠の光・大きな数字） */ .app.is-hall .main{background-color:var(--page-bg);background-image:var(--hall-glow),var(--page-img);background-size:auto,auto,var(--page-size);background-position:0 0,0 0,var(--page-pos)} .sh-h h2{font-size:1.4em} .sh-ic .ms{font-size:1.9em} .pl-time{font-size:3.4em} .sh-big{font-size:2.8em} .sh-money .sh-big{font-size:2.6em} .sh-sunimg{left:3%;top:3%;width:94%;height:94%} .sh-name{text-shadow:0 0 22px rgb(140 225 255 / calc(.75 * var(--glow)))} .sh-core{background:radial-gradient(circle closest-side,rgb(60 170 240 / calc(.18 * var(--glow))),transparent 62%),radial-gradient(circle closest-side,transparent 74%,rgb(var(--hud3-rgb) / .22) 74.3%,transparent 74.8%,transparent 86%,rgb(var(--hud3-rgb) / .16) 86.3%,transparent 86.8%,transparent 97%,rgb(var(--hud3-rgb) / .10) 97.3%,transparent 97.8%)} @container (max-width: 400px){ .pl-time{font-size:2.6em} .sh-big{font-size:2.2em} .sh-money .sh-big{font-size:2em} } /* ===== 秘書の間 7回目（大晴さんの指摘の直し） ===== */ /* A1：眠っている時も太陽は明るく、ゆっくり呼吸する光で表す（くすませない） */ .core-hall[data-st="idle"] .sh-sunimg{filter:none;animation:sh-sleep 6.5s ease-in-out infinite} .core-hall[data-st="await"] .sh-sunimg{filter:none;animation:sh-sleep 3.2s ease-in-out infinite} .core-hall[data-st="awake"] .sh-sunimg{filter:brightness(1.04);animation:sh-breathe 4s ease-in-out infinite} .core-hall[data-st="think"] .sh-sunimg,.core-hall[data-st="work"] .sh-sunimg{filter:none} @keyframes sh-sleep{0%,100%{transform:scale(.955);opacity:.88}50%{transform:scale(1);opacity:1}} /* B2：太陽の中心＝円の中心（画像は球の中心で切り直した。画像は核の箱の真ん中にぴったり置く） */ .sh-sunimg{left:3%;top:3%;width:94%;height:94%;transform-origin:50% 50%} /* B4：日付・時刻・天気を1行に */ .sh-date{flex-wrap:nowrap;white-space:nowrap;gap:.7em;align-items:center} .sh-dt{white-space:nowrap} .sh-sep{width:1px;height:1.1em;background:rgb(var(--hud3-rgb) / .35)} .sh-date .wx-home{gap:.3em;white-space:nowrap} .sh-wxd{font-style:normal;font-size:.72em;font-weight:700;padding:.08em .55em;border-radius:999px;background:rgb(var(--gold-rgb) / .16);color:var(--gold-t);border:1px solid rgb(var(--gold-rgb) / .4)} .sh-wxp{font-size:.85em;color:var(--sub);margin-left:.15em} .sh-wxu{display:inline-flex;align-items:center;gap:.1em;margin-left:.5em;font-size:.85em;color:var(--cy-ink)} .sh-wxu .ms{font-size:1.1em} .sh-date .wx-src{font-size:.62em;color:var(--mute);margin-left:.3em;align-self:flex-end;padding-bottom:.15em} /* A3：予定の枠の上を詰める・小さすぎる字を大きく（本文 15px 以上） */ .pl-next{align-items:start} .pl-l{display:flex;flex-direction:column;justify-content:flex-start} .sh-plan .fl-x small,.sh-plan .fl.flag .fl-t,.pl-wh,.sh-k,.rc-d,.tb-t,.sh .empty,.hc-s,.sh-sub .num,.sh-state .sun-hint{font-size:max(15px,.9em)} .sh-plan .fl-x b,.sh-plan .fl-t{font-size:max(16px,1em)} .sh-plan .fl{grid-template-columns:.3em auto minmax(0,1fr) auto} .sh-plan .fl.flag .fl-t{white-space:nowrap} /* B3：名前で呼べるようにする案内 */ .sh-wake{margin-top:.2em;font-size:max(15px,.9em)} .sh-state{margin-bottom:.4em} /* C3：ホームのまま「いまここ」 */ .sc .here-it{position:relative;border-radius:8px;box-shadow:0 0 0 2px rgb(140 240 245 / calc(.9 * var(--glow))),0 0 18px rgb(80 230 240 / calc(.55 * var(--glow)));background:rgb(var(--hud3-rgb) / .08)} .sh-here{animation:none} .sh-date .wx-home,.sh-date .wx-home *,.sh-date > *{white-space:nowrap!important;flex:none;word-break:keep-all;overflow-wrap:normal} .sh-date .wx-home{display:inline-flex;align-items:center;max-width:none;width:auto;min-width:0} .sh-date .wx-home > .sh-wx{display:inline-flex;align-items:baseline;gap:.25em;width:auto;max-width:none} .sh-date .wx-home > .sh-wx > *{display:inline;width:auto} .sh-date .wx-home > .wx-src{display:inline;width:auto} /* B5：出していない時の知らせ（中身の無い小さな黒い箱）は、完全に隠す */ .toast:not(.on){visibility:hidden} .sh-date .wx-home .sh-wx,.sh-date .wx-home .sh-wx b{font-size:1em!important;color:var(--hl)} .sh-date .wx-home .sh-wxp{font-size:.85em!important;color:var(--sub)} .sh-date .wx-home .sh-wxu{display:inline-flex!important;flex-direction:row;align-items:center;gap:.1em;font-size:.85em!important;color:var(--cy-ink)} .sh-date .wx-home .sh-wxu .ms{display:inline-block!important;font-size:1.1em} .sh-date .wx-home .wx-src{font-size:.62em!important} /* 予定の枠の一番下の行（期限の物）：はみ出さず、中身の高さに合わせる */ .sh-plan .fl,.sh-plan .fl > *{height:auto;max-height:none} .sh-plan .fl{align-items:center;padding:.35em 0} .sh-plan .fl-open{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:.15em 0;white-space:normal;text-align:left;line-height:1.35;min-height:44px;overflow:visible} .sh-plan .fl-x b{line-height:1.35} /* 見出しの札は折らない（狭い列では「架空」「いまここ」を小さく） */ .sh-h h2,.sh-here,.sh-fake,.sh-open{white-space:nowrap;flex:none} @container (max-width: 400px){ .sh-here{font-size:.72em;padding:.1em .6em} .sh-h h2{font-size:1.25em} .sh-fake{font-size:.6em} .sh-open{padding-left:.3em} } /* スマホ：日付と天気は2行に分けて真ん中にそろえる */ @media (max-width:1023.98px){ .sh-date{flex-wrap:wrap!important;white-space:normal;justify-content:center;row-gap:.2em} .sh-date .sh-sep{display:none} } /* ===== 秘書の間 8回目 ===== */ /* 天気のマーク：天気予報でよく見る色（塗りつぶし）に、ほんの少し光 */ .wxm{position:relative;display:inline-flex;align-items:center;justify-content:center;width:1.45em;height:1.2em;flex:none} .wxm .ms{font-size:1.35em;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24} .wxm-sun .ms{color:#FFC233;text-shadow:0 0 8px rgb(255 190 50 / calc(.55 * var(--glow)))} .wxm-cloud .ms{color:var(--wx-cloud);text-shadow:0 0 6px rgb(200 215 225 / calc(.35 * var(--glow)))} .wxm-rain .ms{color:var(--wx-rain);text-shadow:0 0 6px rgb(120 190 255 / calc(.45 * var(--glow)))} .wxm-snow .ms{color:var(--wx-snow);text-shadow:0 0 6px rgb(230 240 255 / calc(.5 * var(--glow)))} .wxm-pc .wxm-s{position:absolute;left:-.05em;top:-.2em;font-size:1.05em;color:#FFC233;text-shadow:0 0 8px rgb(255 190 50 / calc(.55 * var(--glow)))} .wxm-pc .wxm-c{position:absolute;right:-.1em;bottom:-.2em;font-size:1.2em;color:var(--wx-cloud2)} /* 会話の枠：直近の2件ずつ。古い方は1行に短く、新しい方は全部 */ .sh-tb{min-height:10.6em} .tb-r.old .tb-b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;opacity:.72;padding:.35em .8em;font-size:1em} .tb-r.old .tb-t{padding-top:.35em} @media (min-width:1024px) and (max-height:1000px){ .sh-tb{min-height:8.9em} .sh-core{min-height:140px} } .sh-date .wxm{width:1.9em;height:1.45em;margin-right:.1em} .sh-date .wxm > .ms{font-size:1.75em!important;width:1em;line-height:1} .sh-date .wxm-pc .wxm-s{font-size:1.3em!important;left:0;top:-.15em} .sh-date .wxm-pc .wxm-c{font-size:1.45em!important;right:-.05em;bottom:-.25em} /* 天気のマークを大きく（文字の約1.2倍）。行の高さは変えない */ .sh-date .wxm{font-size:inherit!important;width:1.45em;height:1.2em} .sh-date .wxm > .ms{font-size:1.25em!important} .sh-date .wxm-pc .wxm-s{font-size:.95em!important;left:-.05em;top:-.22em} .sh-date .wxm-pc .wxm-c{font-size:1.1em!important;right:-.08em;bottom:-.3em} /* 狭い列（1440 など）の予定の一番下の行：1行目「今日まで」、2行目に名前と種類（2行以内） */ @container (max-width: 400px){ .sh-plan .fl.flag{grid-template-columns:.3em minmax(0,1fr) auto;grid-template-areas:"m t d" "m x d";row-gap:.05em} .sh-plan .fl.flag > .fl-m{grid-area:m;align-self:stretch;height:auto} .sh-plan .fl.flag > .fl-t{grid-area:t;font-size:max(14px,.85em)} .sh-plan .fl.flag > .fl-x{grid-area:x;flex-direction:row;flex-wrap:nowrap;align-items:baseline;gap:.5em;min-height:0;padding:0} .sh-plan .fl.flag > .fl-x b{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-plan .fl.flag > .fl-x small{flex:none;white-space:nowrap} .sh-plan .fl.flag > .fl-done{grid-area:d} } /* 顧客管理の表（見本）：本物と同じ見出しの表・タブ（2026-10-15） */ .crm-tabs{margin-bottom:12px} .crm-real td{white-space:nowrap} .crm-real .crm-n{white-space:normal;min-width:200px} /* 話し終わりを待っている間の輪（核の外側。送るまでの残りの分だけ。2026-10-15） */ .core[data-st="listen"] .c-seg{opacity:1} .core .c-seg circle.eou{fill:none;stroke:var(--core);stroke-width:2.6;stroke-linecap:round;opacity:.85} .core-sun .c-seg circle.eou{stroke:var(--teal);stroke-width:1.6} /* ===== 15回目：全ページを秘書の間の世界観に（2026-10-15）===== * 見た目は「近未来／実務」の2つ。ここから下も色・光・地・線・影は変数だけを使う（直に色を書かない）。 */ html,body{background:var(--page-bg)} /* 本文の地：近未来は星の点と格子（ホームは真ん中の青い光も。決まりは上の .app.is-hall .main） */ .app .main{background-color:var(--page-bg);background-image:var(--page-glow),var(--page-img);background-size:auto,var(--page-size);background-position:0 0,var(--page-pos)} .pg-head h1{color:var(--hl)} /* 左のメニュー：準備中の札 */ .nav-b .soon-t,.soon-t{margin-left:auto;flex:none;font-style:normal;font-size:12.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3);letter-spacing:.04em;white-space:nowrap} .nav-b.soon > span:not(.ms){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nav-b.soon{gap:10px} .side-min .nav-b .soon-t{display:none} /* 会話の欄：小さな金色の太陽（状態の輪と動きはそのまま）・話し手の見出し・吹き出しは四辺同じ細い線 */ .ct-core .chat-av{overflow:visible!important} .ct-sunimg{width:150%!important;max-width:none!important;flex:none;mix-blend-mode:var(--sun-blend);-webkit-mask:var(--sun-mask);mask:var(--sun-mask)} .chat-top b{color:var(--hl)} .cm-who{display:flex;align-items:center;gap:6px;margin:6px 0 -6px;font-size:13.5px;font-weight:700;letter-spacing:.06em;color:var(--teal-text)} .cm-who .ms{font-size:18px;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgb(var(--hud3-rgb) / .6)} .cm-who img{width:24px;height:24px;border-radius:50%;object-fit:cover;transform:scale(1.5);mix-blend-mode:var(--sun-blend);-webkit-mask:var(--sun-mask);mask:var(--sun-mask)} .cm-who.me{align-self:flex-end} .chat-log .cm .cb{background:var(--bot-bg);box-shadow:inset 0 0 0 1px var(--bot-line);color:var(--ink)} .chat-log .cm.me .cb{background:var(--me-bg);color:var(--me-ink);box-shadow:inset 0 0 0 1px var(--me-line)} .chat-log .cm .cb.typing{background:var(--bot-bg)} .chat-log{background:transparent} /* スマホの下の帯：［話しかける］だけ光らせる */ .dock-talk{box-shadow:var(--dock-glow)} :root[data-theme="dark"] .dock-shoot{background:transparent;border-color:rgb(var(--hud3-rgb) / .6);color:var(--cy-hi)} :root[data-theme="dark"] .tabs,:root[data-theme="dark"] .dock{border-top-color:rgb(var(--hud-rgb) / .3)} :root[data-theme="dark"] .tab-b.on{text-shadow:0 0 12px rgb(80 230 240 / calc(.6 * var(--glow)))} /* 予定：今日のます目は四辺の光る線 */ .mcell.today{box-shadow:inset 0 0 0 1.5px var(--frame-here-line),var(--today-ring)} /* 営業の工程表：左端だけ濃い線をやめ、四辺同じ細い線＋薄い地で事業の色を出す */ .gd-it{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bc) 55%,transparent);background:color-mix(in srgb,var(--bc) 8%,var(--card))} /* ホームの今日の流れ：左の小さな棒をやめ、四辺同じ細い線＋薄い地（仕事＝水色・私用＝紫） */ .sh-plan .fl{border:1px solid var(--chip-w-line);border-radius:8px;background:var(--chip-w-bg);padding:.3em .6em;margin-top:.35em} .sh-plan .fl.priv{border-color:var(--chip-p-line);background:var(--chip-p-bg)} .sh-plan .fl.flag{border-color:rgb(var(--gold-rgb) / .55);background:rgb(var(--gold-rgb) / .08)} .sh-plan .fl-m{display:none} .sh-plan .fl{grid-template-columns:auto minmax(0,1fr) auto} @container (max-width: 400px){ .sh-plan .fl.flag{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t d" "x d"} } /* 実務の時の太陽：画像はそのまま、黒い地は丸く切る（光の筋と波紋は控えめ） */ .sh-sunimg{mix-blend-mode:var(--sun-blend);-webkit-mask:var(--sun-mask);mask:var(--sun-mask);width:var(--sun-box);height:var(--sun-box);left:calc((100% - var(--sun-box)) / 2);top:calc((100% - var(--sun-box)) / 2)} /* 枠の中の大きな数字（近未来は金・水色で光る。実務は落ち着いた色） */ .sh-gold{color:var(--gold)} /* 帯（上）：近未来では下に細い水色の線 */ :root[data-theme="dark"] .strip{border-bottom-color:rgb(var(--hud-rgb) / .3)} /* 左のメニュー：準備中の2つを足しても、900px の高さで最後（覚えている事）まで見える */ .side{padding:18px 14px 14px} .side-top{margin-bottom:16px} .side-shoot{margin-bottom:12px;min-height:46px} .side-nav{gap:2px} .nav-b{min-height:44px;gap:10px} .nav-b.soon{padding-right:6px;gap:8px} .nav-b .soon-t{font-size:11.5px;padding:3px 6px;letter-spacing:.02em} .side-set{margin-bottom:8px;padding-top:8px} .side-status{padding:10px 12px;line-height:1.55} .ss-kb{margin-top:6px} .side-min .side{padding-left:12px;padding-right:12px} /* お金・営業の大きな数字（近未来は金色で光る。実務は今までの濃い色） */ .big,.money-row .v,.sstat b{color:var(--num-big);text-shadow:var(--num-glow)} .cs-big b,.fr-row b,.b3 b{color:var(--num-big);text-shadow:var(--num-glow)} .pj-alert{box-shadow:inset 0 0 0 1px var(--warn-line)} /* 予定：その日の一覧の時刻は大きく（近未来は金色） */ .dsel .ev-t,.dview .ev-t{font-size:20px;color:var(--num-big);text-shadow:var(--num-glow)} /* 会話の中の今日の予定（LINE の形のカード）も、専用画面では左端だけの線をやめ、四辺同じ細い線＋薄い地（LINE の見本の中はそのまま） */ .chat-log .fx-ev{padding:1px 8px;border:1px solid var(--chip-w-line);background:var(--chip-w-bg);border-radius:6px;margin-top:4px} .chat-log .fx-ev.private{border-color:var(--chip-p-line);background:var(--chip-p-bg)} .chat-log .fx-ev::before{display:none} .cm-who{font-size:15px} /* 設定の「名前で呼んで起こす」の行：いまの状態（2026-10-15 急ぎ） */ .wake-st{display:block;margin-top:4px;font-style:normal;font-size:15px;font-weight:700;line-height:1.5;color:var(--warn)} .wake-st.on{color:var(--ok)} /* ===================== 16回目：完成見本に合わせる（2026-10-16）===================== * 物差し：ホーム design/mock_mac_6.png・予定 mock_page_schedule_1.png・お金 mock_page_money_1.png（どれも 1672×941）。 * ・広い画面は app.js の applyZoom() で全体を拡大する（基準 1672×941。iMac 2240×1260 は 1.34 倍）。拡大している時の1画面の高さは --vh * ・上の横長の帯をやめ、右上の小さな［見本の操作］1つに（押すと中に今までの操作） * ・背景：かすかな星と奥行き（周りは暗く、真ん中はわずかに明るい）。方眼はごく薄く * ・枠：角の丸い暗い半透明の地・水色の細い線・柔らかい外の光・細い二重の縁・見出しの下の細い光る線（全ページ共通。色と光は変数なので、近未来だけに効く） * 大晴さんの決まり：太陽のまわりを回る玉と軌道の線は入れない／Mac のホームに［話しかける］は置かない／左端だけ太い線・濃い帯は使わない（四辺同じ）／ホームに天気の出どころは出さない */ :root{ --strip:0px; /* 横長の帯は無い（右上の［見本の操作］は重ねて置く） */ --head-line:linear-gradient(rgb(var(--hud2-rgb) / .28),rgb(var(--hud2-rgb) / .28)); /* 見出しの下の線（実務は今までの細い線） */ --head-glow:linear-gradient(transparent,transparent); --stars:none; } :root[data-theme="dark"]{ --frame-bg:linear-gradient(180deg,rgba(9,36,70,.74),rgba(3,17,38,.82)); --frame-line:#9AF5FF; /* 外の柔らかい光＋内側に細い二重の縁（暗い隙間 2px と、薄い水色の線 1px） */ --frame-shadow:0 0 0 1px rgba(120,238,255,.5),0 0 6px rgba(80,230,255,.9),0 0 16px rgba(40,200,255,.55),0 0 32px rgba(30,170,250,.22),inset 0 0 0 2px rgba(4,18,40,.85),inset 0 0 0 3px rgba(112,236,252,.20),inset 0 0 26px rgba(30,200,240,.10); --frame-here-shadow:0 0 0 1px #8BF0F5,0 0 26px rgba(80,230,240,.62),0 0 52px rgba(80,230,240,.2),inset 0 0 0 2px rgba(4,18,40,.85),inset 0 0 0 3px rgba(140,240,250,.36),inset 0 0 26px rgba(80,230,240,.14); --frame-r:14px; --head-line:linear-gradient(90deg,rgba(112,236,252,.12),rgba(112,236,252,.72) 9%,rgba(112,236,252,.72) 91%,rgba(112,236,252,.12)); --head-glow:linear-gradient(90deg,transparent,rgba(60,210,245,.24) 10%,rgba(60,210,245,.24) 90%,transparent); --side-bg2:var(--frame-bg); --side-line:var(--frame-line); --side-shadow:var(--frame-shadow); --stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1180' height='860'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23dff4ff' stop-opacity='1'/%3E%3Cstop offset='.18' stop-color='%2386ccff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%233a8cff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='1164' cy='334' r='5.8' fill='url(%23g)'/%3E%3Ccircle cx='1164' cy='334' r='0.77' fill='%23f2faff'/%3E%3Ccircle cx='274' cy='138' r='5.7' fill='url(%23g)'/%3E%3Ccircle cx='274' cy='138' r='0.76' fill='%23f2faff'/%3E%3Ccircle cx='411' cy='533' r='7.3' fill='url(%23g)'/%3E%3Ccircle cx='411' cy='533' r='0.97' fill='%23f2faff'/%3E%3Ccircle cx='878' cy='360' r='7.6' fill='url(%23g)'/%3E%3Ccircle cx='878' cy='360' r='1.02' fill='%23f2faff'/%3E%3Ccircle cx='635' cy='352' r='5.1' fill='url(%23g)'/%3E%3Ccircle cx='635' cy='352' r='0.67' fill='%23f2faff'/%3E%3Ccircle cx='841' cy='815' r='5.9' fill='url(%23g)'/%3E%3Ccircle cx='841' cy='815' r='0.78' fill='%23f2faff'/%3E%3Ccircle cx='421' cy='325' r='6.0' fill='url(%23g)'/%3E%3Ccircle cx='421' cy='325' r='0.81' fill='%23f2faff'/%3E%3Ccircle cx='682' cy='707' r='6.6' fill='url(%23g)'/%3E%3Ccircle cx='682' cy='707' r='0.87' fill='%23f2faff'/%3E%3Ccircle cx='932' cy='155' r='6.1' fill='url(%23g)'/%3E%3Ccircle cx='932' cy='155' r='0.81' fill='%23f2faff'/%3E%3Ccircle cx='1124' cy='658' r='5.9' fill='url(%23g)'/%3E%3Ccircle cx='1124' cy='658' r='0.78' fill='%23f2faff'/%3E%3Ccircle cx='487' cy='10' r='6.7' fill='url(%23g)'/%3E%3Ccircle cx='487' cy='10' r='0.89' fill='%23f2faff'/%3E%3Ccircle cx='548' cy='271' r='5.8' fill='url(%23g)'/%3E%3Ccircle cx='548' cy='271' r='0.77' fill='%23f2faff'/%3E%3Ccircle cx='542' cy='812' r='7.3' fill='url(%23g)'/%3E%3Ccircle cx='542' cy='812' r='0.97' fill='%23f2faff'/%3E%3Ccircle cx='821' cy='157' r='4.8' fill='url(%23g)'/%3E%3Ccircle cx='821' cy='157' r='0.64' fill='%23f2faff'/%3E%3Ccircle cx='727' cy='670' r='6.7' fill='url(%23g)'/%3E%3Ccircle cx='727' cy='670' r='0.89' fill='%23f2faff'/%3E%3Ccircle cx='601' cy='240' r='4.7' fill='url(%23g)'/%3E%3Ccircle cx='601' cy='240' r='0.63' fill='%23f2faff'/%3E%3Ccircle cx='246' cy='93' r='8.0' fill='url(%23g)'/%3E%3Ccircle cx='246' cy='93' r='1.06' fill='%23f2faff'/%3E%3Ccircle cx='279' cy='466' r='4.8' fill='url(%23g)'/%3E%3Ccircle cx='279' cy='466' r='0.64' fill='%23f2faff'/%3E%3Ccircle cx='498' cy='796' r='7.8' fill='url(%23g)'/%3E%3Ccircle cx='498' cy='796' r='1.04' fill='%23f2faff'/%3E%3Ccircle cx='436' cy='237' r='6.4' fill='url(%23g)'/%3E%3Ccircle cx='436' cy='237' r='0.85' fill='%23f2faff'/%3E%3Ccircle cx='525' cy='76' r='5.4' fill='url(%23g)'/%3E%3Ccircle cx='525' cy='76' r='0.72' fill='%23f2faff'/%3E%3Ccircle cx='399' cy='7' r='4.8' fill='url(%23g)'/%3E%3Ccircle cx='399' cy='7' r='0.64' fill='%23f2faff'/%3E%3Ccircle cx='1161' cy='378' r='7.7' fill='url(%23g)'/%3E%3Ccircle cx='1161' cy='378' r='1.03' fill='%23f2faff'/%3E%3Ccircle cx='418' cy='565' r='5.8' fill='url(%23g)'/%3E%3Ccircle cx='418' cy='565' r='0.78' fill='%23f2faff'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='380'%3E%3Ccircle cx='152' cy='183' r='0.67' fill='%23ffffff' fill-opacity='0.47'/%3E%3Ccircle cx='359' cy='270' r='0.55' fill='%239fd4ff' fill-opacity='0.33'/%3E%3Ccircle cx='127' cy='127' r='0.49' fill='%239fd4ff' fill-opacity='0.65'/%3E%3Ccircle cx='9' cy='84' r='0.79' fill='%23d9f1ff' fill-opacity='0.21'/%3E%3Ccircle cx='339' cy='254' r='0.42' fill='%239fd4ff' fill-opacity='0.47'/%3E%3Ccircle cx='414' cy='297' r='0.64' fill='%23bfe6ff' fill-opacity='0.45'/%3E%3Ccircle cx='146' cy='161' r='0.82' fill='%239fd4ff' fill-opacity='0.77'/%3E%3Ccircle cx='243' cy='107' r='0.45' fill='%23bfe6ff' fill-opacity='0.80'/%3E%3Ccircle cx='220' cy='89' r='0.50' fill='%23ffffff' fill-opacity='0.38'/%3E%3Ccircle cx='191' cy='62' r='0.71' fill='%23ffffff' fill-opacity='0.71'/%3E%3Ccircle cx='354' cy='187' r='1.00' fill='%23bfe6ff' fill-opacity='0.49'/%3E%3Ccircle cx='191' cy='233' r='0.72' fill='%23d9f1ff' fill-opacity='0.21'/%3E%3Ccircle cx='297' cy='349' r='0.98' fill='%23bfe6ff' fill-opacity='0.22'/%3E%3Ccircle cx='277' cy='152' r='0.61' fill='%23bfe6ff' fill-opacity='0.51'/%3E%3Ccircle cx='96' cy='38' r='0.46' fill='%23bfe6ff' fill-opacity='0.27'/%3E%3Ccircle cx='166' cy='18' r='0.95' fill='%23bfe6ff' fill-opacity='0.64'/%3E%3Ccircle cx='395' cy='291' r='0.50' fill='%239fd4ff' fill-opacity='0.58'/%3E%3Ccircle cx='101' cy='221' r='0.56' fill='%23bfe6ff' fill-opacity='0.35'/%3E%3Ccircle cx='44' cy='56' r='0.65' fill='%23ffffff' fill-opacity='0.22'/%3E%3Ccircle cx='371' cy='177' r='0.57' fill='%23d9f1ff' fill-opacity='0.24'/%3E%3Ccircle cx='180' cy='97' r='1.03' fill='%23d9f1ff' fill-opacity='0.43'/%3E%3Ccircle cx='48' cy='240' r='0.58' fill='%23d9f1ff' fill-opacity='0.47'/%3E%3Ccircle cx='353' cy='90' r='0.97' fill='%23ffffff' fill-opacity='0.73'/%3E%3Ccircle cx='211' cy='150' r='0.64' fill='%23d9f1ff' fill-opacity='0.50'/%3E%3Ccircle cx='361' cy='79' r='0.68' fill='%239fd4ff' fill-opacity='0.21'/%3E%3Ccircle cx='240' cy='370' r='0.95' fill='%239fd4ff' fill-opacity='0.65'/%3E%3Ccircle cx='310' cy='92' r='0.82' fill='%23ffffff' fill-opacity='0.33'/%3E%3Ccircle cx='211' cy='186' r='0.45' fill='%23bfe6ff' fill-opacity='0.58'/%3E%3Ccircle cx='304' cy='119' r='0.70' fill='%23bfe6ff' fill-opacity='0.68'/%3E%3Ccircle cx='216' cy='202' r='0.46' fill='%239fd4ff' fill-opacity='0.42'/%3E%3Ccircle cx='164' cy='85' r='0.70' fill='%23bfe6ff' fill-opacity='0.63'/%3E%3Ccircle cx='93' cy='150' r='0.81' fill='%23bfe6ff' fill-opacity='0.23'/%3E%3Ccircle cx='162' cy='22' r='0.83' fill='%23d9f1ff' fill-opacity='0.52'/%3E%3Ccircle cx='87' cy='300' r='0.81' fill='%239fd4ff' fill-opacity='0.52'/%3E%3Ccircle cx='216' cy='234' r='0.92' fill='%23d9f1ff' fill-opacity='0.51'/%3E%3Ccircle cx='198' cy='183' r='0.49' fill='%23d9f1ff' fill-opacity='0.48'/%3E%3Ccircle cx='46' cy='9' r='1.01' fill='%23bfe6ff' fill-opacity='0.64'/%3E%3Ccircle cx='65' cy='71' r='0.80' fill='%23bfe6ff' fill-opacity='0.65'/%3E%3Ccircle cx='303' cy='289' r='0.62' fill='%23bfe6ff' fill-opacity='0.54'/%3E%3Ccircle cx='76' cy='34' r='0.45' fill='%23d9f1ff' fill-opacity='0.22'/%3E%3Ccircle cx='64' cy='276' r='0.50' fill='%23bfe6ff' fill-opacity='0.32'/%3E%3Ccircle cx='316' cy='44' r='0.96' fill='%23bfe6ff' fill-opacity='0.45'/%3E%3Ccircle cx='257' cy='226' r='0.63' fill='%23ffffff' fill-opacity='0.46'/%3E%3Ccircle cx='7' cy='73' r='0.45' fill='%23ffffff' fill-opacity='0.77'/%3E%3Ccircle cx='372' cy='21' r='0.54' fill='%237cc4ff' fill-opacity='0.66'/%3E%3Ccircle cx='143' cy='196' r='0.66' fill='%23d9f1ff' fill-opacity='0.21'/%3E%3Ccircle cx='175' cy='366' r='0.51' fill='%23bfe6ff' fill-opacity='0.23'/%3E%3Ccircle cx='365' cy='242' r='0.89' fill='%23bfe6ff' fill-opacity='0.59'/%3E%3Ccircle cx='60' cy='367' r='0.51' fill='%23d9f1ff' fill-opacity='0.73'/%3E%3Ccircle cx='280' cy='112' r='0.83' fill='%23bfe6ff' fill-opacity='0.55'/%3E%3Ccircle cx='22' cy='342' r='0.74' fill='%23d9f1ff' fill-opacity='0.52'/%3E%3Ccircle cx='132' cy='233' r='0.78' fill='%23d9f1ff' fill-opacity='0.38'/%3E%3Ccircle cx='251' cy='358' r='0.77' fill='%237cc4ff' fill-opacity='0.68'/%3E%3Ccircle cx='35' cy='262' r='1.00' fill='%239fd4ff' fill-opacity='0.57'/%3E%3Ccircle cx='110' cy='248' r='0.85' fill='%239fd4ff' fill-opacity='0.75'/%3E%3Ccircle cx='31' cy='309' r='0.98' fill='%239fd4ff' fill-opacity='0.36'/%3E%3Ccircle cx='364' cy='377' r='0.77' fill='%23bfe6ff' fill-opacity='0.49'/%3E%3Ccircle cx='48' cy='338' r='0.66' fill='%23ffffff' fill-opacity='0.77'/%3E%3Ccircle cx='122' cy='298' r='0.58' fill='%23bfe6ff' fill-opacity='0.21'/%3E%3Ccircle cx='302' cy='332' r='0.92' fill='%237cc4ff' fill-opacity='0.29'/%3E%3Ccircle cx='408' cy='353' r='0.67' fill='%239fd4ff' fill-opacity='0.66'/%3E%3Ccircle cx='407' cy='316' r='0.90' fill='%23d9f1ff' fill-opacity='0.39'/%3E%3Ccircle cx='157' cy='223' r='0.64' fill='%23d9f1ff' fill-opacity='0.33'/%3E%3Ccircle cx='338' cy='199' r='0.75' fill='%23bfe6ff' fill-opacity='0.37'/%3E%3Ccircle cx='231' cy='321' r='0.95' fill='%23bfe6ff' fill-opacity='0.32'/%3E%3Ccircle cx='209' cy='136' r='0.40' fill='%239fd4ff' fill-opacity='0.24'/%3E%3Ccircle cx='289' cy='331' r='0.61' fill='%23ffffff' fill-opacity='0.56'/%3E%3Ccircle cx='390' cy='231' r='0.60' fill='%23d9f1ff' fill-opacity='0.33'/%3E%3Ccircle cx='73' cy='281' r='0.63' fill='%23bfe6ff' fill-opacity='0.24'/%3E%3Ccircle cx='271' cy='290' r='1.00' fill='%23ffffff' fill-opacity='0.66'/%3E%3Ccircle cx='38' cy='100' r='1.01' fill='%23ffffff' fill-opacity='0.75'/%3E%3Ccircle cx='141' cy='297' r='0.91' fill='%239fd4ff' fill-opacity='0.44'/%3E%3Ccircle cx='105' cy='9' r='1.04' fill='%23ffffff' fill-opacity='0.41'/%3E%3Ccircle cx='420' cy='155' r='0.67' fill='%237cc4ff' fill-opacity='0.55'/%3E%3Ccircle cx='59' cy='91' r='0.56' fill='%23d9f1ff' fill-opacity='0.30'/%3E%3Ccircle cx='110' cy='137' r='1.04' fill='%23d9f1ff' fill-opacity='0.50'/%3E%3Ccircle cx='351' cy='93' r='0.70' fill='%239fd4ff' fill-opacity='0.77'/%3E%3Ccircle cx='302' cy='93' r='0.67' fill='%23ffffff' fill-opacity='0.21'/%3E%3Ccircle cx='368' cy='311' r='0.53' fill='%23ffffff' fill-opacity='0.58'/%3E%3Ccircle cx='268' cy='3' r='0.97' fill='%237cc4ff' fill-opacity='0.77'/%3E%3Ccircle cx='278' cy='11' r='0.46' fill='%237cc4ff' fill-opacity='0.50'/%3E%3Ccircle cx='99' cy='355' r='0.58' fill='%239fd4ff' fill-opacity='0.48'/%3E%3Ccircle cx='309' cy='119' r='0.62' fill='%23bfe6ff' fill-opacity='0.35'/%3E%3Ccircle cx='407' cy='107' r='0.86' fill='%239fd4ff' fill-opacity='0.39'/%3E%3Ccircle cx='51' cy='31' r='0.43' fill='%23d9f1ff' fill-opacity='0.58'/%3E%3Ccircle cx='363' cy='151' r='0.50' fill='%237cc4ff' fill-opacity='0.37'/%3E%3Ccircle cx='25' cy='132' r='0.41' fill='%239fd4ff' fill-opacity='0.41'/%3E%3Ccircle cx='142' cy='163' r='0.60' fill='%23bfe6ff' fill-opacity='0.79'/%3E%3Ccircle cx='373' cy='233' r='0.98' fill='%23bfe6ff' fill-opacity='0.59'/%3E%3Ccircle cx='248' cy='331' r='0.68' fill='%237cc4ff' fill-opacity='0.31'/%3E%3Ccircle cx='262' cy='48' r='0.79' fill='%237cc4ff' fill-opacity='0.68'/%3E%3Ccircle cx='194' cy='94' r='0.49' fill='%23bfe6ff' fill-opacity='0.57'/%3E%3Ccircle cx='41' cy='363' r='0.92' fill='%239fd4ff' fill-opacity='0.68'/%3E%3Ccircle cx='351' cy='212' r='0.59' fill='%23bfe6ff' fill-opacity='0.58'/%3E%3Ccircle cx='241' cy='5' r='0.83' fill='%23d9f1ff' fill-opacity='0.26'/%3E%3C/svg%3E"); } /* --- 拡大している時（広い画面）の高さ：100dvh の代わりに --vh --- */ body{min-height:var(--vh,100dvh)} .v-line{min-height:calc(var(--vh,100dvh) - var(--strip))} .ln-wrap{min-height:calc(var(--vh,100dvh) - var(--strip))} .ln-frame{height:min(844px,calc(var(--vh,100dvh) - var(--strip) - 48px))} @media (min-width:1024px){ .ln-frame{height:calc(var(--vh,100dvh) - var(--strip) - 40px)} } .app{height:calc(var(--vh,100dvh) - var(--strip))} .dlg{max-height:calc(var(--vh,100dvh) - 48px)} .fv-img{max-height:calc(var(--vh,100dvh) * .6)} @media (max-width:600px){ .ln-frame{height:calc(100dvh - var(--strip))} } @media (max-width:767.98px){ .app{height:auto;min-height:calc(100dvh - var(--strip))} } /* --- 背景：かすかな星と奥行き（近未来）。体の地は今までの紺（#03122A）のまま --- */ :root[data-theme="dark"] body{background-color:var(--page-bg); background-image:radial-gradient(ellipse 56% 52% at 50% 42%,rgba(36,110,190,.36),transparent 72%),radial-gradient(ellipse 125% 105% at 50% 48%,transparent 50%,rgba(0,3,10,.66) 100%),var(--stars),linear-gradient(rgba(80,170,230,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(80,170,230,.03) 1px,transparent 1px); background-size:100% 100%,100% 100%,1180px 860px,420px 380px,48px 48px,48px 48px;background-attachment:fixed} :root[data-theme="dark"] .app .main,:root[data-theme="dark"] .app.is-hall .main,:root[data-theme="dark"] .v-line{background:transparent} /* --- 右上の［見本の操作］（中に今までの帯の操作） --- */ .strip{position:absolute;top:10px;right:14px;left:auto;z-index:60;height:auto;display:block;padding:0;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none} :root[data-theme="dark"] .strip{border:0} .strip-tg{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:700;letter-spacing:.08em;white-space:nowrap;color:var(--hl);background:rgb(var(--glass-rgb) / .8);border:1px solid rgb(var(--hud3-rgb) / .8);box-shadow:0 0 12px rgb(60 220 240 / calc(.38 * var(--glow))),inset 0 0 10px rgb(60 220 240 / calc(.12 * var(--glow)))} .strip-tg:hover,.strip.open .strip-tg{background:rgb(var(--hud2-rgb) / .2)} .strip-tg:focus-visible{outline:2px solid var(--teal-text);outline-offset:2px} .strip-menu{display:none} .strip.open .strip-menu{display:flex;flex-direction:column;gap:6px;position:absolute;top:calc(100% + 8px);right:0;width:340px;padding:14px 16px 12px;border-radius:14px;background:var(--card);border:1px solid rgb(var(--hud3-rgb) / .6);box-shadow:var(--shadow-2);color:var(--ink);text-align:left} .sm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;margin-bottom:2px;background:var(--head-line) left bottom / 100% 1px no-repeat} .sm-h{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--hl)} .sm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px} .sm-l,.strip .ck-l{font-size:13.5px;font-weight:500;color:var(--sub);white-space:nowrap;padding:0} .strip .seg{margin:0} .strip .seg-b{min-width:0;min-height:38px;padding:0 14px} .strip .clock-sw,.strip .theme-sw{display:flex;padding:0;background:transparent;border-radius:0} .sm-seg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px var(--seg-line)} .strip .ck-b{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:38px} .strip .ck-n{display:none!important} .strip .ck-l{display:inline!important} .strip .th-b{min-height:38px;padding:0 12px} .strip .th-b .lbl-long,.strip .lbl-long{display:inline!important} .strip .lbl-short{display:none!important} .strip .strip-voice{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;min-height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:700;white-space:nowrap;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3)} .strip-voice[aria-pressed="true"]{color:var(--seg-on-ink);background:var(--seg-on);box-shadow:var(--seg-on-shadow)} .strip-voice .ms{font-size:19px} .sm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin-top:4px;padding-top:6px;border-top:1px solid var(--line)} .strip .strip-reset,.strip .strip-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:10px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--sub);text-decoration:none;width:auto} .strip .strip-reset:hover,.strip .strip-back:hover{background:var(--line-2);color:var(--ink)} .strip .sample-tag{display:inline-flex!important;height:26px;font-size:12.5px;padding:0 10px} @media (max-width:767.98px){ .strip{top:14px;right:64px} .strip-tg{min-height:44px;padding:0 14px;font-size:14px} .strip.open .strip-menu{right:-50px;width:min(340px,calc(100vw - 28px))} body[data-view="line"] .strip{right:12px} body[data-view="line"] .strip.open .strip-menu{right:0} } /* --- 右上の［見本の操作］は 2026-10-17 にやめた（設定のページの「見本の操作」へ）。帯は試験の入口として DOM にだけ残す --- */ .strip[hidden]{display:none!important} @media (max-width:767.98px){ .pg-gear,.app .pg-gear{top:14px} } /* --- 枠（全ページ共通の部品）：見出しの下の細い光る線（.sh-h＝ホームの枠・会話の欄の上・左のメニューのロゴの下） --- */ .sh-h{border-bottom:0;background:var(--head-line) left calc(100% - 1px) / 100% 1px no-repeat,var(--head-glow) left bottom / 100% 3px no-repeat} /* ================= ホーム（design/mock_mac_6.png） ================= */ @media (min-width:1024px){ .app.is-hall .main .pg-home{padding:0 12px 10px 12px} } .sh{--shf:clamp(15px,min(calc(var(--vh,100dvh) / 52.3),calc(var(--vw,100vw) / 92.9)),18px);grid-template-columns:minmax(0,27.3%) minmax(0,1fr) minmax(0,27.3%);gap:12px} .sh-col{padding:10px 8px 6px 8px;gap:12px;-webkit-mask:none;mask:none} /* 左右の列：はじめの4段で、列の高さをちょうど埋める（中身は枠の中の上下の真ん中に） */ .sh-fold{display:flex;flex-direction:column;gap:10px;min-height:100%;flex:none} .sh-fold > .sc{flex:1 0 auto;display:flex;flex-direction:column} .sh-fold > .sc > .sh-h + *{margin-top:auto} .sh-fold > .sc > :last-child{margin-bottom:auto} .sh .sc{padding:.45em .95em .5em} .sh-h{gap:.5em;padding-bottom:.35em;margin-bottom:.4em} .sh .sh-sub{line-height:1.35} .sh-ic .ms{font-size:1.7em} .sh-h h2{font-size:1.5em;line-height:1.25} .sh-ic .ms{font-size:1.8em} .sh-sub b.sh-gold{color:var(--gold)} .tk-donut i{-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)} .sh .sh-k{line-height:1.4} @media (min-width:1024px){ .sh-open{min-height:36px} } /* 予定：次の予定を大きく、その後は1行ずつ（時刻と名前。箱にしない） */ @media (min-width:1024px){ .sh-plan #h-flow{display:none} .sh-plan .fl-list{margin-top:.45em;border-top:1px solid rgb(var(--hud2-rgb) / .22)} .sh-plan .fl{border:0;border-radius:0;background:transparent;margin:0;padding:.12em 0;min-height:0} .sh-plan .fl.flag,.sh-plan .fl.priv{border:0;background:transparent} .sh-plan .fl-open{min-height:34px} .sh-plan .fl-t{min-width:3.3em;color:var(--ink)} .sh-plan .fl.priv .fl-x b{color:var(--ink)} .sh-plan .fl-done{width:36px;height:36px;min-height:36px} .sh-plan .fl-x,.sh-plan .fl.flag > .fl-x{display:flex;flex-direction:row;align-items:baseline;gap:.6em;min-width:0;min-height:0;padding:0} .sh-plan .fl-x b{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-plan .fl-x small{flex:0 3 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-plan .fl,.sh-plan .fl.flag{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:none;column-gap:.8em;row-gap:0} .sh-plan .fl.flag > .fl-m,.sh-plan .fl.flag > .fl-t,.sh-plan .fl.flag > .fl-x,.sh-plan .fl.flag > .fl-done{grid-area:auto;align-self:center} .sh-plan .fl.flag > .fl-t{font-size:max(14px,.85em);white-space:nowrap} .pl-next{gap:0 1em} .sh-plan .pl-r .map-a{display:none} /* 地図は予定の中身（押した時）で開ける。枠は完成見本どおり3行まで */ .sh-plan .pl-ti,.sh-plan .pl-wh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 次の予定の右：1行目に名前、2行目に「あと◯分」（完成見本の2行。相手・場所は押した先の中身に） */ .sh-plan .pl-r{justify-content:center;gap:.15em} .sh-plan .pl-ti{font-size:1em} .sh-plan .pl-wh{display:none} .sh-plan .pl-next{align-items:center} .pl-time{font-size:3.05em} } /* タスク */ .tk-donut{width:6.5em;height:6.5em} .tk-l{gap:.12em} .tk-l li{line-height:1.45} .tk-l li b{font-size:1.1em;line-height:1.25} /* 営業 */ .sh-sales .sh-big{line-height:1.05;font-size:2.6em} .sh-sales .sh-line{margin-top:.3em;line-height:1.4} /* 目標：はじめの1つと、今日の優先事項（3つまで） */ @media (min-width:1024px){ .sh-goal .glr,.sh-goal .glr.first{min-height:32px} /* はじめの目標は、今の数を大きく（完成見本の「28/30件」） */ .sh-goal .glr.first{grid-template-columns:auto minmax(0,1fr) 3em;grid-template-areas:"t t t" "n b p";row-gap:0;column-gap:.7em;align-items:center} .sh-goal .glr.first > .glr-t{grid-area:t;font-size:.92em;font-weight:500;color:var(--sub)} .sh-goal .glr.first > .glr-n{grid-area:n;font-size:1.9em;line-height:1.1;font-weight:700} .sh-goal .glr.first > .glr-n small{font-size:.62em;font-weight:700} .sh-goal .glr.first > .sh-bar{grid-area:b} .sh-goal .glr.first > b.num:last-child{grid-area:p} .sh-goal .gl-rows{gap:0} .pr-it{min-height:26px;line-height:1.3} .pr-it span{-webkit-line-clamp:1} .pr-l{gap:.1em} .sh-goal .sh-sub{margin:.25em 0 .1em} } /* 右の列：領収書は数と3件だけ（撮るのはほかの画面の［撮る］とスマホ）・秘書からは1行ずつ2件 */ @media (min-width:1024px){ .sh-rc .rc-ft{display:none} .sh-from .nd:not(.open) p{-webkit-line-clamp:1} .nt-mini .sh-lt,.rec-l .sh-lt{-webkit-line-clamp:1} .sh-from .sh-sub{margin:.2em 0 .1em} .sh-from .fr-l{gap:0} .sh-from .nd{padding:.05em 0 .05em 1.2em} .nt-mini,.rec-l{gap:.05em} .nt-mini li,.rec-l li{line-height:1.45} } /* お金：今月の売上の右に前月比、その右に5か月の棒。下の4つは2列 */ .mo-top{align-items:flex-end;gap:.6em} .mo-s{display:grid;grid-template-columns:auto auto;grid-template-areas:"k k" "b d";align-items:end;column-gap:.6em} .mo-s > .sh-k{grid-area:k} .mo-s > .sh-big{grid-area:b} .mo-s > .mo-d{grid-area:d;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.15em;padding-bottom:.35em} .mo-d small{grid-column:1 / -1;font-size:.8em} .sh-money .sh-big{font-size:2em} .mo-d{font-size:.9em} .mo-bars{height:3.9em;padding-bottom:1.2em;gap:.32em} .hb{width:1em} .hb em{font-size:.6em} .mo-grid{margin-top:.5em} .mo-grid > div{padding:.3em .2em .15em} /* 1440 など列が狭い時（列の中 400px 以下）も、お金と領収書は横に並べたまま（縦に組み替えると高くなりすぎる） */ @container (max-width: 400px){ .mo-top{flex-wrap:nowrap} .sh-money .sh-big{font-size:2.05em} .mo-bars{height:3.6em;margin-left:0} .hb{width:.95em} .rc-row{grid-template-columns:auto minmax(0,1fr)} .rc-nums{flex-direction:column;justify-content:flex-start;align-items:stretch;padding:0 .8em 0 0;border-bottom:0;border-right:1px solid rgb(var(--hud2-rgb) / .25)} .rc-n .sh-big{font-size:2.2em} } .mo-grid b.num{font-size:1.38em;line-height:1.2} /* 領収書 */ .sh-rc .road-line{margin-top:.15em;padding-top:.15em;border-top:0;font-size:1em} .rc-n .sh-big{font-size:2.5em;line-height:1.05} .rc-nums{gap:.15em} /* 真ん中：あいさつ・日付と天気の1行・太陽（目盛りの輪の真ん中）・SUNROAD・声の波形・状態・発言と返答 */ .sh-c{padding-top:6px} .sh-top{gap:.1em} @media (min-width:1024px){ .sh-top h1.hello{font-size:2.2em;line-height:1.3;margin:0} .sh-date{font-size:1.08em} .sh-name{font-size:2.15em;letter-spacing:.55em;padding-left:.55em;margin:.05em 0 0;line-height:1.15} } @media (min-width:1024px){ .sh-top .hello-l{display:none} .sh-top .m-seen{display:none} } .sh-core{flex:1 1 auto;min-height:200px;--core-kh:1.22;--core-kw:.98;background:none} /* 外の細い輪（CSS で描く。canvas の外側は空のまま）：太陽の大きさ（--sun-cs）に合わせ、太陽の箱（押せる所）の真ん中に */ .sh-sunbtn::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--sun-cs,300px) * 1.2);height:calc(var(--sun-cs,300px) * 1.2);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle closest-side,transparent calc(73% - 1px),rgb(var(--hud3-rgb) / .16) 73%,transparent calc(73% + 1px),transparent calc(86.6% - 1.5px),rgb(var(--hud3-rgb) / .5) 86.6%,transparent calc(86.6% + 1.5px),transparent calc(99% - 1.2px),rgb(var(--hud3-rgb) / .26) 99%,transparent 100%)} /* 光のにじみ（太陽のまわりの柔らかい光。実務では出さない） */ .core-hall::before{content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,rgb(255 214 120 / calc(.55 * var(--glow))) 0,rgb(255 190 80 / calc(.42 * var(--glow))) 48%,rgb(255 160 50 / calc(.16 * var(--glow))) 56%,rgb(40 160 240 / calc(.16 * var(--glow))) 62%,rgb(40 160 240 / calc(.06 * var(--glow))) 72%,transparent 80%)} :root[data-theme="dark"] .core-hall{--sun-box:100%} .sh-name{font-size:2.15em;letter-spacing:.55em;padding-left:.55em;margin:.05em 0 0;line-height:1.15} .sh-wave{display:block;flex:none;width:min(66%,470px);height:1.8em;margin:.15em auto 0} .sh-state{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em 1em;margin:.1em 0 .3em} .sh-state b{font-size:1.12em;letter-spacing:.2em} /* 名前で呼んで起こせるようにする：HUD に合う小さな札のボタン（下線のリンクにしない） */ .sh .sh-wake,.sh-wake{display:inline-flex;align-items:center;gap:.35em;margin:0;min-height:34px;padding:0 .95em;border-radius:999px;font-size:max(14px,.8em);font-weight:500;letter-spacing:.04em;color:var(--cy-ink);background:rgb(var(--hud2-rgb) / .10);border:1px solid rgb(var(--hud3-rgb) / .55);box-shadow:0 0 10px rgb(60 220 240 / calc(.22 * var(--glow)));text-decoration:none;white-space:nowrap} .sh-wake .ms{font-size:1.2em;color:var(--cy)} .sh-wake:hover{background:rgb(var(--hud2-rgb) / .2);color:var(--hl)} /* 社長の発言・サンロードの返答：2件ずつ（古い方も2行まで読める） */ .sh-talk{margin-top:.4em;gap:.8em} .sh-tb{min-height:10.4em} .sh-tb .sh-h h2{font-size:1.12em} .sh-tb .sh-ic .ms{font-size:1.55em} .tb-list{gap:.45em} .tb-r{grid-template-columns:3.1em minmax(0,1fr);gap:.4em} .tb-r{grid-template-columns:2.9em minmax(0,1fr)} .tb-t,.sh .tb-t{padding-top:.45em;font-size:max(14px,.82em)} :root[data-theme="dark"] .tb-b{border-color:rgb(var(--hud3-rgb) / .6);box-shadow:0 0 8px rgb(40 200 240 / .18)} .tb-b{border-radius:9px;padding:.38em .8em;font-size:max(15px,.88em);line-height:1.55} .tb-r.old .tb-b{-webkit-line-clamp:2;opacity:.9;font-size:max(15px,.88em);padding:.38em .8em} .tb-r.old .tb-t{padding-top:.45em} @media (min-width:1024px) and (max-height:1000px){ .sh-tb{min-height:10.4em} .tb-b,.tb-r.old .tb-b{font-size:max(15px,.88em);padding:.38em .8em} .sh-core{min-height:200px} } /* 狭い画面（1024px 未満）：1列。列のまとまりは外す */ @media (max-width:1023.98px){ .sh-fold{display:contents} .sh-fold > .sc{display:block} .sh-core{flex:none;height:300px;--core-kh:1;--core-kw:1} .sh-open{min-height:44px} .sh-state{flex-direction:column} } /* 枠の線は少し太く（拡大した iMac で 2px）・ホームの枠も同じ */ :root[data-theme="dark"] .sc,:root[data-theme="dark"] .card{border-width:1.5px} /* 18px の字のまま4段に収める：行の高さを詰める（Mac のホーム） */ @media (min-width:1024px){ .sh-goal .glr.first > .glr-t{line-height:1.3} .rec-l li,.nt-mini li{line-height:1.35} .sh-from .nd p{line-height:1.4} .sh-from .sh-sub,.sh-goal .sh-sub{line-height:1.25} .mo-s > .mo-d{line-height:1.15;padding-bottom:.25em} .rc-l{gap:.35em} } @media (min-width:1024px){ .sh-plan .fl-open{min-height:32px} .sh-plan .fl{padding:.06em 0} .tk-donut{width:6.3em;height:6.3em} } /* 列が狭い時（1440 など）は、次の予定の横の相手・場所を出さない（途中で切れた名前にしない。押すと中身に全部） */ @container (max-width: 400px){ .sh-plan .pl-wh{display:none} } /* 真ん中の列が狭い時（1280 など）：日付と天気の1行を少し小さく（はみ出さない） */ @media (min-width:1024px){ .sh-c{container-type:inline-size} } @container (max-width: 580px){ .sh-date{font-size:1.02em;gap:.5em} .sh-date .wx-home .sh-wxp{display:none} } @container (max-width: 360px){ .mo-top{flex-wrap:nowrap;gap:.4em} .sh-money .sh-big{font-size:1.8em} .mo-bars{height:3.3em;gap:.22em;margin-left:auto} .hb{width:.78em} .mo-d small{display:none} } /* ===== Mac のホーム（横 1024px 以上・2026-10-17 大晴さんの指示 2回目）===== * 画面の大きさにかかわらず、iMac 2240×1260 の見え方をそのまま縮めた・広げた形（app.js の applyZoom の ratio。拡大 ＝ min(横幅÷2240, 高さ÷1260)）。 * 左右は5段ずつ（左：予定・タスク・営業・目標・会社のメール／右：お金・領収書・請求書・秘書から・最近の動き）。列はスクロールしない。 * 枠ごとに「大きな数字か一番大事な1行」＋添える1〜2行。核のほかの行（hx・hxm）は入るだけ出す（app.js の fitHall）。mx＝Mac では出さない（スマホは出す）。 * 外の余白は上下左右とも 16px。左右の列のいちばん上の枠の上の線と、左右のいちばん下の枠・真ん中の会話の欄の下の線をそろえる。 * 真ん中：挨拶 → 太陽（横幅の 25%） → SUNROAD → 眠っています → 会話の欄。挨拶と太陽の間・眠っていますと会話の欄の間は同じ（margin-top:auto）。声の波形は出さない（目盛りの輪が声を表す） */ @media (max-width:1023.98px){ .sh .hxm{display:none} } /* hxm＝Mac のホームだけに出す行（スマホは今まで通り出さない） */ .sh-measure{min-height:0!important} .sh-measure > .sc{flex-grow:0!important;height:auto!important} .sh-core-only .hx,.sh-core-only .hxm{display:none!important} /* 準備中の2つ（スマホ）：札は題の隣、いつ作るかは薄く（Mac と同じ役割）。左のメニューが無いので、ここが入口 */ @media (max-width:1023.98px){ .sh-soon .sh-h .soon-t{margin-left:.2em;font-size:.72em;padding:.2em .6em} .sn-s{margin:.5em 0 0;font-size:.93em;color:var(--sub)} } @media (min-width:1024px){ .app.is-hall .main .pg-home{padding:16px} .sh{grid-template-columns:442px minmax(0,1fr) 442px;gap:16px} .sh .mx{display:none} .sh-col{overflow:visible;padding:0} .sh-fold{gap:12px} .sh-col > .sc{display:none} /* 5段の下の枠（覚えている事・相談先・設定）は、ホームに出さない（中のページ・メニューから） */ .sh-soon{display:flex} /* 出す行が無い時は、その小見出し・枠も出さない */ /* お金：今月の売上の下に、手元のお金を1行 */ .mo-grid{display:block;margin-top:.45em} .mo-grid > #home-cash{display:flex;align-items:baseline;justify-content:flex-start;gap:.8em;padding:.45em 0 0;border:0} .mo-grid > #home-cash .sh-k{font-size:1em} .mo-grid > #home-cash b.num{font-size:1.55em;color:var(--hl)} /* 領収書：確認待ちと決算までを横に2つ */ .sh-rc .rc-row{display:block} .sh-rc .rc-nums{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:0;border:0} .sh-rc .rc-nums > *{flex:1} .sh-rc .rc-nums > .road-line{padding-left:1em;border-left:1px solid rgb(var(--hud2-rgb) / .25)} .sh-rc .road-line b{font-size:2.5em} /* 準備中の2つ：札と、できるようになる事の1行（太く）と、いつ作るか（小さく薄く） */ .sh-soon .sh-h .soon-t{margin-left:.2em;font-size:.72em;padding:.2em .6em} .sn-l{margin:0;font-size:1.05em;font-weight:700;color:var(--hl);line-height:1.45} .sn-s{margin:.15em 0 0;font-size:.85em;color:var(--sub)} /* 秘書から：件数を大きく・名前を太く、補足は小さく薄く・まとまりの間を空ける */ .fr-head{display:flex;align-items:baseline;justify-content:flex-start;gap:.5em;margin-bottom:.2em} .fr-head .sh-k{font-size:1em;font-weight:700;color:var(--cy-ink)} .fr-head .fr-n{font-size:2.2em;line-height:1} .sh-from .fr-l{gap:.25em} .sh-from .nd{padding:.1em 0 .1em 1.2em} .sh-from .nd p{font-size:.86em;line-height:1.5;color:var(--sub);-webkit-line-clamp:2} .sh-from .nd p b{font-size:1.16em;font-weight:700;color:var(--hl)} .sh-from .nd::before{top:.5em} #home-notice{margin-top:.9em;padding-top:.6em;border-top:1px solid rgb(var(--hud2-rgb) / .2)} #home-notice .sh-sub{margin:0 0 .2em;font-size:1em;color:var(--cy-ink)} .nt-mini li{font-size:.9em;color:var(--ink)} /* 足した目標の行（今は出さない。スマホ用の形はそのまま） */ /* 真ん中 */ .sh-c{padding:0} .sh-top{flex:none} .sh-core{flex:none;min-height:0;margin-top:auto;--core-fit:1;--core-vw:.25;--core-kh:1;--core-kw:.98;--core-gap:28px} .sh-sunbtn::before{width:var(--sun-cs,300px);height:var(--sun-cs,300px)} .sh-name{margin:.1em 0 0} .sh-wave{display:none} .sh-state{margin:.35em 0 0} /* 下の会話の欄：残りの高さを使って高く（上限あり）・内側と吹き出しの間にゆとり（2件ずつ） */ .sh-talk{flex:1 1 auto;min-height:15em;max-height:17.5em;margin-top:auto;padding-top:0;gap:1.1em;align-items:stretch} .sh-tb{min-height:0;padding:.75em 1.15em 1em} .sh-tb .sh-h{margin-bottom:.7em} .sh-tb .sh-h h2{font-size:1.2em} .tb-list{flex:1 1 auto;justify-content:center;gap:.85em} /* 余る時は、吹き出しを欄の縦の真ん中に */ .tb-r{gap:.6em} .tb-b,.tb-r.old .tb-b{font-size:max(15px,.95em);line-height:1.6;padding:.55em 1em} .tb-t{padding-top:.6em} .tb-r.old .tb-b{display:block;-webkit-line-clamp:unset;overflow:visible} } /* 20回目（2026-10-17）：枠の中の間隔をそろえる（近接・反復）。Mac のホームの10の枠は、どれも * ・見出しの線の下 14px から中身を上から並べる（前の「上下の真ん中」はやめた） * ・枠が縦に伸びた分の余りは、枠の下に残す（10の枠とも同じ決まり） * ・大きな数字は、ラベルのすぐそば（ラベルの真下か、すぐ右） */ @media (min-width:1024px){ .sh-fold > .sc > .sh-h + *{margin-top:0} .sh-fold > .sc > :last-child{margin-bottom:0} .sh .sc .sh-h{margin-bottom:14px} .sh-rc .rc-nums{align-items:flex-start;justify-content:flex-start;gap:0} .sh-rc .rc-nums > .rc-n{min-height:0} .sh-rc .rc-nums > .road-line{display:block;margin:0;padding:0 0 0 1em;border-top:0} .sh-rc .road-line .sh-k{display:block} .sh-rc .road-line b{display:block;line-height:1.05} .sh-sales .sl-row{align-items:start} .sh-plan .pl-next{align-items:start} /* 会話の欄の3件目（見本の3往復目）：入る時だけ（app.js の fitTalk） */ .tb-r.x3:not(.x3-on){display:none} } .tb-r.x3:not(.x3-on){display:none} /* 21回目（2026-10-17）：枠の中のスクロール（app.js の fitHall）。見出しは動かさず、見出しの下の中身（.sc-body）だけが動く */ @media (min-width:1024px){ .sh-fold > .sc.sc-fixed{flex:none} .sc-body{flex:1 1 auto;min-height:0;overflow:visible;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--hud2-rgb) / .35) transparent} .sc-body::-webkit-scrollbar{width:4px} .sc-body::-webkit-scrollbar-thumb{background:rgb(var(--hud2-rgb) / .35);border-radius:2px} .sc-body.scroll{padding-right:.35em} .sc-body.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 2.4em),transparent)} /* 太陽の外の細い輪まで、太陽の箱の中に入れる（SUNROAD・眠っています・名前で起こすの札と重ねない） */ .sh-name{margin-top:.45em} } /* ===== 22回目（2026-10-17 大晴さん）：ホームの見やすさの決まり（近接・整列・反復・対比）===== * Mac のホームの10の枠と会話の欄は、どれも下の値だけを使う（iMac 2240 の大きさ。ほかの画面は比率で縮む） * 枠の内側の左右 18px・上 10px・下 14px／見出しの線の下から中身まで 14px * 枠の中の横の区切り線：上 12px・下 12px（線は 1px・同じ色・枠の内側の幅いっぱい） * 縦の区切り線：左 16px・右 16px（線は 1px・同じ色） * 文字の役割：ラベル 15px（薄い・500）／主の数字 44px・副の数字 26px（700）／本文 18px／補足 14px（薄い） * 行と行の間 6px。点で始まる行は、点の右 18px から文字を始める */ @media (min-width:1024px){ .sh{--px:18px;--hsep:14px;--sep:12px;--vsep:16px;--row:6px;--sep-c:rgb(var(--hud2-rgb) / .26); --f-lab:15px;--f-big:44px;--f-mid:26px;--f-body:18px;--f-note:14px} .sh .sc{padding:10px var(--px) 14px} .sh .sc .sh-h{padding-bottom:8px;margin-bottom:var(--hsep);background:var(--head-line) left bottom / 100% 1px no-repeat,var(--head-glow) left calc(100% + 1px) / 100% 3px no-repeat} /* 文字の役割 */ .sh .sc-body .sh-k,.sh .pl-l .sh-k,.fr-head .sh-k,.sh-goal .glr.first > .glr-t,.sh-sales .sl-g .sh-k,.sh .sc-body .sh-sub,#home-notice .sh-sub,.mo-grid > #home-cash .sh-k{display:block;font-size:var(--f-lab);font-weight:500;line-height:1.4;color:var(--sub);letter-spacing:.02em;margin:0} .sh .pl-time,.sh .sc-body .sh-big,.sh-rc .road-line b,.tk-donut b,.fr-head .fr-n,.sh-goal .glr.first > .glr-n,.sh-sales .sh-big,.sh-money .sh-big,.rc-n .sh-big{font-size:var(--f-big);line-height:1.05;font-weight:700} .sh .sc-body .sh-big small,.sh-rc .road-line b small,.fr-head .fr-n small,.sh-goal .glr.first > .glr-n small{font-size:.5em;font-weight:700;margin-left:.08em} .mo-grid > #home-cash b.num,.sh-sales .sh-line b{font-size:var(--f-mid);line-height:1.1;font-weight:700} .mo-grid > #home-cash b.num small{font-size:.7em} .sh-plan .pl-ti,.sh-plan .pl-u,.sh-plan .fl-t,.sh-plan .fl-x b,.tk-l li span,.tk-l li b,.pr-it,.sh-from .nd p b,.nt-mini li,.rec-l .sh-lt,.sn-l,.sh-goal .glr.first > b.num:last-child{font-size:var(--f-body);line-height:1.45} .sh-plan .fl-x small,.sh-plan .fl.flag > .fl-t,.sl-p,.mo-d small,.sn-s,.sh-from .nd p,.rec-l .rc-d,.tk-donut small,.sh-plan .fl.flag .fl-x small{font-size:var(--f-note);color:var(--sub);font-weight:400;line-height:1.45} .sh-from .nd p b{color:var(--hl);font-weight:700} .sh-plan .pl-ti{font-weight:700} .sh-plan .pl-u{font-weight:700} .sn-l{font-weight:500;color:var(--hl);margin:0} .sn-s{margin:var(--row) 0 0} /* 横の区切り線（上下 12px） */ .sh-plan .fl-list,.mo-grid,#home-notice,.sh-sales .sh-line,.sh-goal .sh-sub{border-top:1px solid var(--sep-c);margin-top:var(--sep);padding-top:var(--sep)} .sh-goal .sh-sub{margin-bottom:var(--row)} #home-notice .sh-sub{margin-bottom:var(--row);border:0;padding:0} .sh-goal #home-goals.gl-rows{border-top:0;margin-top:0;padding-top:0} /* 見出しの線と二重にしない */ /* 縦の区切り線（左右 16px） */ .sh-plan .pl-next{column-gap:var(--vsep);align-items:start} .sh-plan .pl-r{border-left:1px solid var(--sep-c);padding-left:var(--vsep);align-self:stretch;justify-content:flex-start;gap:2px} .tk-row{gap:var(--vsep);align-items:center} .tk-l{border-left:1px solid var(--sep-c);padding-left:var(--vsep);gap:var(--row)} .sh-sales .sl-row{column-gap:var(--vsep)} .sh-sales .sl-g{border-left:1px solid var(--sep-c);padding-left:var(--vsep);gap:var(--row);align-self:stretch} .sh-rc .rc-nums{display:grid;grid-template-columns:1fr 1fr;column-gap:0} .sh-rc .rc-nums > .rc-n{padding-right:var(--vsep)} .sh-rc .rc-nums > .road-line{border-left:1px solid var(--sep-c);padding-left:var(--vsep)} /* 行と行の間・頭そろえ */ .sh-plan .fl{padding:0;min-height:0;column-gap:var(--vsep)} .sh-plan .fl + .fl{margin-top:var(--row)} .sh-plan .fl-t{min-width:3.4em;font-weight:500} .sh-plan .fl-open{min-height:0} .sh-plan .fl-done{width:32px;height:32px;min-height:32px} .pr-l{gap:var(--row)} .pr-it{min-height:0} .sh-from .fr-head{display:flex;align-items:baseline;gap:10px;margin:0 0 var(--row)} .sh-from .fr-l{gap:var(--row)} .sh-from .nd,.nt-mini li{position:relative;padding:0 0 0 18px} .sh-from .nd::before,.nt-dot{left:0;top:.62em;width:8px;height:8px;margin:0} .nt-mini{gap:var(--row)} .rec-l{gap:var(--row)} .rec-l li{display:grid;grid-template-columns:3.4em minmax(0,1fr);column-gap:var(--vsep);align-items:baseline} .tk-l li{grid-template-columns:10px minmax(0,1fr) auto;gap:10px} .tk-l li b{text-align:right} .mo-grid > #home-cash{display:flex;align-items:baseline;gap:var(--vsep);padding:0;border:0} .mo-grid > #home-cash .sh-k{display:inline-block} .sh-sales .sh-line{display:flex;align-items:baseline;gap:var(--vsep);margin-bottom:0} .sh-sales .sh-line b{color:var(--gold)} .sh-goal .glr.first{column-gap:var(--vsep);row-gap:2px} .sh-goal .glr.first > b.num:last-child{text-align:right} .sl-p{text-align:right} /* 会話の欄も同じ値 */ .sh-tb{padding:10px var(--px) 14px} .tb-t,.sh .tb-t{font-size:var(--f-note)} /* 太陽と、その下の文字の間（2026-10-17：今の約1.4倍） */ .sh-name{margin-top:.63em} } @media (min-width:1024px){ /* お金：前月比はラベルの行の右に（大きな数字と棒に重ねない） */ .mo-s{grid-template-columns:auto auto;grid-template-areas:"k d" "b b";column-gap:10px;align-items:baseline} .mo-s > .mo-d{padding:0;display:inline-flex;align-items:baseline;gap:4px;font-size:var(--f-note)} .mo-s > .mo-d b{font-size:var(--f-note)} .mo-s > .mo-d small{grid-column:auto;font-size:var(--f-note)} .mo-s > .mo-d .ms{font-size:1.1em} .mo-top{align-items:flex-end;gap:var(--vsep)} .mo-bars{height:3.4em;padding-bottom:1.1em} } @media (min-width:1024px){ .sh-plan .fl{margin:0} .sh-plan .fl + .fl{margin-top:var(--row)} .sh .sc-body .sh-big,.sh .pl-time,.fr-head .fr-n,.sh-goal .glr.first > .glr-n,.sh-rc .road-line b{line-height:1} .sh .sc-body .sh-big small,.fr-head .fr-n small,.sh-goal .glr.first > .glr-n small,.sh-rc .road-line b small{line-height:1;vertical-align:baseline} } @media (min-width:1024px){ /* 予定：時刻・ラベルの列は決まった幅（4em）、件名の頭をそろえる。「タスク」「お客様対応」は小さな札。［✓］は行の縦の真ん中 */ .sh-plan .fl,.sh-plan .fl.flag{display:grid;grid-template-columns:4em minmax(0,1fr) auto;grid-template-areas:none;column-gap:var(--vsep);align-items:center} .sh-plan .fl > .fl-m{display:none} .sh-plan .fl > .fl-t,.sh-plan .fl.flag > .fl-t{min-width:0;width:auto;font-size:var(--f-body);font-weight:500;color:var(--ink);white-space:nowrap} .sh-plan .fl.flag > .fl-t{font-size:var(--f-lab);color:var(--warn);font-weight:700} .sh-plan .fl > .fl-x{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;padding:0;min-height:0} .sh-plan .fl > .fl-x > b{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--f-body);font-weight:500;color:var(--ink)} .sh-plan .fl > .fl-x > small{flex:0 0 auto;white-space:nowrap;font-size:var(--f-note);color:var(--sub)} .sh-plan .fl.flag > .fl-x > small{font-size:12px;font-weight:700;line-height:1;padding:3px 7px;border-radius:999px;color:var(--cy-ink);box-shadow:inset 0 0 0 1px rgb(var(--hud3-rgb) / .5)} .sh-plan .fl > .fl-done{align-self:center;width:30px;height:30px;min-height:30px;border-radius:8px} /* 秘書から：1行＝太字の短い名前＋薄い補足。押すと全文と選ぶボタン */ .sh-from .nd .nd-short{display:flex;align-items:baseline;gap:8px;min-width:0;margin:0;cursor:pointer;-webkit-line-clamp:unset} .sh-from .nd .nd-short b{flex:none;font-size:var(--f-body);font-weight:700;color:var(--hl);white-space:nowrap} .sh-from .nd .nd-short .nd-s{min-width:0;font-size:var(--f-note);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-from .nd .nd-full{display:none} .sh-from .nd.open .nd-full{display:block;margin:4px 0 0;font-size:var(--f-note);color:var(--sub);-webkit-line-clamp:unset} .sh-from .nd.open .pr-b{margin-top:6px} .sh-from .nd .nd-short:hover b{text-decoration:underline;text-decoration-color:rgb(var(--fg-rgb) / .35)} .nt-mini li .sh-lt{display:flex;align-items:baseline;gap:8px;min-width:0;-webkit-line-clamp:unset} .nt-mini li .sh-lt b{flex:none;font-size:var(--f-body);font-weight:700;color:var(--hl);white-space:nowrap} .nt-mini li .sh-lt .nt-s{min-width:0;font-size:var(--f-note);color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 最近の動き：日付の列は決まった幅、文は1行（語の切れ目で「…」） */ .rec-l li{grid-template-columns:3.2em minmax(0,1fr)} .rec-l .rc-d{font-size:var(--f-note);color:var(--sub)} .rec-l .sh-lt.fitw{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset} /* 会話の欄：吹き出しは2行まで（その先は「…」。全文は会話の画面）・時刻の列は決まった幅・内側の余白はどれも同じ */ .sh-tb .tb-r{grid-template-columns:3.2em minmax(0,1fr);column-gap:10px} .sh-tb .tb-b,.sh-tb .tb-r.old .tb-b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding:8px 14px;font-size:var(--f-body);line-height:1.5} .sh-tb .tb-r.live .tb-b{-webkit-line-clamp:3} .sh-tb .tb-t{padding-top:9px} } @media (min-width:1024px){ .sh-plan .fl-list{display:flex;flex-direction:column;gap:var(--row)} .sh-plan .fl-list > .fl,.sh-plan .fl + .fl{margin:0} .sh .sc-body .sh-goal-sub,.sh-goal .sc-body .sh-sub{margin:var(--sep) 0 var(--row);padding-top:var(--sep);border-top:1px solid var(--sep-c)} } /* 見た目の間隔をそろえる（字の上下の余白の分を差し引いて、線の上下・左右が同じに見えるように。画面写真の字の位置で測って合わせた値） * 見出しの線→中身 18px・横の区切り線の上下 16px・縦の区切り線の左右 16px（どれも見た目の字の端から） */ @media (min-width:1024px){ .sh-soon .sc-body > :first-child,.sh-rec .sc-body > :first-child{margin-top:-2px} .sh-from .sc-body > .fr-head{margin-top:-1px} .sh-plan .sc-body .fl-list{margin-top:11px;padding-top:10px} .sh-sales .sc-body .sh-line{margin-top:12px;padding-top:15px} .sh-goal .sc-body .sh-sub{margin-top:13px;padding-top:12px} .sh-money .sc-body .mo-grid{margin-top:19px;padding-top:12px} .sh-from .sc-body #home-notice{margin-top:13px;padding-top:11px} .sh-plan .pl-next{column-gap:15px} .sh-plan .pl-r{padding-left:14px} .sh-sales .sl-row{column-gap:15px} .sh-rc .rc-nums{grid-template-columns:auto minmax(0,1fr);column-gap:var(--vsep)} .sh-rc .rc-nums > .rc-n{padding-right:0} } @media (min-width:1024px){ .sh-rc .rc-nums{column-gap:14px} .sh-rc .rc-nums > .road-line{padding-left:15px} } @media (min-width:1024px){ .sh-fold > .sc.sc-fixed > .sc-body{overflow-y:auto} } @media (min-width:1024px){ .sh-plan .fl > .fl-x,.sh-plan .fl.flag > .fl-x.fl-open{justify-content:flex-start;text-align:left;width:100%} .sh-plan .fl{text-align:left;justify-items:start} .sh-plan .fl > .fl-done{justify-self:end} .rec-l li{grid-template-columns:2.9em minmax(0,1fr)} } @media (min-width:1024px){ .sh-plan .fl,.sh-plan .fl.flag{grid-template-columns:72px minmax(0,1fr) auto} .rec-l li{grid-template-columns:52px minmax(0,1fr)} .sh-tb .tb-r{grid-template-columns:52px minmax(0,1fr)} } /* ================= ほかのページの共通（左のメニュー・右の会話の欄・見出し・ボタン） ================= */ :root{ --grp-bg:transparent; --grp-line:transparent; --grp-shadow:none; } /* 実務：会話の欄は今までどおり（話し手の見出しと吹き出し） */ :root[data-theme="dark"]{ --grp-bg:linear-gradient(180deg,rgba(10,40,78,.58),rgba(4,20,44,.64)); --grp-line:rgba(112,236,252,.72); --grp-shadow:0 0 12px rgba(30,200,240,.30),inset 0 0 0 2px rgba(4,18,40,.7),inset 0 0 0 3px rgba(112,236,252,.14),inset 0 0 16px rgba(30,200,240,.08); } @media (min-width:1024px){ .page{padding:16px 28px 40px;gap:16px} } .pg-head h1{font-size:32px;letter-spacing:.06em} .pg-date{font-size:15px} :root[data-theme="dark"] .pg-head h1{text-shadow:0 0 18px rgb(120 220 255 / .3)} /* 左のメニュー：ロゴの下に細い光る線・項目は少し大きく・状態と覚えている事は小さな枠 */ .side-top{padding-bottom:16px;margin-bottom:16px;background:var(--head-line) left bottom / 100% 1px no-repeat} .nav-b{font-size:16px;min-height:46px} .nav-b.soon{font-size:15px} /* 高さが 940px より低い画面（1440×900 など）：左のメニューの最後（覚えている事）まで1画面に入れる */ @media (min-width:1024px) and (max-height:940px){ .side-top{padding-bottom:10px;margin-bottom:10px} .side-shoot{min-height:42px;margin-bottom:8px} .nav-b{min-height:41px;font-size:15.5px} .side-set{padding-top:4px;margin-bottom:4px} .side-status{padding:8px 12px;line-height:1.5} } .nav-b .ms{font-size:23px} :root[data-theme="dark"] .side-set{border-top-color:transparent;background:var(--head-line) left top / 100% 1px no-repeat} :root[data-theme="dark"] .side-set.on{background:var(--nav-on-bg)} :root[data-theme="dark"] .side-status,:root[data-theme="dark"] .ss-kb{background:rgb(var(--glass-rgb) / .55);border:0;box-shadow:inset 0 0 0 1px rgb(var(--hud3-rgb) / .5),0 0 10px rgb(30 200 240 / .18);border-radius:12px} :root[data-theme="dark"] .nav-b .cnt{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1.5px rgb(var(--gold-rgb) / .85),0 0 8px rgb(255 200 80 / .3)} /* 右の会話の欄：上に秘書の顔と細い光る線・話し手ごとの枠（社長の発言・サンロードの返答）・入れる欄も光る線 */ .chat-top{border-bottom:0;background:var(--head-line) left bottom / 100% 1px no-repeat;padding:14px 16px 14px 12px} .chat-top .core{--cs:56px} .chat-top b{font-size:19px} .chat-top .core-lab{font-size:15px} .chat-log{padding:14px 12px;gap:12px} .cm-grp{display:flex;flex-direction:column;gap:12px;border-radius:12px;background:var(--grp-bg);border:1px solid var(--grp-line);box-shadow:var(--grp-shadow)} :root[data-theme="dark"] .cm-grp{padding:10px 12px 12px;gap:8px} :root[data-theme="dark"] .cm-grp > .cm-who{margin:0;padding:0 0 8px;font-size:16px;color:var(--hl);background:var(--head-line) left bottom / 100% 1px no-repeat;align-self:stretch} :root[data-theme="dark"] .cm-grp > .cm-who .ms,:root[data-theme="dark"] .cm-grp > .cm-who img{width:30px;height:30px} :root[data-theme="dark"] .cm-grp > .cm-who .ms{font-size:21px;box-shadow:inset 0 0 0 1.5px rgb(var(--hud3-rgb) / .8)} :root[data-theme="dark"] .cm-grp .cm{max-width:100%} :root[data-theme="dark"] .cm-grp .cm.me{align-self:stretch} :root[data-theme="dark"] .cm-grp .cm .cb{font-size:15.5px;border-radius:10px} :root[data-theme="dark"] .cm-grp .cm.me .ct{text-align:left} :root[data-theme="dark"] .chat-quick .chip{background:rgb(var(--glass-rgb) / .55);border-color:rgb(var(--hud3-rgb) / .6);color:var(--ink);box-shadow:0 0 8px rgb(30 200 240 / .16)} :root[data-theme="dark"] .chat-quick .chip:hover{background:rgb(var(--hud2-rgb) / .16)} :root[data-theme="dark"] .chat-in input{background:rgb(var(--glass-rgb) / .6);border-color:rgb(var(--hud3-rgb) / .55)} :root[data-theme="dark"] .chat-in .ib.send{box-shadow:0 0 14px rgb(60 220 240 / .55)} :root[data-theme="dark"] .chat-in .mic,:root[data-theme="dark"] .chat-in .att{background:rgb(var(--glass-rgb) / .6);border-color:rgb(var(--hud3-rgb) / .55)} /* 縁取りのボタン（近未来）：水色の細い線と柔らかい光 */ :root[data-theme="dark"] .btn.sec,:root[data-theme="dark"] .ib.bd{border-color:rgb(var(--hud3-rgb) / .7);box-shadow:0 0 10px rgb(60 220 240 / .22),inset 0 0 10px rgb(60 220 240 / .08)} /* ================= 予定（mock_page_schedule_1.png）：月のカレンダーとその日の一覧が1画面に入る ================= */ @media (min-width:1024px){ .card.cal{padding:14px 18px 16px} .cal-bar{margin-bottom:12px} .cal-title{font-size:23px} .cal-bar .ib.bd,.cal-bar .btn.sec{min-height:44px} .mrow.head span{font-size:15px;padding:7px 0} .mcell{min-height:82px;padding:5px 6px 6px;gap:3px} .mnum{font-size:15px;width:28px;height:28px} .mgrid{container-type:inline-size} .mchip i{-webkit-line-clamp:1} } /* カレンダーが広い時（iMac など）：予定の札は、時刻の行と件名の行の2段。件名は2行まで折り返す（完成見本。札にかざすと全文） */ @container (min-width: 850px){ .mcell{min-height:70px;padding:3px 5px 4px;gap:1px} .mnum{width:25px;height:25px;font-size:14.5px} .mchips{gap:3px} .mchip{font-size:13px;line-height:1.2;padding:2px 6px} .mchip b{font-size:13px} .mchip i{display:-webkit-box;white-space:normal;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;word-break:auto-phrase} } @media (min-width:1024px){ /* その日の一覧は2列（時刻を大きく） */ .dsel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:8px;align-items:start;margin-top:14px} .dsel > h3,.dsel > .mv-warn,.dsel > .dsel-td,.dsel > .empty{grid-column:1 / -1} .dsel h3{font-size:18px;margin-bottom:0} .dsel .ev+.ev{margin-top:0} .dsel .ev{grid-template-columns:76px 1fr auto;min-height:58px} .dsel .ev-t{font-size:24px} } :root[data-theme="dark"] .mgrid{border-color:rgb(var(--hud3-rgb) / .35)} :root[data-theme="dark"] .mrow.head span{background:rgb(var(--glass-rgb) / .55);border-bottom-color:rgb(var(--hud3-rgb) / .3)} :root[data-theme="dark"] .mcell{border-color:rgb(var(--hud3-rgb) / .16)} /* ================= お金（mock_page_money_1.png）：問い・名前・大きな光る数字 ================= */ .mtab{min-height:44px;padding:0 20px;font-size:15.5px} .cashc,.freec,.projc{padding:14px 22px 16px} .qh{font-size:14px} .cashc .ch h2,.freec .ch h2,.projc .ch h2{font-size:19px;line-height:1.35} .qh{line-height:1.45} .cashc .ch,.freec .ch,.projc .ch{margin-bottom:2px} .cs-big b{font-size:48px;line-height:1.08} .cs-big span{font-size:14px} .fr-row b{font-size:40px;line-height:1.15} .fr-row .fr-f{font-size:15px} .cs-note{font-size:14px;margin-top:4px;line-height:1.6} .pj-sum{font-size:14px} @media (min-width:1024px){ .pg-money{gap:12px} } /* 会話の欄の顔（小さな太陽）は少し大きく */ .chat-top .chat-av{width:56px;height:56px} /* お金のタブ：間に細い仕切り（近未来） */ .mtab{position:relative} :root[data-theme="dark"] .mtab + .mtab::before{content:"";position:absolute;left:-3px;top:28%;bottom:28%;width:1px;background:rgb(var(--hud3-rgb) / .3)} :root[data-theme="dark"] .mtab.on::before,:root[data-theme="dark"] .mtab.on + .mtab::before{display:none} /* 右の会話の欄（近未来・横 1024px 以上）：詰めて、架空の2往復が社長の発言から全部見えるように（2026-10-16） */ @media (min-width:1024px){ .chat-top{padding:10px 14px 10px 10px} .chat-top .core{--cs:50px} .chat-top .chat-av{width:50px;height:50px} .chat-top b{font-size:18px} .chat-top .core-lab{font-size:14px} :root[data-theme="dark"] .chat-log{padding:10px 10px;gap:8px} :root[data-theme="dark"] .cm-grp{padding:7px 10px 8px;gap:5px} :root[data-theme="dark"] .cm-grp > .cm-who{padding:0 0 5px;font-size:15px;gap:7px} :root[data-theme="dark"] .cm-grp > .cm-who .ms,:root[data-theme="dark"] .cm-grp > .cm-who img{width:24px;height:24px} :root[data-theme="dark"] .cm-grp > .cm-who .ms{font-size:17px} :root[data-theme="dark"] .cm-grp .cm{line-height:1.55} :root[data-theme="dark"] .cm-grp .cm .cb{padding:7px 11px;font-size:15px} :root[data-theme="dark"] .cm-grp .cm .ct{font-size:13px;line-height:1.2;margin-top:2px} :root[data-theme="dark"] .chat-quick{gap:6px;padding:6px 12px 0} :root[data-theme="dark"] .chat-quick .chip{min-height:34px;padding:4px 12px;font-size:13.5px} :root[data-theme="dark"] .chat-in{padding:10px 12px 12px} } /* ================= 18回目：残りの画面を完成見本に（2026-10-17）================= * 物差し：design/mock_page_sales_1・receipts_1・goals_1・settings_1・invoice_1・mail_1（1672×941）と、スマホの mock_phone_2・mock_phone_schedule_1。 * 合わせるのは見た目と並びだけ。中身（項目・数字・文）は今の見本のまま。色と光は変数なので、実務は今までの落ち着いた見た目のまま。 */ /* --- 中のページの共通（営業・領収書・目標・設定・請求書・会社のメール）：見出しを大きく、見出しの下に細い光る線 --- */ @media (min-width:1024px){ .pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail{gap:14px} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .pg-head h1{font-size:36px;line-height:1.25} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .pg-date{font-size:16px} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .card > .ch{padding-bottom:8px;margin-bottom:10px;background:var(--head-line) left bottom / 100% 1px no-repeat} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .card > .ch h2{font-size:21px;gap:10px} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .card > .ch h2 .ms{font-size:26px;color:var(--teal-text)} :is(.pg-sales,.pg-receipts,.pg-goals,.pg-brain,.pg-settings,.pg-invoice,.pg-mail) .ch-r{font-size:14px} } /* --- 設定：見出しを大きく、1行に「名前・説明・切り替え」 --- */ @media (min-width:1024px){ .pg-settings .pg-head > div{display:flex;align-items:baseline;gap:6px 20px;flex-wrap:wrap} .st-card{padding:10px 22px 10px} .st-card h2{font-size:22px;gap:10px;padding-bottom:8px;margin-bottom:2px;background:var(--head-line) left bottom / 100% 1px no-repeat} .st-card h2 .ms{font-size:28px} } /* 設定の1行に「名前・説明・切り替え」を横に並べるのは、広い画面（iMac）だけ。1440 は今までどおり（名前と説明を縦に） */ @media (min-width:1760px){ .st-row{display:grid;grid-template-columns:15em minmax(0,1fr) auto;align-items:center;column-gap:18px;padding:7px 0} .st-row > .st-x{display:contents} .st-row > .st-x > b{font-size:17px;white-space:nowrap} .st-row > .st-x > span{font-size:14px;line-height:1.5} .st-row > .st-c{justify-content:flex-end} } /* --- 目標：目標ごとの枠（番号・大きな割合・棒）、日誌と秘書の知識帳は横に2つ --- */ @media (min-width:1024px){ .pg-goals .gl-grid{gap:14px;counter-reset:gl} .pg-goals .gl-grid .gl{counter-increment:gl;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"t t" "p b" "m m" "c c" "a a";column-gap:16px;align-items:center;padding:12px 18px 12px;border:1px solid var(--frame-line);border-radius:12px;background:rgb(var(--glass-rgb) / .35);box-shadow:var(--frame-shadow)} :root[data-theme="light"] .pg-goals .gl-grid .gl{border-color:var(--line);box-shadow:none} .pg-goals .gl-grid .gl > .gl-h{display:contents} .pg-goals .gl-grid .gl > .gl-h > b{grid-area:t;display:flex;align-items:center;gap:10px;font-size:18px} .pg-goals .gl-grid .gl > .gl-h > b::before{content:counter(gl);flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 Inter,sans-serif;color:var(--on-acc);background:var(--teal-text);box-shadow:0 0 10px rgb(60 220 240 / calc(.5 * var(--glow)))} .pg-goals .gl-grid .gl > .gl-h > .num{grid-area:p;font-family:Inter,'Noto Sans JP',sans-serif;font-size:40px;font-weight:700;line-height:1.15;color:var(--num-big);text-shadow:var(--num-glow)} .pg-goals .gl-grid .gl > .gl-bar{grid-area:b;height:12px;border-radius:6px;margin:0} .pg-goals .gl-grid .gl > .gl-m{grid-area:m;font-size:15px} .pg-goals .gl-grid .gl > .gl-checks{grid-area:c} .pg-goals .gl-grid .gl > .gl-acts{grid-area:a} .pg-goals .gl-grid .gl > .gl-checks{margin-top:2px} .pg-goals .gl-checks .chk-l{min-height:32px;font-size:14.5px} .pg-goals .gl-grid .gl{padding:10px 16px 8px;row-gap:2px} .pg-goals .gl-grid .gl > .gl-m{line-height:1.5} .pg-goals .gl-grid .gl > .gl-m small{display:inline;margin-left:6px} .pg-goals .gl-grid .gl > .gl-acts{margin-top:2px} .pg-goals .goals-c#goals{padding-bottom:14px} .pg-goals .gl-due{font-size:14.5px} .gl-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch} .gl-two > .card{min-width:0} .gl-two .br-tabs{flex-wrap:wrap} } /* --- 領収書：大きな数字の2枚・知らせの枠・1件1行の一覧 --- */ .rc-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px} .rcs{display:flex;align-items:center;gap:16px;padding:8px 24px;text-align:left;color:var(--ink)} .rcs > .ms{font-size:40px;color:var(--teal-text)} .rcs-k{font-size:20px;font-weight:700;color:var(--hl)} .rcs b{margin-left:auto;font-family:Inter,'Noto Sans JP',sans-serif;font-size:48px;font-weight:700;line-height:1.1;color:var(--num-big);text-shadow:var(--num-glow)} .rcs b small{font-size:.5em;margin-left:.1em} button.rcs:disabled{opacity:1;cursor:default} @media (max-width:767.98px){ .rc-stats{gap:10px} .rcs{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px} .rcs > .ms{font-size:26px} .rcs-k{font-size:15px} .rcs b{margin-left:0;font-size:34px} } :root[data-theme="dark"] .pg-receipts .alert{background:var(--frame-bg);border:1px solid var(--frame-line);box-shadow:var(--frame-shadow)} :root[data-theme="dark"] .pg-receipts .alert.warn > .ms{color:var(--gold)} @media (min-width:1024px){ .pg-receipts .alerts{gap:10px} .pg-receipts .alert{padding:8px 20px} .pg-receipts .filt{padding:10px 18px;gap:8px} .pg-receipts .fld input,.pg-receipts .fld select{height:42px} .pg-receipts .rlist{padding:6px 18px} .pg-receipts .rl-head{padding:6px 10px} .pg-receipts .rl-m{margin:0;padding:8px 4px 4px} .pg-receipts .rl-m span{font-size:15px;color:var(--gold)} .pg-receipts .alert b{font-size:18px} .pg-receipts .alert span{font-size:14.5px} .pg-receipts .alert > .ms{font-size:30px} .pg-receipts .rrow{padding:4px 10px;gap:16px} .pg-receipts .rr-x{flex-direction:column} .pg-receipts .rr-m{font-size:14px} .pg-receipts .thumb{width:40px;height:44px} .pg-receipts .rr-x{flex-direction:column;gap:0} .pg-receipts .rr-t{font-size:16px} .pg-receipts .rr-r{flex-direction:row;align-items:center;gap:14px} .pg-receipts .rr-a{font-size:18px;min-width:6.5em;text-align:right} .pg-receipts .rl-head{font-size:15px} .pg-receipts .rl-head b{font-size:17px;color:var(--num-big)} .pg-receipts .rl-m{font-size:19px} } /* --- 営業：いちばん上に「今月の獲得と目標」「月ごとの獲得件数」 --- */ .sl-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px} .sl-acq{padding:16px 24px;display:flex;flex-direction:column;justify-content:center;gap:12px} .sl-nums{display:flex;align-items:flex-end;gap:28px} .sl-nums > div + div{padding-left:28px;border-left:1px solid rgb(var(--hud2-rgb) / .35)} .sl-k{display:block;font-size:17px;font-weight:700;color:var(--hl)} .sl-big{display:block;font-family:Inter,'Noto Sans JP',sans-serif;font-size:56px;font-weight:700;line-height:1.05;color:var(--num-big);text-shadow:var(--num-glow)} .sl-big small{font-size:.5em;margin-left:.08em} .sl-goal{color:var(--hl);text-shadow:none} .sl-bar{display:flex;align-items:center;gap:12px} .sl-bar .sh-bar{flex:1;height:14px;border-radius:7px} .sl-bar .sh-bar i{border-radius:7px} .sl-bar b{font-size:18px;color:var(--hl)} .sl-trend{padding:12px 22px 14px} .sl-trend .bars.one{height:150px} :root[data-theme="dark"] .sl-trend .bfee{background:linear-gradient(180deg,#FFE680,#E8A21E);box-shadow:0 0 10px rgb(255 200 60 / .45)} :root[data-theme="dark"] .sl-trend .bcol:not(.now) .bfee{background:linear-gradient(180deg,var(--teal-text),#1471C9);box-shadow:0 0 8px rgb(51 214 224 / .35)} @media (max-width:1023.98px){ .sl-top{grid-template-columns:1fr} } @media (max-width:767.98px){ .sl-big{font-size:42px} .sl-acq{padding:14px 16px} } @media (min-width:1024px){ .pg-sales .bsw-b{font-size:15.5px} .pg-sales .sec-h{font-size:21px} } /* 棒グラフの今月の列（.bcol.now）に、ホームの古い「.now」の枠の決まり（余白 24px・地・線）が当たって、今月の棒がつぶれていた → 外す（営業・お金の事業ごとの棒） */ .bcol.now{padding:0;border:0;border-radius:0;background:transparent;gap:6px} @media (min-width:1024px){ .pg-receipts .pg-head > div,.pg-goals .pg-head > div{display:flex;align-items:baseline;gap:4px 22px;flex-wrap:wrap;flex:1 1 0;min-width:0} :is(.pg-receipts,.pg-goals,.pg-sales) .pg-head .btn.pri{min-height:50px;padding:0 24px;font-size:18px} .rcs > .ms{font-size:46px} .rcs-k{font-size:24px} .rcs b{font-size:58px} } /* ================= スマホ（mock_phone_2・mock_phone_schedule_1） ================= */ @media (max-width:767.98px){ /* ホーム：あいさつ → 日付と天気 → 太陽 → SUNROAD・波形・状態 → 次の予定 → 社長の発言とサンロードの返答（横に2つ・新しい1件ずつ） → ほかの枠 */ .sh-c{display:contents} .sh-top{order:0} .sh{gap:10px} .sh-core{order:1;height:280px;margin-top:13px} .sh-sunbtn::before{width:var(--sun-cs,300px);height:var(--sun-cs,300px)} /* 外の輪を太陽の箱の中に収める。1.2倍のままだと天気の行と SUNROAD の字を横切る（Mac と同じ比率） */ .sh-name{order:2;font-size:2.15em;margin:10px 0 0} .sh-wave{order:3;width:82%;height:1.6em;margin:0 auto} .sh-state{order:4;margin:0 0 18px} .sh-plan{order:5} .sh-talk{order:6;margin-top:0;grid-template-columns:1fr 1fr;gap:8px} .sh-task{order:7}.sh-sales{order:8}.sh-goal{order:9}.sh-money{order:10}.sh-rc{order:11}#home-invoice-card{order:12}#home-mail-card{order:13}.sh-from{order:14}.sh-rec{order:15}.sh-kb{order:16}.sh-sd{order:17}.sh-set{order:18} .sh-top .hello-l{display:none} .sh-top h1.hello{font-size:1.5em;margin-top:.2em} .sh-tb{min-height:0;padding:.5em .6em .6em} .sh-tb .sh-h{gap:.35em} .sh-tb .sh-h h2{font-size:.98em} .sh-tb .sh-ic .ms{font-size:1.35em} .sh-tb .sh-ic-sun{width:1.5em;height:1.5em} .sh-tb .sh-open{display:none} .sh-tb .tb-r.old{display:none} .sh-tb .tb-r{grid-template-columns:minmax(0,1fr)} .sh-tb .tb-t{display:none} .sh-tb .tb-b,.sh-tb .tb-r.old .tb-b{font-size:13.5px;line-height:1.5;padding:.45em .6em} /* 次の予定：大きな時刻と、名前・あと何分 */ .sh-plan .pl-time{font-size:2.9em} /* 予定の画面：見出しと［追加］を1行に・説明はその下 */ .pg-schedule > .pg-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h b" "d d";align-items:center;column-gap:12px;margin-right:0} .pg-schedule > .pg-head > div{display:contents} .pg-schedule > .pg-head h1{grid-area:h} .pg-schedule > .pg-head .pg-date{grid-area:d;margin-top:2px} .pg-schedule > .pg-head > .btn{grid-area:b;min-height:44px} } @media (min-width:1760px){ .pg-goals .gl-grid .gl > .gl-checks{display:grid;grid-template-columns:1fr 1fr;column-gap:12px} } /* ================= 19回目（2026-10-17 大晴さん）：左のメニュー ================= */ /* 幅はつまんで変えられる（--side-w。app.js の applySideW）。たたんだ時（76px）とホームは今まで通り */ @media (min-width:1024px){ .app:not(.side-min):not(.is-hall){grid-template-columns:var(--side-w,240px) minmax(0,1fr) var(--chat-w,380px)} .app{position:relative} .side-split{position:absolute;top:0;bottom:0;left:calc(var(--side-w,240px) - 6px);width:12px;z-index:5;cursor:col-resize;touch-action:none;outline:none} .side-split::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:2px;border-radius:1px;background:transparent;transition:background .15s} .side-split:hover::before,.side-split:focus-visible::before,body.resizing .side-split::before{background:var(--teal)} .app.side-min .side-split,.app.is-hall .side-split{display:none} } @media (min-width:1024px) and (max-width:1279.98px){ .app:not(.side-min):not(.is-hall){grid-template-columns:var(--side-w,220px) minmax(0,1fr) var(--chat-w,336px)} } @media (max-width:1023.98px){ .side-split{display:none} } /* ロゴの下の線：ロゴと線の間を広く。線と［領収書を撮る］の間＝設定の上の線と［設定］の間（どちらも 14px） */ .side-top{padding-bottom:24px;margin-bottom:14px} .side-nav{margin-bottom:28px} .side-set,:root[data-theme="dark"] .side-set{position:relative;border-top:0;padding-top:0;margin-top:auto;background:none} :root[data-theme="dark"] .side-set.on{background:var(--nav-on-bg)} .side-set::before{content:"";position:absolute;left:0;right:0;top:-15px;height:1px;background:var(--head-line)} .side-min .side-top{padding-bottom:14px} .side-shoot{white-space:nowrap} @media (min-width:1024px) and (max-height:940px){ .side-top{padding-bottom:18px;margin-bottom:12px} .side-nav{margin-bottom:24px} .side-set::before{top:-13px} } /* 設定の「見本の操作（提案の間だけ）」 */ .st-demo-t{display:inline-flex;align-items:center;margin-left:10px;font-style:normal;font-size:13px;font-weight:700;line-height:1;padding:5px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-3);color:var(--sub);letter-spacing:.04em;white-space:nowrap} .st-demo a.btn{text-decoration:none} /* ================= 21回目（2026-10-17 大晴さん）：背景の星（ホームだけ動く） ================= * 地の光と方眼は body に、星は canvas 1枚（#star-cv・app.js の starRun。星を1つずつ、ばらばらの向きと速さで漂わせる）に、周りを暗くする光は body::after に。 * 前の「星の絵を body::before で全体まとめて流す」はやめた（動きが分からない、と大晴さん）。 * body は重なりの層を作り、地の色の上・中身の下に星と周りの暗さを置く（太陽・枠より前に出さない） */ :root[data-theme="dark"] body{position:relative;z-index:0;background-color:var(--page-bg);background-image:radial-gradient(ellipse 56% 52% at 50% 42%,rgba(36,110,190,.36),transparent 72%),linear-gradient(rgba(80,170,230,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(80,170,230,.03) 1px,transparent 1px);background-size:100% 100%,48px 48px,48px 48px;background-attachment:fixed} #star-cv{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block} :root:not([data-theme="dark"]) #star-cv{display:none} :root[data-theme="dark"] body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 125% 105% at 50% 48%,transparent 50%,rgba(0,3,10,.66) 100%)} /* ===== 2026-10-17：すぐ入れた物の吹き出し（「入れました：…」と［取り消す］） ===== */ .cb.did,.ln-bub.did{display:flex;flex-direction:column;align-items:flex-start;gap:8px} .did .did-t{display:flex;align-items:flex-start;gap:6px;line-height:1.55} .did .did-t > .ms{flex:none;font-size:19px;margin-top:2px;color:var(--ok)} .did.undone .did-t{color:var(--sub)} .did.undone .did-t > .ms{color:var(--sub)} .did .did-undo{min-height:36px;gap:4px} .did .did-undo .ms{font-size:18px} .ln-bub.did .did-t > .ms{color:#13784A} /* ================= 話題の画面（2026-10-17 大晴さん：design/mock_focus_3・mock_focus_4 と「余白を使って、タイトル・見てほしい所・補足・メニューを分かりやすく」） ================= * 秘書が具体的な物について話す間、下の画面（ホームの左右の枠・中のページ）が消え、画面いっぱいに話題の物だけを出す（app.js の fvOpen）。 * 4段の階層：①タイトル 46px 太字（件数は金の 58px）／②見てほしい所＝札・時間割（今話している物だけ金色。ほかは落ち着いた水色）／ * ③補足＝元・札の補足・押すとどうなるか（14〜18px・薄く）・字幕（22px）／④メニュー＝札のボタン・戻る（線だけの控えめなボタン）。 * 間隔（iMac 2240 の大きさ。ほかの画面は比率で縮む。--fv-gap）：状態の行→タイトル 48px・タイトル→中身 48px・中身→字幕 48px・札と札 32px（列の間 36px）・ * 札の内側 28px／30px・名前の塊と「押すとどうなるか」の塊は、区切り線の上下 24px ずつ。中身は横幅の 55%（1232px）。社長の問いと［戻る］は下の線（下から 40px）。 * 線はどこも四辺同じ（左端だけ太い線・濃い帯は使わない）。色は見た目の変数だけ（近未来・実務の両方に合う） */ #v-app{transition:opacity .3s ease} body.fv-on #v-app{opacity:0;pointer-events:none} body.fv-on .vband,body.fv-on .hall-drawer{display:none!important} .fv{position:fixed;inset:0;z-index:78;color:var(--ink);--fv-w:1232px;--fv-gap:48px;--fv-line:rgb(var(--hud2-rgb) / .55);--fv-sep:rgb(var(--hud2-rgb) / .22)} .fv-stage{position:absolute;left:0;right:0;top:0;bottom:136px;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:36px 0 0;overflow:hidden} .fv-stage > *{flex:none} /* 小さな太陽と状態 */ .fv-top{display:flex;flex-direction:column;align-items:center} .fv-sunbtn{position:relative;display:block;width:136px;height:136px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer} .fv-sunbtn:focus-visible{outline:2px solid rgb(var(--hud3-rgb) / .8);outline-offset:4px} .core-fv{--cs:136px;position:absolute;inset:0;width:100%;height:100%;display:block} .core-fv::before{content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;background:radial-gradient(circle closest-side,rgb(255 214 120 / calc(.5 * var(--glow))) 0,rgb(255 190 80 / calc(.38 * var(--glow))) 46%,rgb(255 160 50 / calc(.14 * var(--glow))) 56%,rgb(40 160 240 / calc(.14 * var(--glow))) 64%,transparent 80%)} :root[data-theme="dark"] .core-fv{--sun-box:100%} /* 話題の画面は画面の上に重ねた層なので、太陽の絵の黒い地を「スクリーン」で消せない（下に混ぜる物が無い）。円の形で切り、まわりの光は ::before で出す */ .core-fv .sh-sunimg{mix-blend-mode:normal;-webkit-mask:radial-gradient(circle closest-side,#000 60%,transparent 66%);mask:radial-gradient(circle closest-side,#000 60%,transparent 66%)} .core-fv .fv-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .core-fv[data-st="idle"] .sh-sunimg,.core-fv[data-st="await"] .sh-sunimg{animation:sh-sleep 6.5s ease-in-out infinite} .core-fv[data-st="speak"] .sh-sunimg{filter:brightness(1.12);animation:sh-pulse .7s ease-in-out infinite} .core-fv[data-st="listen"] .sh-sunimg,.core-fv[data-st="awake"] .sh-sunimg{filter:brightness(1.05)} .fv-st{margin:14px 0 0;font-size:22px;line-height:1.4} .fv-st b{font-weight:700;letter-spacing:.16em;padding-left:.16em;color:var(--gold-t)} /* ① タイトル */ .fv-head{margin-top:var(--fv-gap);display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:6px 26px;max-width:var(--fv-w);text-align:center} .fv-h{margin:0;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 22px;font-size:46px;line-height:1.25;font-weight:700;letter-spacing:.04em;color:var(--hl);text-shadow:0 0 22px rgb(140 225 255 / calc(.35 * var(--glow)))} .fv-n{font-size:58px;line-height:1;font-weight:700;color:var(--gold);text-shadow:0 0 22px rgb(255 200 60 / calc(.45 * var(--glow)))} .fv-n small{font-size:.5em;margin-left:4px} .fv-src{margin:0;font-size:17px;line-height:1.4;color:var(--sub);letter-spacing:.04em;white-space:nowrap} /* 元：…は、タイトルの右に小さく（物差しの絵と同じ） */ /* ② 見てほしい所（札） */ .fv-body{margin-top:var(--fv-gap);display:flex;justify-content:center;width:var(--fv-w);max-width:100%} .fv-body.scroll{overflow-y:auto;padding:16px 8px;margin-left:-8px;margin-right:-8px;width:calc(var(--fv-w) + 16px);-webkit-mask:linear-gradient(transparent,#000 16px,#000 calc(100% - 24px),transparent);mask:linear-gradient(transparent,#000 16px,#000 calc(100% - 24px),transparent)} .fv-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 36px;width:100%;align-items:stretch} .fv-list.n1{grid-template-columns:minmax(0,600px);justify-content:center} .fv-list.odd > .fv-card:last-child{grid-column:1 / -1;justify-self:center;width:calc((100% - 36px) / 2)} .fv-card,.fv-op,.fv-tt{position:relative;border-radius:var(--frame-r);background:var(--frame-bg);border:1.5px solid var(--fv-line);box-shadow:0 0 0 1px rgb(var(--hud2-rgb) / .06),0 0 16px rgb(var(--hud-rgb) / calc(.2 * var(--glow))),inset 0 0 22px rgb(var(--hud-rgb) / calc(.07 * var(--glow)))} .fv-card{display:flex;flex-direction:column;padding:28px 30px;transition:border-color .35s ease,box-shadow .35s ease,background-color .35s ease} .fv-card.fv-now,.fv-op.fv-now{border-color:rgb(var(--gold-rgb) / .95);background:linear-gradient(rgb(var(--gold-rgb) / .07),rgb(var(--gold-rgb) / .07)),var(--frame-bg);box-shadow:0 0 0 1px rgb(var(--gold-rgb) / .3),0 0 30px rgb(var(--gold-rgb) / calc(.42 * var(--glow))),inset 0 0 26px rgb(var(--gold-rgb) / calc(.1 * var(--glow)))} .fv-tag{position:absolute;left:28px;top:0;transform:translateY(-55%);padding:3px 14px;border-radius:999px;background:var(--gold);color:var(--page-bg);font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.5;white-space:nowrap;opacity:0;transition:opacity .3s ease;pointer-events:none} .fv-now > .fv-tag{opacity:1} .fv-ch{display:flex;align-items:center;gap:18px;min-width:0} .fv-no{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid rgb(var(--hud2-rgb) / .75);background:rgb(var(--hud-rgb) / .08);color:var(--cy-hi);font-size:28px;font-weight:700;font-style:normal;line-height:1;transition:background-color .35s ease,color .35s ease,border-color .35s ease} .fv-card.fv-now .fv-no{border-color:var(--gold);background:var(--gold);color:var(--page-bg);box-shadow:0 0 18px rgb(var(--gold-rgb) / calc(.55 * var(--glow)))} .fv-nm{min-width:0} .fv-nm b{display:block;font-size:26px;line-height:1.3;font-weight:700;color:var(--hl)} .fv-nm span{display:block;margin-top:6px;font-size:18px;line-height:1.45;color:var(--sub)} .fv-cf{display:flex;align-items:center;gap:24px;margin-top:24px;padding-top:24px;border-top:1px solid var(--fv-sep)} .fv-note{flex:1;min-width:0} .fv-note small{display:block;margin:0 0 6px;font-size:14px;line-height:1.4;letter-spacing:.04em;color:var(--sub)} .fv-note p{margin:0;font-size:17px;line-height:1.5;color:var(--ink);opacity:.9} /* ④ メニュー（札の中のボタン・戻る）：線だけの控えめなボタン。押せる事は分かる */ .fv-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:52px;padding:0 16px 0 24px;border-radius:12px;border:1.5px solid rgb(var(--hud3-rgb) / .7);background:rgb(var(--hud-rgb) / .06);color:var(--cy-hi);font-size:19px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease} .fv-btn .ms{font-size:24px} .fv-btn:hover{background:rgb(var(--hud-rgb) / .16)} .fv-btn:focus-visible,.fv-back:focus-visible,.fv-undo:focus-visible{outline:2px solid var(--cy-hi);outline-offset:3px} .fv-now .fv-btn{border-color:rgb(var(--gold-rgb) / .9);color:var(--gold-t);background:rgb(var(--gold-rgb) / .08)} .fv-now .fv-btn:hover{background:rgb(var(--gold-rgb) / .18)} .fv-btn.sm{min-height:46px;padding:0 16px;font-size:16px;letter-spacing:.02em} .fv-btn.wide{width:100%;margin-top:20px;min-height:56px} .fv-ans{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end} .fv-did{flex:none;display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--ok)} .fv-did .ms{font-size:24px} .fv-did.off{color:var(--sub);font-weight:500} .fv-undo{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin-left:8px;padding:0 12px;border-radius:10px;border:1px solid rgb(var(--hud3-rgb) / .5);background:transparent;color:var(--cy-ink);font-size:15px;font-weight:500;cursor:pointer} .fv-undo .ms{font-size:18px} .fv-card.done{border-color:rgb(var(--ok-rgb) / .55)} .fv-card.done .fv-no{border-color:rgb(var(--ok-rgb) / .7);color:var(--ok);background:rgb(var(--ok-rgb) / .08)} .fv-card.off{opacity:.62} /* 札が5件以上：札を詰める（それでも入らない時は、中身の中だけスクロール） */ .fv-list.many{gap:22px 28px} .fv-list.many .fv-card{padding:20px 24px} .fv-list.many .fv-no{width:46px;height:46px;font-size:23px} .fv-list.many .fv-nm b{font-size:23px} .fv-list.many .fv-cf{margin-top:16px;padding-top:16px} .fv.tight .fv-stage{--fv-gap:36px} /* ③ 補足：字幕（読みやすい大きさ。話している所まで明るく） */ .fv-cap{margin:var(--fv-gap) 0 0;min-width:720px;max-width:var(--fv-w);min-height:64px;padding:14px 40px;border-radius:32px;border:1px solid rgb(var(--hud2-rgb) / .38);background:rgb(var(--glass-rgb) / .55);font-size:22px;line-height:1.6;text-align:center;color:var(--cy-ink)} .fv-cap.empty{visibility:hidden} .fv-cr{color:var(--hl);text-shadow:0 0 14px rgb(140 225 255 / calc(.35 * var(--glow)))} .fv-cap.live .fv-cu{opacity:.6} /* 下の線：社長の問い（左）と［戻る］（右） */ .fv-foot{position:absolute;left:48px;right:48px;bottom:40px;display:flex;align-items:center;justify-content:space-between;gap:32px;min-height:56px} .fv-me{display:flex;align-items:center;gap:12px;min-width:0;margin:0;font-size:18px;line-height:1.45;color:var(--sub)} .fv-me .ms{flex:none;font-size:28px;color:var(--cy)} .fv-me span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fv-me em{font-style:normal;color:var(--cy-ink)} .fv-back{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px 0 22px;border-radius:28px;border:1.5px solid rgb(var(--hud3-rgb) / .65);background:rgb(var(--glass-rgb) / .5);color:var(--hl);font-size:19px;font-weight:700;letter-spacing:.06em;cursor:pointer} .fv-back .ms{font-size:26px;color:var(--cy-hi)} .fv-back:hover{background:rgb(var(--hud-rgb) / .14)} /* 1日の予定：時間割（左）と操作の札（右・2つまで） */ .fv-day{display:flex;align-items:flex-start;justify-content:center;gap:32px;width:100%} .fv-tt{flex:1 1 auto;min-width:0;padding:22px 28px 22px 22px} .fv-day.solo .fv-tt{flex:0 1 1000px} .fv-ops{flex:0 0 340px;display:flex;flex-direction:column;gap:28px} .fv-all{display:flex;align-items:center;gap:8px;margin:0 0 10px 92px;font-size:16px;color:var(--sub)} .fv-all .ms{font-size:20px;color:var(--cy)} .fv-grid{--hr:64px;position:relative;height:calc(var(--n) * var(--hr));margin:14px 0 14px 92px} .fv-grid::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px solid rgb(var(--hud2-rgb) / .5)} .fv-hr{position:absolute;left:-92px;width:76px;transform:translateY(-50%);text-align:right;font-size:17px;font-weight:600;line-height:1;color:var(--sub)} .fv-hl{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgb(var(--hud2-rgb) / .22)} .fv-hl::before{content:"";position:absolute;left:-5px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--cy);box-shadow:0 0 8px rgb(var(--hud-rgb) / calc(.7 * var(--glow)))} .fv-ev,.fv-band{position:absolute;left:18px;right:0;display:flex;align-items:center;gap:0;min-height:38px;padding:0 14px 0 0;border-radius:10px;overflow:hidden;box-sizing:border-box} .fv-ev{z-index:1;border:1.5px solid rgb(var(--hud2-rgb) / .55);background:rgb(var(--glass-rgb) / .85);background-image:linear-gradient(rgb(var(--hud-rgb) / .1),rgb(var(--hud-rgb) / .1));transition:border-color .35s ease,box-shadow .35s ease} .fv-ev.priv{border-color:rgb(var(--priv-rgb) / .6);background-image:linear-gradient(rgb(var(--priv-rgb) / .16),rgb(var(--priv-rgb) / .16))} .fv-ev.l1{right:calc(50% + 4px)} .fv-ev.l2{left:calc(50% + 13px)} .fv-et,.fv-bt{flex:none;width:172px;padding:0 0 0 16px;font-size:17px;font-weight:600;white-space:nowrap} .fv-et{color:var(--cy-hi)} .fv-ev.priv .fv-et{color:var(--priv-text)} .fv-ex{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;padding-left:16px;border-left:1px solid var(--fv-sep);white-space:nowrap;overflow:hidden} .fv-ex b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:18px;font-weight:700;color:var(--hl)} .fv-ex small{flex:0 3 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:var(--sub)} .fv-mk{flex:none;margin-left:12px;padding:3px 12px;border-radius:999px;border:1px solid rgb(var(--hud3-rgb) / .6);font-size:14px;font-weight:700;font-style:normal;line-height:1.5;color:var(--cy-ink);white-space:nowrap} .fv-ev.fv-now{border-color:rgb(var(--gold-rgb) / .95);box-shadow:0 0 22px rgb(var(--gold-rgb) / calc(.4 * var(--glow)))} .fv-ev.fv-now .fv-mk{border-color:var(--gold);background:var(--gold);color:var(--page-bg)} .fv-band{z-index:2;border:2px dashed rgb(var(--gold-rgb) / .8);background:rgb(var(--gold-rgb) / .08);transition:box-shadow .35s ease,background-color .35s ease} .fv-bt{color:var(--gold-t);font-weight:700} .fv-bl{flex:none;padding:3px 14px;border-radius:999px;background:rgb(var(--gold-rgb) / .92);color:var(--page-bg);font-size:15px;font-weight:700;font-style:normal;line-height:1.5;white-space:nowrap} .fv-band.fv-now{background:rgb(var(--gold-rgb) / .16);box-shadow:0 0 24px rgb(var(--gold-rgb) / calc(.45 * var(--glow)))} .fv-empty{position:absolute;left:24px;top:50%;margin:0;transform:translateY(-50%);font-size:18px;color:var(--sub)} .fv-op{padding:24px 24px 24px;transition:border-color .35s ease,box-shadow .35s ease} .fv-op .fv-tag{left:22px} .fv-oh{display:flex;align-items:flex-start;gap:14px} .fv-oh > .ms{flex:none;font-size:34px;color:var(--cy-hi);margin-top:2px} .fv-op.fv-now .fv-oh > .ms{color:var(--gold)} .fv-oh b{display:block;font-size:22px;line-height:1.35;font-weight:700;color:var(--hl)} .fv-oh span{display:block;margin-top:4px;font-size:16px;line-height:1.45;color:var(--sub)} .fv-onote{margin:14px 0 0;font-size:16px;line-height:1.5;color:var(--ink);opacity:.9} .fv-op .fv-did{margin-top:18px} /* 36回目：声で書いた物の話題の画面。話していない所の光（書いた物と重なる物）は、色と線は今の光のまま、「いま話している」の札だけ出さない。 * 右の結果の札は「変えました（10:00→14:00）」と［取り消す］が1行に入らない時、［取り消す］を次の行へ（言葉は途中で折らない） */ .fv.fv-calm .fv-tag{opacity:0} .fv-op.wr .fv-did{flex-wrap:wrap;row-gap:10px} .fv-op.wr .fv-did > span{word-break:keep-all;overflow-wrap:normal} .fv-op.wr .fv-undo{margin-left:0} /* 補足（時刻・お客様対応（工事）・お客様の名前）は「・」の所で折る（かたまりの途中で折らない） */ .fv-pt,.fv-oh span .fv-pt,.fv-nm span .fv-pt{display:inline-block;max-width:100%;margin:0;font-size:inherit;line-height:inherit;color:inherit} /* 重なる予定（横に2列）の行：件名を1段目、時刻と札を2段目に（札に押し出されて件名が見えなくなっていた） */ .fv-ev.l1,.fv-ev.l2{flex-wrap:wrap;align-content:center;column-gap:10px;row-gap:2px;padding:4px 12px 4px 14px} .fv-ev.l1 .fv-ex,.fv-ev.l2 .fv-ex{order:-1;flex:1 0 100%;padding-left:0;border-left:0;line-height:1.25} .fv-ev.l1 .fv-ex small,.fv-ev.l2 .fv-ex small{display:none} .fv-ev.l1 .fv-et,.fv-ev.l2 .fv-et{width:auto;padding:0;font-size:15px;line-height:1.3} .fv-ev.l1 .fv-mk,.fv-ev.l2 .fv-mk{margin-left:auto;padding:1px 10px;font-size:13px;line-height:1.4} /* 切り替わり方：下の画面がふわっと消え（#v-app）、太陽は小さくなって上へ（app.js の fvEnter）、中身が現れる（0.5秒ほど） */ .fv .fv-st,.fv .fv-head,.fv .fv-body,.fv .fv-cap,.fv .fv-foot{opacity:0;transform:translateY(16px);transition:opacity .36s ease .14s,transform .5s cubic-bezier(.2,.7,.2,1) .14s} .fv.in .fv-st,.fv.in .fv-head,.fv.in .fv-body,.fv.in .fv-cap,.fv.in .fv-foot{opacity:1;transform:none} .fv.out{opacity:0;transition:opacity .24s ease} @media (prefers-reduced-motion:reduce){ #v-app,.fv,.fv *{transition:none!important;animation:none!important} } /* スマホ（横 1024 未満）：画面いっぱいの1列（札を縦に）。下の線に社長の問いと［戻る］ */ @media (max-width:1023.98px){ .fv{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;--fv-gap:22px} .fv-stage{position:static;flex:1 0 auto;justify-content:flex-start;padding:calc(18px + env(safe-area-inset-top)) 16px 20px;overflow:visible} .fv-sunbtn{width:76px;height:76px} .core-fv{--cs:76px} .fv-st{margin-top:6px;font-size:15px} .fv-head{max-width:100%;flex-direction:column;align-items:center} .fv-h{font-size:24px;gap:2px 10px} .fv-n{font-size:32px} .fv-src{font-size:13px} .fv-body,.fv-body.scroll{width:100%;max-height:none!important;overflow:visible;padding:0;margin-left:0;margin-right:0;-webkit-mask:none;mask:none} .fv-list,.fv-list.many{grid-template-columns:minmax(0,1fr);gap:18px} .fv-list.odd > .fv-card:last-child{width:auto} .fv-card,.fv-list.many .fv-card{padding:18px} .fv-tag{left:16px;font-size:12px;padding:2px 10px} .fv-ch{gap:12px} .fv-no,.fv-list.many .fv-no{width:40px;height:40px;font-size:20px} .fv-nm b,.fv-list.many .fv-nm b{font-size:18px} .fv-nm span{margin-top:2px;font-size:14px} .fv-cf,.fv-list.many .fv-cf{margin-top:14px;padding-top:14px;gap:12px} .fv-note small{font-size:12px;margin-bottom:2px} .fv-note p{font-size:14px} .fv-btn{min-height:44px;padding:0 10px 0 14px;font-size:16px} .fv-btn .ms{font-size:20px} .fv-did{font-size:15px} .fv-cap{min-width:0;min-height:0;padding:10px 16px;border-radius:16px;font-size:16px;max-width:100%} .fv-foot{flex:none;position:sticky;left:auto;right:auto;bottom:0;z-index:2;gap:12px;min-height:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--page-bg);border-top:1px solid var(--fv-sep)} .fv-me{font-size:13px;gap:6px} .fv-me .ms{font-size:20px} .fv-back{min-height:44px;padding:0 16px 0 12px;border-radius:22px;font-size:15px;gap:6px} .fv-back .ms{font-size:20px} .fv-day{flex-direction:column;gap:16px} .fv-tt,.fv-day.solo .fv-tt{flex:none;width:100%;padding:12px 12px 12px 8px} .fv-ops{flex:none;width:100%;gap:16px} .fv-grid{--hr:52px;margin:10px 0 10px 50px} .fv-all{margin-left:50px;font-size:13px} .fv-hr{left:-50px;width:42px;font-size:13px} .fv-ev,.fv-band{left:10px;min-height:30px;padding-right:8px} .fv-et,.fv-bt{width:auto;padding:0 10px;font-size:13px} .fv-ex{gap:6px;padding-left:10px} .fv-ex b{font-size:14px} .fv-ex small{display:none} .fv-mk,.fv-bl{font-size:11px;padding:1px 8px} .fv-op{padding:18px} .fv-oh b{font-size:17px} .fv-oh > .ms{font-size:26px} /* 36回目：札（入れました・重なっています）のある行は、件名を1段目・時刻と札を2段目に。横に2列の時は時刻を出さない（入らないため。時刻は左の目盛りと結果の札にある） */ .fv-ev:has(.fv-mk){flex-wrap:wrap;align-content:center;column-gap:8px;row-gap:1px;padding:3px 8px 3px 10px} .fv-ev:has(.fv-mk) .fv-ex{order:-1;flex:1 0 100%;padding-left:0;border-left:0;line-height:1.25} .fv-ev:has(.fv-mk) .fv-et{padding:0;line-height:1.25} .fv-ev:has(.fv-mk) .fv-mk{margin-left:auto} .fv-ev.l1 .fv-et,.fv-ev.l2 .fv-et{font-size:13px} .fv-ev.l1 .fv-mk,.fv-ev.l2 .fv-mk{font-size:11px;padding:1px 8px} .fv-ev.l1:has(.fv-mk) .fv-et,.fv-ev.l2:has(.fv-mk) .fv-et{display:none} .fv-ev.l1,.fv-ev.l2{padding:3px 8px 3px 10px} /* 声で書いた結果の画面：結果の札（入れました・［取り消す］）を時間割の上に（開いてすぐ見える所に） */ .fv-day.wr .fv-ops{order:-1} } /* ===== 2026-10-17：設定の「話し方」（呼び方を自由に書く欄） ===== */ .st-callw{display:flex;flex-direction:column;align-items:flex-end;gap:10px} .st-call{display:flex;align-items:center;gap:8px} .st-call input{width:220px;max-width:100%;min-height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line-3);background:var(--field);color:var(--ink);font:inherit;font-size:15px} .st-call input:focus-visible{outline:2px solid var(--cy-hi);outline-offset:2px} @media (max-width:767.98px){ .st-callw{align-items:stretch} .st-call input{flex:1;width:auto} } /* ===== 2026-10-17 大晴さんの決定（案A）：Mac のホームの領収書の枠 ===== * 左：大きな数字1つ（確認待ち・補足「約◯分で確かめられます」・押すと確かめる）／右：小さな数字3つを同じ形で縦に（ラベルは左・数字は右端でそろえる）／区切り線の下：小さなボタン2つ。 * 大きな数字は1つだけ（対比）・小さな3つは同じ形（反復・整列）。重なりかもは1件以上の時だけ注意の色（金）。数字は押せない（開くのは下のボタン2つ）。スマホは今まで通り */ @media (max-width:1023.98px){ .sh-rc .rc-act,.sh-rc .rc-dup,.sh-rc .rc-sum,.sh-rc .rc-note{display:none} .sh-rc .rc-side{display:contents} } @media (min-width:1024px){ .sh-rc .rc-nums{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);column-gap:0;align-items:stretch} .sh-rc .rc-nums > .rc-n{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-right:15px} .sh-rc .rc-note{display:block;margin-top:var(--row);font-size:var(--f-note);line-height:1.45;color:var(--sub);white-space:nowrap} .sh-rc .rc-side{display:flex;flex-direction:column;justify-content:center;gap:var(--row);padding-left:15px;border-left:1px solid var(--sep-c)} .sh-rc .rc-s,.sh-rc .rc-side > .road-line.rc-s{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;width:100%} .sh-rc .rc-s .sh-k{display:block;font-size:var(--f-lab);font-weight:500;line-height:1.4;color:var(--sub);letter-spacing:.02em;white-space:nowrap} .sh-rc .rc-s b,.sh-rc .rc-side > .road-line.rc-s b{font-size:var(--f-body);line-height:1.45;font-weight:700;color:var(--hl);text-shadow:none;white-space:nowrap} .sh-rc .rc-s b small,.sh-rc .rc-side > .road-line.rc-s b small{font-size:.78em;font-weight:700;margin-left:.08em} .sh-rc .rc-dup.warn .sh-k,.sh-rc .rc-dup.warn b{color:var(--gold)} .sh-rc .rc-act{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--sep);padding-top:var(--sep);border-top:1px solid var(--sep-c)} .sh-rc .rc-act .btn{min-height:40px;padding:0 10px;gap:6px;font-size:var(--f-note);font-weight:600;white-space:nowrap;justify-content:center} .sh-rc .rc-act .btn .ms{font-size:18px} .sh-rc .rc-act .btn[disabled]{opacity:.5} } /* ===== 2026-10-19 大晴さん「1」：1件の小窓（全画面で同じ部品 popView・同じ閉じ方） ===== * 見出しの［開く］＝詳しいページへ／1件の行を押す＝その1件の小窓（ページは移らない）／数字は押せない */ .pop-bd .ev-dl dd{min-width:0} .pop-prog{display:flex;align-items:baseline;gap:10px} .pop-prog b{font-size:17px;font-weight:700} .pop-pct{font-size:14px;color:var(--sub)} .pop-bar{display:block;height:8px;margin-top:8px;border-radius:4px;background:var(--line-2);overflow:hidden} .pop-bar i{display:block;height:100%;border-radius:4px;background:var(--teal-deep)} .pop-chk{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none} .pop-chk li{display:flex;align-items:baseline;gap:6px} .pop-chk li .ms{font-size:18px;color:var(--teal-text);align-self:center} .pop-chk li i{font-style:normal;color:var(--sub)} .pop-chk li:not(.on){color:var(--sub)} .pop-txt{font-size:15px;line-height:1.7} .pop-bd .ev-dl + .pop-txt{margin-top:14px} /* 押すと1件の小窓が出る行（お知らせ・最近の動き・出来事の記録） */ .nt-mini li[data-act],.rec-l li[data-act],.lg-row[data-act]{cursor:pointer} .nt-mini li[data-act]:hover .sh-lt b,.rec-l li[data-act]:hover .sh-lt{text-decoration:underline;text-decoration-color:rgb(var(--fg-rgb) / .35)} .lg-row[data-act]{border-radius:6px} .lg-row[data-act]:hover{background:var(--card-2)} /* ===== 2026-10-19 大晴さん「★」：覚えている事の行・経費の明細の行も、1件の小窓 ===== */ .kb-l li[data-act]{cursor:pointer} .kb-l li[data-act]:hover .sh-lt{text-decoration:underline;text-decoration-color:rgb(var(--fg-rgb) / .35)} .tbl tr.lg-tr{cursor:pointer} .tbl tr.lg-tr:hover td{background:var(--card-2)} .tbl tr.lg-tr:focus-visible{outline:2px solid var(--cy);outline-offset:-2px} /* ===== 2026-10-19 大晴さん「★」：松阪のグループ LINE を秘書が見る（見本） ===== * 左：グループのトーク（吹き出し）／右：秘書が見つけた物（札）。上の切り替えで「秘書の頭に渡した形」（置き換えた文）を見せる */ .gp-sm{margin-left:6px;padding:1px 6px;border-radius:6px;font-size:11px;font-weight:700;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3)} .gp-badge{min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--badge-bg);color:var(--badge-ink)} .pg-group .card{padding:20px 22px} .gp-sample{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:3px 10px;border-radius:8px;font-size:12.5px;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-2)} .gp-sample .ms{font-size:16px} .gp-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 14px} .gp-at{margin-left:auto;font-size:13px;color:var(--sub)} .gp-note{display:flex;align-items:center;gap:6px;margin:-4px 0 12px;font-size:13px;color:var(--warn)} .gp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start} .gp-left{display:flex;flex-direction:column;gap:20px;min-width:0} .gp-talk{display:flex;flex-direction:column;gap:10px;padding:4px 0} .gp-day{display:flex;justify-content:center;margin:4px 0} .gp-day span{padding:2px 12px;border-radius:999px;font-size:12px;color:var(--sub);background:var(--card-2)} .gp-msg{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:4px 10px;align-items:end;border-radius:12px;padding:2px;transition:background .3s} .gp-msg.hit{background:rgb(var(--hud-rgb, 51 214 224) / .14)} .gp-av{grid-row:1 / span 2;align-self:start;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff} .gp-av.m0{background:#3C7D8F}.gp-av.m1{background:#8A6A2E}.gp-av.m2{background:#6B5A8E} .gp-col{min-width:0;display:flex;flex-direction:column;gap:3px} .gp-who{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--sub)} .gp-n{min-width:20px;height:18px;padding:0 5px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3)} .gp-bub{align-self:flex-start;max-width:100%;padding:9px 13px;border-radius:4px 14px 14px 14px;background:var(--card-2);color:var(--ink);font-size:14.5px;line-height:1.6;box-shadow:inset 0 0 0 1px var(--line-2);overflow-wrap:anywhere} .gp-t{grid-column:3;align-self:end;font-size:11.5px;color:var(--sub);padding-bottom:4px} .gp-pi{text-decoration:underline dotted;text-decoration-color:var(--cy);text-underline-offset:3px;text-decoration-thickness:2px} .gp-ph{padding:0 5px;border-radius:5px;font-weight:700;color:var(--cy-ink);background:rgb(var(--hud-rgb, 51 214 224) / .16);box-shadow:inset 0 0 0 1px rgb(var(--hud-rgb, 51 214 224) / .45)} .gp-ph.k-member{color:var(--sub);background:transparent;box-shadow:inset 0 0 0 1px var(--line-3)} .gp-talkc.masked .gp-bub{font-family:inherit} .gp-mt td,.gp-mt th{font-size:13.5px} .gp-lead{font-size:13.5px;color:var(--sub);line-height:1.65;margin:-2px 0 14px} .gp-cards{display:flex;flex-direction:column;gap:12px} .gp-card{padding:14px 16px;border-radius:14px;background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2)} .gp-card.decided{opacity:.72} .gp-ch{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .gp-type{flex:none;padding:2px 8px;border-radius:6px;font-size:12px;font-weight:700;color:var(--teal-text);background:var(--teal-soft)} .gp-type.t-event{color:var(--blue-ink);background:var(--blue-bg)} .gp-type.t-task{color:var(--warn);background:var(--warn-bg)} .gp-tt{font-size:16px;font-weight:700;color:var(--hl);line-height:1.45} .gp-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin-top:10px;font-size:14px} .gp-dl dt{display:flex;align-items:center;gap:6px;color:var(--sub);font-size:13px;white-space:nowrap} .gp-dl dt .ms{font-size:17px} .gp-dl dd{min-width:0;line-height:1.55} .gp-srcs{display:flex;flex-direction:column;align-items:flex-start;gap:4px} .gp-from{display:inline-flex;align-items:baseline;gap:6px;max-width:100%;padding:0;background:transparent;border:0;color:var(--ink);font-size:13.5px;text-align:left;cursor:pointer} .gp-from .num{flex:none;min-width:20px;height:18px;padding:0 5px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3)} .gp-from:hover{text-decoration:underline;text-decoration-color:var(--cy)} .gp-b{display:flex;justify-content:flex-end;gap:8px;margin-top:12px} .gp-st{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;color:var(--sub)} .gp-st.ok{color:var(--ok)} .gp-busy{display:flex;align-items:center;gap:8px;padding:18px 4px;color:var(--sub);font-size:14px} @media (max-width:1023.98px){ .gp-grid{grid-template-columns:1fr} } @media (max-width:767.98px){ .pg-group .card{padding:16px} .gp-at{margin-left:0;width:100%} .gp-seg{width:100%} .gp-seg button{flex:1;padding:0 8px;font-size:13px} } /* ===== 2026-10-19：話題の画面の札に大きな数字を1つ（お金・領収書の枚数・件数など。声の答えを話題の画面1つにそろえた） ===== */ .fv-nm{flex:1} .fv-big{flex:none;margin-left:auto;font-size:40px;line-height:1.1;font-weight:700;color:var(--gold-t, var(--gold));letter-spacing:.01em;white-space:nowrap} .fv-list.many .fv-big{font-size:32px} .fv-now .fv-big{color:var(--gold-hi, var(--gold))} @media (max-width:767.98px){ .fv-big,.fv-list.many .fv-big{font-size:24px} } /* ===== 2026-10-19 大晴さん：ホームのお金の棒グラフ（「10月」の文字が右で切れない・月の文字と棒の間をほんの少し空ける） ===== */ .sh-money .mo-bars{padding-right:.25em} .sh-money .hb em{bottom:-1.65em} /* ===== 2026-10-19 大晴さん：左のメニューの下（中のページ）。設定の上の線・［設定］・状態の箱の間を、上の線と同じ決まり（線と［領収書を撮る］の間＝14px）にそろえる。 * ［設定］の枠の形（角の丸み）は、ほかのメニューの項目と同じ（選んでいる時も同じ形） */ .nav-b.side-set{border-radius:12px;margin-bottom:14px} .gp-back{display:inline-flex;align-items:center;gap:2px;margin:0 0 4px -4px;font-size:14px;font-weight:700} .gp-back .ms{font-size:20px} /* ===== 2026-10-19：設定の「声」：今日の読み上げの文字数と、この Mac に男性の声が無い時の知らせ ===== */ .st-x .st-tts,.st-x .st-warn{display:block;margin-top:4px;font-size:12.5px;line-height:1.5} .st-x .st-tts{color:var(--sub)} .st-x .st-warn{color:var(--warn);font-weight:700} /* ===== ホームの右上の［設定］（2026-10-19 32回目）===== * 真ん中の列の右上（お金の枠の左。枠の上の線とそろえる）。部品は「名前で呼んで起こせるようにする」の札と同じ（細い線・同じ色・同じ字）。 * Mac の広い画面（1024 以上）だけ。スマホ（768 未満）は今の歯車（.pg-gear）のまま。ホームの比率（min(横÷2240, 高さ÷1260)）の中に置く */ .sh-setbtn{display:none} @media (min-width:1024px){ .sh-c{position:relative} .sh .sh-setbtn{position:absolute;top:0;right:0;z-index:2;display:inline-flex;align-items:center;gap:.35em;min-height:40px;padding:0 1.05em 0 .85em;border-radius:999px;font-size:max(15px,.9em);font-weight:500;letter-spacing:.04em;color:var(--cy-ink);background:rgb(var(--hud2-rgb) / .10);border:1px solid rgb(var(--hud3-rgb) / .55);box-shadow:0 0 10px rgb(60 220 240 / calc(.22 * var(--glow)));white-space:nowrap} .sh .sh-setbtn .ms{font-size:1.25em;color:var(--cy)} .sh .sh-setbtn:hover{background:rgb(var(--hud2-rgb) / .2);color:var(--hl)} .sh .sh-setbtn:focus-visible{outline:2px solid var(--cy);outline-offset:2px} } /* ===== LINE：本物に近いスマホの絵（2026-10-19 33回目。LP〔fv-line-guide〕の .device と同じ作り。大晴さんが LP で OK を出した本体の枠）===== * スマホの幅（600 以下）は今どおり画面いっぱい。それより広い幅は全部この絵（35回目：601〜1099 も。大晴さん了承。左の説明が出ない幅は、絵だけを真ん中に）。光の線・模様などの飾りは足さない。 * 画面の幅は今と同じ 390px（トークとメニューが今と同じ大きさで読める）。高さは画面に収め、下に本体の影の分（約60px）を空ける */ .ln-status,.ln-home{display:none} @media (min-width:600.02px){ .ln-wrap{align-items:flex-start} .ln-device{position:relative;flex:none;padding:10px;border-radius:48px;background:#1f2226;box-shadow:inset 0 0 0 1.5px #34383d,0 40px 80px -36px rgba(10,20,35,.6)} .ln-device::before,.ln-device::after{content:"";position:absolute;background:#1f2226;border-radius:2px} .ln-device::before{left:-3px;top:120px;width:3px;height:54px;box-shadow:0 70px 0 #1f2226} .ln-device::after{right:-3px;top:150px;width:3px;height:78px} .ln-device .ln-frame{width:390px;height:min(844px,calc(var(--vh,100dvh) - var(--strip) - 104px));max-height:none;min-height:0;border-radius:38px;box-shadow:none} .ln-status{position:relative;flex:none;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;background:#9CB1D4;color:#14202B;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} .ln-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:86px;height:24px;border-radius:999px;background:#111316} .ln-st-ic{display:flex;gap:3px} .ln-st-ic .ms{font-size:15px;color:#14202B} .ln-home{flex:none;height:18px;display:grid;place-items:center;background:#fff} .ln-home span{width:108px;height:4px;border-radius:999px;background:#1f2226} } /* Q 版のメニューの絵は暗い地なので、読み込む前の地の色も暗くする */ .ln-rm2.q{background-color:#0A1621;border-top-color:#0A1621} /* ===== 38回目（2026-10-19）：ホームの［見本］・見本の操作の小窓・LINE の見本の移り先 ===== * Mac の広い画面（1024 以上）：［設定］の左に、同じ部品・同じ見た目の［見本］（2つを右上に並べる。ホームの比率の中に置く）。 * スマホ（768 未満）：歯車（右上）と左右対の左上に［見本］（歯車と同じ形・同じ色。ホームだけ）。押すと見本の操作の小窓（1件の小窓の部品 popView）。 * LINE の見本：スマホの絵の外に［専用画面へ］［ご提案書へ］。広い幅（1100 以上）は左の説明の下、説明が出ない中くらいの幅（601〜1099）は絵の下。スマホの幅（600 以下）は置かない */ .sh-topbtns{display:none} @media (min-width:1024px){ .sh .sh-topbtns{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:center;gap:.6em} .sh .sh-topbtns .sh-setbtn{position:static} } .pg-demo{display:none} @media (max-width:767.98px){ .pg-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;position:absolute;top:14px;left:12px;z-index:3;width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--sub);font-size:13px;font-weight:700;line-height:1} .pg-demo .ms{font-size:18px} .hall .pg-demo,.pg-home > .pg-demo{background:rgb(var(--glass-rgb) / .8);border-color:rgb(var(--hud-rgb) / .35);color:var(--teal-ink)} } /* 見本の操作の小窓：3つの行（名前と1行の説明・押すとその動き） */ .pop-list{display:flex;flex-direction:column;gap:10px} .pop-li{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px 12px 16px;border-radius:var(--r12);background:var(--card);border:1px solid var(--line);color:var(--ink);text-align:left;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease)} .pop-li:hover{background:var(--card-2);border-color:var(--line-3)} .pop-li:focus-visible{outline:2px solid var(--cy);outline-offset:2px} .pop-li > .ms:first-child{flex:none;font-size:24px;color:var(--teal-text)} .pop-li > .ms:last-child{flex:none;margin-left:auto;font-size:20px;color:var(--sub)} .pop-li-t{display:flex;flex-direction:column;gap:3px;min-width:0} .pop-li-t b{font-size:15px;font-weight:700;letter-spacing:.02em} .pop-li-t small{font-size:13px;color:var(--sub);line-height:1.55} /* LINE の見本の移り先（［専用画面へ］［ご提案書へ］）は、41回目に外した（いちばん上の見本のバーと同じ役目のため。絵の下の段の分、絵を低くしていた決まりも外した） */ /* ===== 41回目（2026-10-20 大晴さん）：話題の画面の、確かめ待ちの領収書の一覧 ===== * 頭が札の ref を receipts にした時、その札の中に確かめ待ちの全部を1枚1行で（日付・お店・金額・科目の候補・印）。札は横いっぱい（1枚の時は 1040px）。 * 列は見出し・行・合計で同じ（金額は右でそろえる）。8枚がスクロールなしで入る高さ（1行 44px）。10枚を超える時だけ一覧の中でスクロール。 * 読み上げで触れた行（お店の名前・日付・金額）は金色（線は四辺同じ） */ .fv-list.n1.rcl{grid-template-columns:minmax(0,1040px)} .fv-card.fv-rcard{grid-column:1 / -1} .fv-rc{margin-top:22px} .fv-rc-h,.fv-rc-r,.fv-rc-s{display:grid;grid-template-columns:72px minmax(0,1fr) 132px 236px 176px;column-gap:20px;align-items:center} .fv-rc-h{padding:0 14px 8px;font-size:14px;letter-spacing:.06em;color:var(--sub);border-bottom:1px solid var(--fv-sep)} .fv-rc-h .r,.fv-rc-y{text-align:right} .fv-rc-l{list-style:none;margin:0;padding:6px 0 0;max-height:calc(10 * 44px + 6px);overflow-y:auto} .fv-rc-r{min-height:42px;padding:3px 14px;border:1px solid transparent;border-radius:10px;font-size:18px;line-height:1.35;transition:background-color .3s ease,border-color .3s ease} .fv-rc-r + .fv-rc-r{margin-top:2px} .fv-rc-d{font-weight:600;color:var(--cy-hi);white-space:nowrap} .fv-rc-p{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:var(--hl)} .fv-rc-y{font-weight:700;color:var(--hl);white-space:nowrap} .fv-rc-c{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .fv-rc-c i{font-style:normal;margin-right:8px;padding:1px 8px;border-radius:6px;border:1px solid rgb(var(--hud3-rgb) / .45);font-size:13px;letter-spacing:.04em;color:var(--sub)} .fv-rc-f{display:flex;flex-wrap:wrap;gap:6px} .fv-rc-mk{padding:2px 10px;border-radius:999px;border:1px solid rgb(var(--hud3-rgb) / .6);font-size:14px;font-weight:700;line-height:1.5;color:var(--cy-ink);white-space:nowrap} .fv-rc-mk.warn{border-color:rgb(var(--gold-rgb) / .85);color:var(--gold-t)} .fv-rc-r.fv-rc-now{border-color:rgb(var(--gold-rgb) / .9);background:rgb(var(--gold-rgb) / .12)} .fv-rc-r.fv-rc-now .fv-rc-p,.fv-rc-r.fv-rc-now .fv-rc-y,.fv-rc-r.fv-rc-now .fv-rc-d{color:var(--gold-t)} .fv-rc-s{margin:10px 0 0;padding:12px 14px 0;border-top:1px solid var(--fv-sep);font-size:16px;color:var(--sub)} .fv-rc-sl{grid-column:1 / 3;text-align:right} .fv-rc-sl small{margin-left:4px;font-size:13px} .fv-rc-s .fv-rc-y{font-size:22px} .fv-rc-m{grid-column:4} .fv-rc-act{grid-column:5;justify-self:end;display:flex;justify-content:flex-end} .fv-rc-none + .fv-rc-act{margin-top:16px} .fv-rc-none{margin:18px 0 0;font-size:18px;color:var(--sub)} @media (max-width:1023.98px){ .fv-list.n1.rcl{grid-template-columns:minmax(0,1fr)} .fv-rc{margin-top:14px} .fv-rc-h{display:none} .fv-rc-l{max-height:none;overflow:visible;padding-top:0} .fv-rc-r{grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"d p y" ". c f";column-gap:10px;row-gap:2px;padding:7px 10px;font-size:15px} .fv-rc-d{grid-area:d} .fv-rc-p{grid-area:p} .fv-rc-y{grid-area:y} .fv-rc-c{grid-area:c;font-size:13px} .fv-rc-f{grid-area:f;justify-content:flex-end} .fv-rc-c i{font-size:11px;padding:0 6px;margin-right:6px} .fv-rc-mk{font-size:12px;padding:1px 8px} .fv-rc-s{display:flex;align-items:baseline;gap:8px;padding:10px 10px 0;font-size:13px} .fv-rc-s .fv-rc-y{font-size:18px} .fv-rc-m{margin-left:auto} .fv-rc-s{flex-wrap:wrap} .fv-rc-s .fv-rc-act{flex-basis:100%;margin-top:10px} } /* ===== 41回目（2026-10-20 大晴さん）：見本のバー ===== * 製品の外の、見本だけの操作：左＝［‹ ご提案書に戻る］・真ん中＝［LINE｜専用画面］の切り替え・右＝空き（左と同じ幅。真ん中をそろえるため）。 * 細い帯 1本（Mac 40px・スマホの幅 44px。拡大は app.js の applyZoom が帯だけ打ち消すので、どの画面の大きさでも同じ見た目）。 * 地はホームの暗い HUD より一段暗い紺・下に細い線1本（主張しない）。字は 13px。押されている方は水色の面。 * 話題の画面（78）・小窓（80）・会話の窓（90）より上（96）に置き、それらの上の端は帯の下から（--strip）。印刷の見た目（100）は帯の上に重なる */ .dbar{position:sticky;top:0;z-index:96;height:40px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:12px;padding:0 12px;background:var(--strip-bg);border-bottom:1px solid var(--line);font-size:13px;line-height:1.2;color:var(--sub);letter-spacing:.02em} :root[data-theme="dark"] .dbar{background:rgb(1 8 20 / .96);border-bottom-color:rgb(var(--hud2-rgb) / .2)} .dbar-back{justify-self:start;display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:0 10px 0 4px;border-radius:8px;color:var(--sub);text-decoration:none;font-weight:500;white-space:nowrap} .dbar-back .ms{font-size:20px} .dbar-back:hover{background:rgb(var(--hud-rgb) / .1);color:var(--hl)} .dbar-back:focus-visible,.dbar-b:focus-visible{outline:2px solid var(--cy-hi);outline-offset:2px} .dbar-s{display:none} .dbar-sw{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;border:1px solid rgb(var(--hud3-rgb) / .35);background:rgb(var(--glass-rgb) / .35)} .dbar-b{min-height:28px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--sub);font:inherit;font-weight:600;letter-spacing:.04em;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,color .18s ease} .dbar-b:hover{color:var(--hl)} .dbar-b[aria-pressed="true"]{background:rgb(var(--hud-rgb) / .2);color:var(--hl);box-shadow:inset 0 0 0 1px rgb(var(--hud3-rgb) / .5)} .dbar-r{display:block} @media (max-width:767.98px){ .dbar{height:44px;padding:0 8px} .dbar-back{min-height:44px;padding:0 8px 0 0} .dbar-b{min-height:34px;padding:0 14px} } @media (max-width:600px){ .dbar-l{display:none} .dbar-s{display:inline} } /* 帯の下から始める物（画面いっぱいに重ねる層） */ .fv{top:var(--strip)} .ov{top:var(--strip)} .dlg{max-height:calc(var(--vh,100dvh) - var(--strip) - 48px)} /* 窓の高さの上限も、帯の分だけ低く（窓の層の --strip は窓の層の長さ） */ @media print{ .dbar{display:none!important} } /* ===== 41回目：提案書に埋め込む形（index.html?embed=line）===== * 提案書の iframe の中に、Lステップの LP と同じように、触れる LINE のスマホの絵だけを出す。地は透明・見本のバー・左の説明・星の地は出さない。 * スマホの絵（本体の縁 10px と横のボタン 3px を含めて 416×864）を、iframe の大きさいっぱいに比率を保って縮める（--emz は app.js の applyZoom）。 * 絵の作りは、広い幅の LINE の見本（33回目の .ln-device）と同じ（iframe の幅が 600 以下でも、この絵で出す）。影は外に出ないので付けない */ html.embed,html.embed body{background:transparent!important;background-image:none!important;min-height:0;overflow:hidden} :root.embed,:root.embed[data-theme]{color-scheme:light!important} /* 提案書の iframe と色の決め方をそろえる（違うとブラウザが iframe の地を塗りつぶすため） */ html.embed body::after,html.embed #star-cv,html.embed .dbar,html.embed .ln-aside,html.embed .skip{display:none!important} html.embed .v-line{min-height:0;background:transparent} html.embed .ln-wrap{display:flex;align-items:center;justify-content:center;gap:0;padding:0;height:100vh;min-height:0;overflow:hidden} html.embed .ln-device{position:relative;flex:none;zoom:var(--emz,1);padding:10px;border-radius:48px;background:#1f2226;box-shadow:inset 0 0 0 1.5px #34383d} html.embed .ln-device::before,html.embed .ln-device::after{content:"";position:absolute;background:#1f2226;border-radius:2px} html.embed .ln-device::before{left:-3px;top:120px;width:3px;height:54px;box-shadow:0 70px 0 #1f2226} html.embed .ln-device::after{right:-3px;top:150px;width:3px;height:78px} html.embed .ln-wrap{align-items:flex-start} /* 43回目：上端の位置はそのまま（下端を上げる） */ html.embed .ln-device .ln-frame{width:390px;height:800px;min-height:0;max-height:none;border-radius:38px;box-shadow:none} /* 43回目：844 → 800（本体ごと 864 → 820） */ html.embed .ln-status{position:relative;flex:none;height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 26px;background:#9CB1D4;color:#14202B;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums} html.embed .ln-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:86px;height:24px;border-radius:999px;background:#111316} html.embed .ln-st-ic{display:flex;gap:3px} html.embed .ln-st-ic .ms{font-size:15px;color:#14202B} html.embed .ln-home{flex:none;height:18px;display:grid;place-items:center;background:#fff} html.embed .ln-home span{width:108px;height:4px;border-radius:999px;background:#1f2226} /* ===== 43回目（2026-10-20 大晴さん）：LINE の見本のスマホの絵と左の説明 ===== * スマホの絵：画面は本物の iPhone と同じ 390×844（19.5:9）・本体ごと 410×864 のまま、本体ごと同じ割合で拡大・縮小（--lnz は app.js の lnZoom）。 * 帯の下端 → 本体の上端と、本体の下端 → 画面の下端を同じ間隔（見た目 24px）にそろえる。リッチメニューは横いっぱいで 390×263（画面の約3割）。 * 左の説明：見出し＋一言 → 試し方（番号つき3つ）→ 専用画面にも出る事 → 小さな注意書き（2行）。字は今より大きく、行間はゆったり。白い四角のアイコンはやめ、番号の丸にそろえる */ @media (min-width:600.02px){ .ln-wrap{align-items:center;height:calc(var(--vh,100dvh) - var(--strip));min-height:0;padding:0 16px;row-gap:0} .ln-device{zoom:var(--lnz,1)} .ln-device .ln-frame{height:844px} } @media (min-width:1024px){ .ln-wrap{align-items:center;padding:0 16px} } .ln-aside{width:400px} @media (min-width:1024px){ .ln-aside{width:400px} } .ln-aside-h{margin:0;font-size:26px;line-height:1.45;font-weight:700;letter-spacing:.03em;color:var(--hl)} .ln-aside-h small{font-size:.62em;font-weight:500;color:var(--sub);letter-spacing:.04em;margin-left:2px} .ln-aside-lead{margin:10px 0 0;font-size:18px;line-height:1.7;color:var(--ink)} .ln-aside-k{margin:32px 0 0;font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--teal-text)} .ln-aside-ol{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px} .ln-aside-ol li{display:flex;align-items:flex-start;gap:14px;font-size:17px;line-height:1.7;color:var(--ink)} .ln-aside-ol i{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-top:-1px;border-radius:50%;border:1.5px solid rgb(var(--hud3-rgb) / .7);color:var(--cy-hi);font-size:15px;font-weight:700;font-style:normal;line-height:1} .ln-aside-sync{display:flex;align-items:flex-start;gap:14px;margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:16px;line-height:1.7;color:var(--ink)} .ln-aside-sync .ms{flex:none;width:30px;text-align:center;font-size:22px;color:var(--cy-hi);margin-top:1px} .ln-aside-note{margin:28px 0 0;font-size:12.5px;line-height:1.7;letter-spacing:0;color:var(--sub)} .ln-aside-note span{display:block} /* =================================================================== * 中のページ（2026-10-29 案A「静かな紺」） * ホーム（秘書の間）はそのまま。中のページと、中のページで開く窓は光らせない。 * ターコイズで塗るのは、主のボタン1つと、選んでいるタブ・メニューだけ。気を付ける印だけ琥珀色 * 手本：02_案件/サンロード_AI秘書/素材/参考_20261029_中の画面/案A_1〜5 * =================================================================== */ :root[data-theme="dark"] body.inner-on .app, :root[data-theme="dark"] body.inner-on .ov, :root[data-theme="dark"] .login{ --glow:0; --frame-bg:rgba(150,195,235,.045); --frame-line:rgba(150,195,235,.16); --frame-shadow:none; --frame-here-line:rgba(92,225,232,.6); --frame-here-shadow:none; --line:rgba(150,195,235,.15); --line-2:rgba(150,195,235,.08); --line-3:rgba(150,195,235,.32); --card:rgba(150,195,235,.05); --card-2:rgba(150,195,235,.09); --field:rgba(2,12,26,.55); --shadow:none; --shadow-2:0 24px 70px rgba(0,0,0,.55); --side-bg2:rgba(4,16,32,.8); --side-line:rgba(150,195,235,.14); --side-shadow:none; --nav-on-bg:rgba(0,198,210,.15); --nav-on-ink:#F3FDFE; --nav-on-line:transparent; --nav-on-shadow:none; --pri-bg:linear-gradient(180deg,#74E8F0,#2BC9DA); --pri-ink:#03141E; --pri-line:transparent; --pri-shadow:none; --pri-hover-bg:linear-gradient(180deg,#90F0F6,#46D4E2); --seg-on:linear-gradient(180deg,#74E8F0,#2BC9DA); --seg-bg:rgba(150,195,235,.04); --seg-line:rgba(150,195,235,.16); --seg-on-ink:#03141E; --seg-on-shadow:none; --inv-bg:linear-gradient(180deg,#74E8F0,#2BC9DA); --inv-ink:#03141E; --inv-line:transparent; --inv-shadow:none; --num-big:#F3FAFB; --num-glow:none; --today-ring:none; --dock-glow:none; --me-line:rgba(150,195,235,.24); --bot-line:rgba(150,195,235,.24); --page-glow:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(20,90,170,.12),transparent 75%); --page-img:radial-gradient(rgba(140,210,255,.2) 1px,transparent 1.6px),radial-gradient(rgba(140,210,255,.1) 1px,transparent 1.6px); --page-size:97px 89px,53px 61px; --page-pos:13px 7px,31px 41px; } :root[data-theme="dark"] body.inner-on .nav-b.on{box-shadow:inset 3px 0 0 #5CE1E8} :root[data-theme="dark"] body.inner-on .btn.pri{font-weight:700} /* ---- 会話の欄を畳む（広い画面の中のページ） ---- */ .chat-rail,.ct-fold{display:none} @media (min-width:1024px){ .app.chat-fold{--chat-w:64px!important} .app.chat-fold .chat-col{padding:10px 10px 10px 0} .app.chat-fold .chat-col > :not(.chat-rail){display:none!important} .app.chat-fold .chat-rail{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding:14px 0 18px;border-radius:16px;border:1px solid var(--frame-line);background:var(--frame-bg);color:var(--ink);transition:background .15s,border-color .15s} .app.chat-fold .chat-rail:hover{border-color:var(--line-3);background:var(--card-2)} .cr-sun{width:38px;height:38px;border-radius:50%;object-fit:cover} .cr-t{writing-mode:vertical-rl;font-size:15px;font-weight:700;letter-spacing:.24em} .chat-rail .ms{color:var(--sub);font-size:20px} .app:not(.is-hall) .ct-fold{display:flex;margin-left:auto;align-self:center} } /* ---- ページの上（題・一行・主のボタン） ---- */ .rc-head{align-items:center;flex-wrap:nowrap;gap:20px} .rc-ttl{flex:1;min-width:0} .rc-head h1{font-size:34px;letter-spacing:.06em;line-height:1.25} .rc-head .pg-date{font-size:16px;color:var(--sub);margin-top:4px} .rc-road-s{display:none} .rc-road{display:flex;align-items:baseline;gap:5px;color:var(--sub);font-size:13.5px;white-space:nowrap} .rc-road b{font-size:20px;font-weight:700;color:var(--ink)} .rc-road small{font-size:13px} .rc-head .pg-acts{display:flex;gap:10px;flex:none} .rc-head .btn.lg{min-height:52px;font-size:16px;padding:0 22px} .rc-head .rc-go .ms{font-size:22px} /* ---- ページの中のタブ ---- */ .rc-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--seg-bg,var(--card));border:1px solid var(--seg-line,var(--line))} .rc-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 10px;border-radius:10px;font-size:15.5px;font-weight:600;color:var(--sub);white-space:nowrap;transition:background .15s,color .15s} .rc-tab:hover{color:var(--ink);background:var(--line-2)} .rc-tab.on{background:var(--seg-on);color:var(--seg-on-ink);font-weight:700;box-shadow:var(--seg-on-shadow,none)} .rc-tab i{font-style:normal;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} .rc-tab.on i{background:#03141E;color:#EAF4F7} .rt-s{display:none} /* ---- 細い1行のお知らせ ---- */ .rc-note{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 8px 6px 16px;border-radius:12px;background:var(--frame-bg);border:1px solid var(--frame-line);font-size:15px} .rc-note > .ms{font-size:22px;color:var(--sub)} .rc-note > span:not(.ms){flex:1;min-width:0;font-weight:600} .rc-note-b{display:inline-flex;align-items:center;gap:2px;min-height:40px;padding:0 8px 0 14px;border-radius:10px;border:1px solid var(--teal-line);color:var(--teal-text);font-size:14.5px;font-weight:700;white-space:nowrap} .rc-note-b .ms{font-size:20px} .rc-note-b:hover{background:var(--teal-pale)} .rc-note.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)} .rc-note.warn > .ms{color:var(--warn)} .rc-note.warn .rc-note-b{border-color:transparent;color:var(--warn)} /* ---- 一覧の上（月の見出し・検索・絞り込み） ---- */ .rc-row{display:flex;align-items:flex-end;gap:12px;margin-bottom:-6px} .rc-mh{flex:1;min-width:0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .rc-mh h2{font-size:24px;font-weight:700;letter-spacing:.02em} .rc-mh span{font-size:13.5px;color:var(--sub)} .rc-mh span b{color:var(--ink);font-weight:600;margin-left:4px} .rc-bar{display:flex;gap:10px} .rc-q{width:min(300px,100%)} .rc-q input{min-height:44px} .rc-fb{min-height:44px} .rc-fb.has{border-color:var(--teal-line);color:var(--teal-text)} .rc-filt{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap} .rc-filt .fld{width:220px} /* ---- 一覧（1行＝写真・お店・日付と科目・金額） ---- */ .rlist{display:flex;flex-direction:column;gap:8px} .rlist .rl-m{font-size:22px;font-weight:700;margin:14px 2px 2px;display:flex;align-items:baseline;gap:12px;border:0;padding:0} .rlist .rl-m span{font-size:13.5px;color:var(--warn);font-weight:600} .rlist .rrow{display:grid;grid-template-columns:116px minmax(0,1fr) auto 22px;align-items:center;gap:22px;padding:12px 14px 12px 12px;border-radius:12px;background:var(--frame-bg);border:1px solid var(--frame-line);min-height:92px} .rlist .rrow+.rrow{border-top:1px solid var(--frame-line)} .rlist .rrow:hover{background:var(--card-2);border-color:var(--line-3)} .rlist .rrow .thumb{width:116px;height:68px;border-radius:8px;border:0;background:#F4F1EA} .rlist .rrow .thumb .paper{left:50%;top:0;transform:translateX(-50%) scale(.46);transform-origin:top center} .rlist .rr-t{font-size:19px;gap:6px 12px} .rlist .rr-p{min-width:0} .rlist .rr-m{font-size:15px;color:var(--sub);display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} .rlist .rr-m i{font-style:normal;color:var(--line-3)} .rlist .rr-a{font-size:26px;font-weight:700;text-align:right;letter-spacing:.01em;white-space:nowrap} .rlist .rr-a.rr-na{font-size:15px;font-weight:600;color:var(--warn)} .rlist .rr-go{color:var(--sub);font-size:24px} .rlist .rrow.void{opacity:.65} .rlist .flag{height:26px;padding:0 10px;border-radius:7px;font-size:13.5px} .rlist .flag.warn{border:1px solid var(--warn-line)} .flag.wait{background:none;border:1px solid var(--teal-line);color:var(--teal-text)} .rlist .rl-head{border:0;padding:0 2px} .rlist .big-empty{padding:40px 16px;border-radius:14px;background:var(--frame-bg);border:1px solid var(--frame-line)} /* ---- 月ごとの明細・PDF ---- */ .ld-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .ld-mo{display:flex;align-items:center;gap:4px} .ld-arw{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink)} .ld-arw:hover:not(:disabled){border-color:var(--line-3)} .ld-arw:disabled{opacity:.3} .ld-sel{position:relative;display:flex;align-items:center;padding:0 10px;min-height:44px;border-radius:10px} .ld-sel b{font-size:26px;font-weight:700;letter-spacing:.02em} .ld-sel select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .ld-sel:focus-within{box-shadow:0 0 0 2px var(--teal-line)} .ld-acts{margin-left:auto;display:flex;gap:10px} .ld-acts .btn{min-height:46px} .ld-pdf:not(:disabled){border-color:var(--teal-line)!important;color:var(--teal-text)!important} .ld-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:18px 0} .ld-c{padding:2px 28px;display:flex;flex-direction:column;gap:4px;min-width:0} .ld-c+.ld-c{border-left:1px solid var(--line)} .ld-c .k{font-size:14.5px;color:var(--sub)} .ld-c b{font-size:32px;font-weight:700;line-height:1.25;white-space:nowrap} .ld-c b > small{font-size:16px;font-weight:500;color:var(--sub);margin-left:6px} .lcats{padding:18px 20px 6px} .lcats .ch{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:6px} .lcats h2{font-size:19px;font-weight:700} .lcats .sub{font-size:13.5px;color:var(--sub)} .lc-list{display:flex;flex-direction:column} details.lcat{padding:0;border:0;background:none;box-shadow:none;border-radius:0} .lcat > summary,.lc-tot{display:grid;grid-template-columns:150px 52px minmax(0,1fr) 120px 22px;align-items:center;gap:18px;min-height:50px;padding:4px 8px;border-top:1px solid var(--line-2);list-style:none} .lcat > summary{cursor:pointer;border-radius:8px} .lcat > summary::-webkit-details-marker{display:none} .lcat > summary:hover{background:var(--line-2)} .lc-n{font-size:16px;font-weight:600} .lc-c{font-size:14.5px;color:var(--sub);text-align:right} .lc-bar{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden} .lc-bar i{display:block;height:100%;border-radius:4px;background:rgba(120,175,225,.72)} .lc-y{text-align:right;font-size:17px;font-weight:600} .lc-go{color:var(--sub);font-size:22px;transition:transform .2s} .lcat[open] > summary{background:var(--line-2)} .lcat[open] .lc-go{transform:rotate(90deg)} .lcat .tbl-wrap{margin:6px 0 14px} .lc-tot{border-top:1px solid var(--line);margin-top:2px} .lc-tot .lc-n,.lc-tot .lc-c,.lc-tot .lc-y{font-weight:700;color:var(--ink)} .lc-tot .lc-y{font-size:19px} .lc-tot .lc-bar{background:none} .ld-2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ld-2 > .ld-x{display:flex;align-items:center;gap:14px;padding:16px 16px 16px 18px;margin:0;border-radius:var(--frame-r);font-size:14px} .ld-2 > .ld-x > .ms{font-size:28px;color:var(--teal-text)} .ld-2 > .ld-x > div{flex:1;min-width:0} .ld-2 > .ld-x > div > b{display:block;font-size:16px} .ld-2 > .ld-x > div > span{display:block;font-size:13.5px;color:var(--sub);line-height:1.6;margin-top:2px} .ld-2 > .ld-x span b{font-size:14px;color:var(--ink);font-weight:600} .ld-2 > .ld-x .btn{flex:none} /* ---- 1枚ずつ確かめる（全画面） ---- */ .dlg-review .rv-top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 28px;background:transparent;border-bottom:1px solid var(--line)} .rv-back{justify-self:start} .rv-ic-n{display:none} .rv-c{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(480px,40vw)} .rv-c h2{font-size:24px;font-weight:700;letter-spacing:.04em;display:flex;gap:18px;align-items:baseline;line-height:1.3} .rv-n{font-size:22px} .rv-c .bar{width:100%;height:6px;border-radius:3px;background:var(--line);overflow:hidden} .rv-c .bar i{display:block;height:100%;border-radius:3px;background:var(--teal);transition:width .25s var(--ease)} .rv-note{justify-self:end;font-size:14px;color:var(--sub);text-align:right} .dlg-review .dup-inline{margin:14px 28px 0} .dlg-review .rv-body{grid-template-columns:minmax(320px,1fr) minmax(0,1.12fr);max-width:1440px;width:100%;margin:0 auto;gap:22px;padding:20px 28px;justify-content:stretch} .dlg-review .rv-l{position:relative;background:var(--frame-bg);border:1px solid var(--frame-line);border-radius:16px;padding:28px 20px 18px;overflow:hidden} .rv-ph{display:flex;justify-content:center;transform:rotate(var(--rot,0deg));transition:transform .25s var(--ease);transform-origin:center top} .rv-ph.z{transform:rotate(var(--rot,0deg)) scale(1.45)} .dlg-review .thumb.xl .paper{width:340px} .rv-tools{display:flex;gap:10px;justify-content:center;margin-top:16px;position:relative;z-index:1} .rv-tools .btn[aria-pressed="true"]{border-color:var(--teal-line);color:var(--teal-text)} .dlg-review .rv-l .src{font-size:13px;color:var(--sub);margin-top:4px} .dlg-review .rv-r{background:var(--frame-bg);border:1px solid var(--frame-line);border-radius:16px;box-shadow:none;padding:20px} .rform.quick .rv-hint{align-items:center;gap:10px;margin-bottom:14px;padding:14px 16px;background:var(--teal-pale);border:1px solid var(--teal-line);color:var(--ink);font-size:16px;font-weight:600} .rform.quick .rv-hint .ms{color:var(--teal);font-size:28px} .rq{display:flex;flex-direction:column;gap:10px} .rq-r{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 56px 12px 18px;border-radius:12px;background:var(--card);border:1px solid var(--line);cursor:text} .rq-r:focus-within{border-color:var(--teal-line)} .rq-r.need{border-color:var(--warn-line);background:var(--warn-bg)} .rq-r.doubt{border-color:var(--warn-line)} .rq-k{font-size:13.5px;color:var(--sub);font-weight:500} .rq-k em{font-style:normal;color:var(--warn);margin-left:8px;font-weight:700} .rq-v{display:block;min-width:0} .rq .rq-v input,.rq .rq-v select{width:100%;background:none;border:0;padding:0;min-height:40px;font-size:24px;font-weight:700;color:var(--ink);box-shadow:none;border-radius:6px} .rq .rq-v select{appearance:none;-webkit-appearance:none;cursor:pointer} .rq .rq-v input:focus,.rq .rq-v select:focus{outline:none} .rq-r.amt .yen-in{display:flex;align-items:center;gap:6px} .rq-r.amt .yen-in b{position:static;font-size:40px;font-weight:700;color:var(--ink)} .rq .rq-r.amt .yen-in input{font-size:40px;padding:0;text-align:left;min-height:52px} .rq-sum{font-size:40px;font-weight:700} .rq-n{display:block;font-size:13px;color:var(--sub)} .rq-r .day-in{display:flex;align-items:center;gap:8px} .rq-r .day-in b{font-size:20px} .rq .rq-r .day-in input{width:90px;font-size:24px;border:1px solid var(--warn-line);border-radius:8px;padding:0 10px;background:var(--field)} .rq-ed{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--sub);pointer-events:none} .rq-r.cat .rq-ed{top:30px;transform:none} .rq-alt{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px} .rq-c{min-height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line-3);font-size:14px;font-weight:600;color:var(--ink)} .rq-c:hover{border-color:var(--teal-line)} .rq-c[aria-pressed="true"]{border-color:var(--teal);color:var(--teal-text)} .rv-why{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--warn-bg);border:1px solid var(--warn-line)} .rv-why[hidden]{display:none} .rv-more{margin-top:10px} .rv-more > summary{display:flex;align-items:center;gap:4px;min-height:44px;color:var(--teal-text);font-size:15px;font-weight:600;cursor:pointer;list-style:none} .rv-more > summary::-webkit-details-marker{display:none} .rv-more > summary > :first-child{text-decoration:underline} .rm-s{color:var(--sub);font-weight:500} .rm-ic{transition:transform .2s} .rv-more[open] .rm-ic{transform:rotate(180deg)} .rv-more-b{padding-top:6px;display:flex;flex-direction:column;gap:12px} .dlg-review .rv-ft{background:transparent;border-top:1px solid var(--line);padding:12px 28px calc(12px + env(safe-area-inset-bottom));gap:12px} .rv-void{color:var(--sub);text-decoration:underline;text-underline-offset:3px;font-weight:500} .rv-uw{display:flex;flex-direction:column;align-items:center;gap:2px} .rv-uw small{font-size:12px;color:var(--sub)} .rv-un .rv-un-ic{color:var(--warn)} .rv-un[aria-pressed="true"]{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn)} .dlg-review .rv-ft .btn{min-height:52px;font-size:16px;min-width:128px} .dlg-review .rv-ft .btn.pri.lg{min-width:210px;font-size:18px} .dlg-review .rv-ft .rv-void{min-width:0} /* ---- スマホ ---- */ @media (max-width:767.98px){ .rc-head{flex-wrap:wrap;gap:12px} .rc-head h1{font-size:30px} .rc-head .pg-date{font-size:15px} .rc-road{display:none} .rc-road-s{display:inline;margin-left:8px} .rc-head .pg-acts{width:100%} .rc-head .pg-acts .rc-go{flex:1;min-height:56px;font-size:17px} .rc-tab{min-height:44px;font-size:14.5px;padding:0 4px;gap:6px} .rc-tab.has-s .rt-l{display:none} .rc-tab.has-s .rt-s{display:inline} .rc-note{font-size:14.5px;padding-left:12px;gap:10px} .rc-note-b .rt-l{display:none} .rc-note-b .rt-s{display:inline} .rc-row{flex-direction:column;align-items:stretch;gap:16px;margin-bottom:-4px} .rc-bar{order:-1} .rc-q{flex:1;width:auto} .rc-mh h2{font-size:22px} .rc-filt .fld{width:100%} .rlist .rrow{grid-template-columns:78px minmax(0,1fr) auto 16px;gap:12px;padding:10px;min-height:84px} .rlist .rrow .thumb{width:78px;height:62px} .rlist .rrow .thumb .paper{transform:translateX(-50%) scale(.34)} .rlist .rr-t{font-size:16.5px;gap:4px 8px} .rlist .rr-m{font-size:13.5px;gap:6px} .rlist .rr-a{font-size:20px} .rlist .rr-go{font-size:20px} .rlist .flag{height:24px;padding:0 8px;font-size:12.5px} .ld-bar{gap:8px} .ld-sel b{font-size:22px} .furi-b{margin-left:auto} .ld-acts{width:100%;margin-left:0} .ld-acts .btn{flex:1} .ld-sum{grid-template-columns:1fr;padding:6px 0} .ld-c{flex-direction:row;align-items:baseline;justify-content:space-between;padding:10px 18px} .ld-c+.ld-c{border-left:0;border-top:1px solid var(--line)} .ld-c b{font-size:22px} .lcats{padding:14px 14px 4px} .lcat > summary,.lc-tot{grid-template-columns:minmax(0,1fr) auto auto 18px;gap:10px} .lc-bar{display:none} .ld-2{grid-template-columns:1fr} .ld-2 > .ld-x{flex-wrap:wrap} .ld-2 > .ld-x .btn{width:100%} /* 確かめる */ .dlg-review .rv-top{grid-template-columns:44px 1fr 44px;padding:8px 12px;gap:8px} .rv-back{border:0!important;background:none!important;padding:0!important;min-width:44px;justify-content:center} .rv-back .rt-l,.rv-ic-w,.rv-note{display:none} .rv-ic-n{display:inline;font-size:28px} .rv-c{width:auto;gap:8px} .rv-c h2{font-size:19px;gap:12px} .rv-n{font-size:18px} .dlg-review .dup-inline{margin:10px 16px 0} .dlg-review .rv-body{grid-template-columns:1fr;padding:12px 16px;gap:10px} .dlg-review .rv-l{padding:14px;max-height:38vh} .dlg-review .thumb.xl .paper{width:230px} .rv-tools{position:absolute;right:10px;bottom:10px;margin:0} .rv-tools .btn{min-height:44px;width:44px;padding:0;border-radius:50%;background:var(--field)} .rv-tools .btn span,.rv-tools [data-act="rv-rot"],.dlg-review .rv-l .src{display:none} .dlg-review .rv-r{padding:0;background:none;border:0} .rform.quick .rv-hint{background:none;border:0;padding:4px 0;font-size:15.5px;margin-bottom:8px} .rq{gap:0;border-top:1px solid var(--line)} .rq-r{flex-direction:row;align-items:center;gap:12px;padding:12px 26px 12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none} .rq-r.need,.rq-r.doubt{background:var(--warn-bg);padding-left:10px} .rq-k em{display:none} .rq-k{width:92px;flex:none;font-size:14px} .rq-v{flex:1} .rq .rq-v input,.rq .rq-v select{font-size:19px;min-height:36px} .rq-r.amt .yen-in b,.rq .rq-r.amt .yen-in input,.rq-sum{font-size:26px} .rq .rq-r.amt .yen-in input{min-height:40px} .rq-ed{right:0;font-size:18px} .rq-r.cat .rq-ed{top:50%;transform:translateY(-50%)} .rq-r.cat .rq-alt{display:none} .rv-more > summary{justify-content:center} .rm-s{display:none} .dlg-review .rv-ft{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))} .dlg-review .rv-ft .rv-void,.dlg-review .rv-ft .sp,.rv-uw small{display:none} .rv-uw{display:block} .rv-uw .btn{width:100%} .dlg-review .rv-ft .btn{min-width:0;min-height:50px} .dlg-review .rv-ft .btn.pri.lg{grid-column:1/-1;order:3;min-height:56px;font-size:18px} } /* スマホの下の帯：中のページでは控えめに（塗るのは、そのページの主のボタンだけ） */ body.inner-on .dock-talk{background:var(--card);color:var(--ink);border:1px solid var(--line);min-height:48px;box-shadow:none} body.inner-on .dock-talk .dk-x small{display:none} body.inner-on .dock-shoot{min-height:48px;background:transparent;border:1px solid var(--line-3);color:var(--ink)} .rc-mh .rc-w{font-style:normal;color:var(--warn);font-weight:600;margin-right:10px} /* 1回目の見比べの直し */ .rc-ttl{display:flex;flex-direction:column;align-items:flex-start} .pg-receipts .rlist,.rlist{padding:0;background:none;border:0;box-shadow:none} .rc-q input{background:var(--field);border:1px solid var(--line);color:var(--ink);border-radius:10px;-webkit-appearance:none;appearance:none} .rc-q input::placeholder{color:var(--sub)} :root[data-theme="dark"] body.inner-on .side-shoot{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--teal-line)} .rq-r.dt{cursor:pointer} .rq-dt{display:block;font-size:24px;font-weight:700;line-height:40px} .rq .rq-r.dt input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;min-height:0} @media (max-width:767.98px){ .rq-dt{font-size:19px;line-height:36px} } /* 2回目の見比べの直し（スマホ） */ @media (max-width:767.98px){ .page > .rc-head:first-of-type{margin-right:0} .rc-ttl{padding-right:56px} .rc-tabs{grid-template-columns:1.34fr 1fr 1.12fr .9fr;gap:2px} .rc-tab{font-size:14px} .rc-note > .ms{display:none} .rc-note{font-size:14px;padding:6px 6px 6px 14px} .rc-note-b{padding:0 6px 0 12px} /* 1行：左に写真、右上にお店と金額、その下に日付と科目（横いっぱい） */ .rlist .rrow{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"th nm am" "th mt mt";gap:4px 12px;padding:10px 12px 10px 10px;min-height:0} .rlist .rrow .thumb{grid-area:th;width:64px;height:60px;align-self:center} .rlist .rrow .thumb .paper{transform:translateX(-50%) scale(.3)} .rlist .rr-x{display:contents} .rlist .rr-t{grid-area:nm;font-size:16px;align-self:end} .rlist .rr-m{grid-area:mt;margin:0;font-size:13.5px;gap:6px;align-self:start} .rlist .rr-a{grid-area:am;font-size:19px;align-self:end} .rlist .rr-go{display:none} .dlg-review .rv-l{max-height:none;overflow:clip;padding:12px} .dlg-review .thumb.xl .paper{width:210px} .rv-tools .btn span.ms{display:inline-block} } body.inner-on .dock-talk .core{--core:#5CE1E8;--core-ic:#03141E} :root[data-theme="dark"] body.inner-on .dock-talk .core{--core:#5CE1E8;--core-ic:#03141E} @media (max-width:767.98px){ .dlg-review .thumb.xl .paper{width:260px;zoom:.72} .rv-back{box-shadow:none!important} .rlist .flag{height:22px;padding:0 7px;font-size:12px} } /* 3回目の見比べの直し：会話の欄を開いた時・縁取りのボタンも光らせない／幅が狭い時の上の並び */ :root[data-theme="dark"] body.inner-on .app,:root[data-theme="dark"] body.inner-on .ov{ --grp-line:rgba(150,195,235,.16); --grp-shadow:none; --grp-bg:rgba(150,195,235,.035); --head-line:linear-gradient(90deg,rgba(150,195,235,.18),rgba(150,195,235,.18)); } :root[data-theme="dark"] body.inner-on .app .btn.sec,:root[data-theme="dark"] body.inner-on .ov .btn.sec,:root[data-theme="dark"] body.inner-on .app .ib.bd{border-color:var(--line-3);box-shadow:none} :root[data-theme="dark"] body.inner-on .cm-grp > .cm-who .ms{box-shadow:inset 0 0 0 1.5px var(--line-3)} :root[data-theme="dark"] body.inner-on .chat-quick .chip{border-color:var(--line-3);box-shadow:none} :root[data-theme="dark"] body.inner-on .chat-in input,:root[data-theme="dark"] body.inner-on .chat-in .mic,:root[data-theme="dark"] body.inner-on .chat-in .att{border-color:var(--line-3)} :root[data-theme="dark"] body.inner-on .chat-in .ib.send{box-shadow:none} .page.pg-receipts,.page.pg-ledger{container-type:inline-size;container-name:rcpage} @container rcpage (max-width:900px){ .rc-road{display:none} .rc-road-s{display:inline;margin-left:8px} .rc-head .btn.lg{padding:0 16px} } /* 古い決まり（.pg-receipts .pg-head > div を横並び・伸ばす）を、新しい上の部分では使わない */ .pg-receipts .rc-head > .rc-ttl,.pg-ledger .rc-head > .rc-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 0;min-width:0} .pg-receipts .rc-head > .pg-acts,.pg-ledger .rc-head > .pg-acts{display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:10px} @media (max-width:767.98px){ .pg-receipts .rc-head > .pg-acts,.pg-ledger .rc-head > .pg-acts{flex:1 1 100%} } .ld-top{display:flex;flex-direction:column;gap:20px} @media (max-width:767.98px){ .rq-hl{display:none} .rq-k .rt-l{display:none} .rq-k .rt-s{display:inline} .dlg-review .rv-l{padding:10px} .dlg-review .thumb.xl .paper{zoom:.62} } /* ===== 2026-10-29 実物を見た大晴さんの直し ===== * 1. 中のページの背景は星も方眼も無し（見にくくなるため）。ホームはそのまま * 2. 横のメニューの「秘書の頭脳」：メニューの高さが足りない時に押しつぶされて2行目がはみ出していた → 縮ませない・上下の真ん中にそろえる * 3. 選んでいるメニューは、全部をターコイズで塗る（左の線の形はやめる） * 4. 間隔は、関係する物ごとにまとめる（上の題とボタン／タブ／お知らせ／一覧の見出しと一覧） */ :root[data-theme="dark"] body.inner-on{background-image:none} :root[data-theme="dark"] body.inner-on .app,:root[data-theme="dark"] body.inner-on .ov{--page-img:none;--page-glow:none} :root[data-theme="dark"] body.inner-on .app .main{background-image:none} .side .ss-kb,.side .side-status{flex:none} .side .ss-kb{align-items:center;gap:10px;padding:10px 12px;min-height:58px} .side .ss-kb .ms{margin-top:0;font-size:22px} .side .ss-kb span{gap:2px;line-height:1.35} :root[data-theme="dark"] body.inner-on .nav-b.on{background:linear-gradient(180deg,#74E8F0,#2BC9DA);color:#03141E;box-shadow:none} :root[data-theme="dark"] body.inner-on .nav-b.on .ms{color:#03141E} :root[data-theme="dark"] body.inner-on .nav-b.on .cnt{background:#03141E;color:#EAF4F7;border:0;box-shadow:none} /* 間隔：上（題とボタン）→ タブ → お知らせ → 一覧の見出しと一覧。まとまりの間を広く、まとまりの中を狭く */ .page.pg-receipts,.page.pg-ledger{gap:0} .pg-receipts > .rc-tabs,.pg-ledger > .rc-tabs{margin-top:28px} .pg-receipts > .rc-tabs + *,.pg-ledger > .rc-tabs + *{margin-top:40px} .pg-receipts > .rc-note + .rc-row{margin-top:32px} .pg-receipts > .rc-row{margin-bottom:0} .pg-receipts > .rc-filt{margin-top:14px} .pg-receipts > .rlist{margin-top:14px;gap:10px} .rc-road{margin-right:24px} .pg-ledger > .ld-top{margin-top:16px;gap:12px} .pg-ledger > .lcats,.pg-ledger > .card:not(.ld-x){margin-top:36px} .pg-ledger > .ld-2{margin-top:16px} @media (max-width:767.98px){ .pg-receipts > .rc-tabs,.pg-ledger > .rc-tabs{margin-top:20px} .pg-receipts > .rc-tabs + *,.pg-ledger > .rc-tabs + *{margin-top:28px} .pg-receipts > .rc-note + .rc-row{margin-top:24px} .pg-receipts > .rlist{margin-top:12px} .pg-ledger > .lcats,.pg-ledger > .card:not(.ld-x){margin-top:28px} } :root[data-theme="dark"] body.inner-on #star-cv{display:none} :root[data-theme="dark"] body.inner-on::after{background:none} :root[data-theme="dark"] body.inner-on .pg-head h1,:root[data-theme="dark"] body.inner-on .rc-head h1{text-shadow:none} /* =================================================================== * 予定とタスクのページ（2026-10-30 案A「静かな紺」） * 上＝題・一行・主のボタン → タブ「今日・週・月・タスク」→ 中身。最初は「今日」 * 手本：02_案件/サンロード_AI秘書/素材/参考_20261029_中の画面/案A_予定_1〜5 * 古い予定の決まり（.ev・.td・.wday・.todos・.done-fold）が当たる所は、.pg-schedule の中で上書きする * =================================================================== */ .page.pg-schedule{gap:0;container-type:inline-size;container-name:scpage} .pg-schedule .rc-head > .rc-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 0;min-width:0} .pg-schedule .rc-head > .pg-acts{display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:10px} .sc-head .btn.lg .ms{font-size:22px} .pg-schedule > .sc-tabs{margin-top:28px} .pg-schedule > .sc-tabs + *{margin-top:40px} .sc-tab i{background:rgba(150,195,235,.13);color:var(--ink)} .sc-tab.on i{background:#03141E;color:#EAF4F7} .sc-card{background:var(--frame-bg);border:1px solid var(--frame-line);border-radius:16px} .sc-more{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--teal-text);font-size:15px;font-weight:700} .sc-more .ms{font-size:20px} .sv-go{color:var(--sub);font-size:22px;flex:none} /* ---- 今日のタブ ---- */ .sv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,356px);gap:24px;align-items:start} .sv-dh{display:flex;align-items:center;gap:14px;min-height:40px;margin-bottom:14px} .sv-dh h2{font-size:25px;font-weight:700;letter-spacing:.02em} .sv-tag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--teal-line);color:var(--teal-text);font-size:14px;font-weight:700} .sv-back{margin-left:auto} .sv-list{border:1px solid var(--frame-line);background:var(--frame-bg);border-radius:16px;overflow:hidden} .sv-list > .empty{padding:22px 24px} .pg-schedule .ev.sv{display:flex;align-items:center;gap:12px;width:auto;min-height:100px;margin:0;padding:0 18px 0 0;border:1px solid transparent;border-radius:0;background:none;filter:none;position:relative} .pg-schedule .sv-list > .ev.sv + .ev.sv{border-top-color:var(--line)} .pg-schedule .ev.sv:hover{background:var(--line-2)} .pg-schedule .ev.sv.next{margin:6px;border-color:var(--teal-line);border-radius:12px;background:rgba(92,225,232,.06)} .pg-schedule .ev.sv.next + .ev.sv{border-top-color:transparent} .pg-schedule .ev.sv.private::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 3px 3px 0;background:var(--priv)} .sv-b{flex:1;min-width:0;display:flex;align-items:center;min-height:98px;padding:14px 0 14px 24px;text-align:left;color:inherit} .sv-b::after{content:"";position:absolute;inset:0;border-radius:inherit} .sv-t{flex:none;width:118px;font-size:30px;font-weight:600;color:var(--num-big);letter-spacing:.01em} .sv-bar{display:none} .sv-x{display:flex;flex-direction:column;gap:5px;min-width:0} .sv-tt{font-size:19px;font-weight:700;line-height:1.4} .sv-mm{font-size:14.5px;color:var(--sub);line-height:1.5} .ev.sv.done .sv-t,.ev.sv.done .sv-tt{color:var(--sub)} .ev.sv.done .sv-t{opacity:.85} .sv-r{display:flex;align-items:center;gap:10px;flex:none;position:relative;z-index:1} .sv-k{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;padding:0 10px;border-radius:8px;background:rgba(150,195,235,.13);color:var(--sub);font-size:14px;font-weight:700} .sv-nx{display:flex;align-items:center;gap:8px} .sv-nx b{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;padding:0 9px;border-radius:8px;background:rgba(92,225,232,.16);color:var(--teal-text);font-size:14px;font-weight:700} .sv-nx span{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-3);font-size:13.5px;font-weight:600;color:var(--ink)} .sv-map{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:10px;border:1px solid var(--line-3);color:var(--ink);font-size:14.5px;font-weight:700;margin-left:6px} .sv-map .ms{font-size:20px} .sv-map:hover{background:var(--line-2)} .sv-now{display:flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;color:var(--teal-text);font-size:14px;font-weight:700} .sv-now span{flex:none;width:96px} .sv-now i{flex:1;height:2px;border-radius:1px;background:var(--teal-text);position:relative} .sv-now i::before{content:"";position:absolute;left:-1px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--teal-text)} .sv-list .mv-warn{margin:8px 14px} .sv-side{display:flex;flex-direction:column;gap:16px} .sv-td{padding:16px 18px 8px} .sc-ch{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)} .sc-ch h2{font-size:18px;font-weight:700} .sc-ch .num{font-size:14px;color:var(--sub)} .sv-td > .empty{padding:14px 0 8px} .sv-td > .sc-more{margin-top:2px} .tm{display:flex;align-items:center;gap:10px;position:relative;min-height:72px;border-bottom:1px solid var(--line)} .tm-b{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 0;text-align:left;color:inherit} .tm-b::after{content:"";position:absolute;inset:0} .tm-b b{max-width:100%;font-size:15.5px;font-weight:700;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tm-b span{font-size:13px;color:var(--sub)} .tm-b em{font-style:normal;color:var(--warn);font-weight:700;margin-left:8px} .tm:hover{background:var(--line-2)} .tk-ck{position:relative;z-index:1;flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#03141E} .tk-ck i{width:26px;height:26px;border-radius:50%;border:2px solid rgba(190,215,235,.62);transition:border-color .15s,background .15s} .tk-ck:hover i{border-color:var(--teal-text);background:rgba(92,225,232,.1)} .tk-ck.on .ms{width:26px;height:26px;border-radius:50%;background:var(--teal-text);font-size:18px;display:flex;align-items:center;justify-content:center} .sv-nd{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;width:100%;padding:18px 16px 18px 18px;text-align:left;color:inherit} .sv-nd:hover{background:var(--card-2)} .sv-nd-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .sv-nd-h b{font-size:17px;font-weight:700} .sv-nd-h span{font-size:14.5px;color:var(--sub)} .sv-nd-s{grid-column:1;font-size:14.5px;color:var(--sub)} .sv-nd .sv-go{grid-row:1 / 3;grid-column:2} /* ---- 週・月の上の帯 ---- */ .sc-cal{padding:16px 18px 18px} .sc-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .sc-bar .cal-tw{position:relative} .sc-bar .cal-title{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;font-size:24px;font-weight:700;color:var(--ink);letter-spacing:.02em} .sc-bar .cal-title:hover{background:var(--line-2)} .sc-today{margin-left:6px} .sc-bar .legend{margin-left:auto;font-size:14px;gap:16px} .sc-bar .legend i{width:10px;height:10px;border-radius:50%} /* ---- 週のタブ ---- */ .pg-schedule .wlist{border:1px solid var(--line);border-radius:12px;overflow:hidden} .pg-schedule .wday.sw{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:68px;padding:10px 16px;border-top:1px solid var(--line);border-radius:0;background:none} .pg-schedule .wday.sw:first-child{border-top:0} .pg-schedule .wday.sw.today{background:rgba(92,225,232,.06)} .sw-lab{display:flex;align-items:center;gap:8px;min-height:44px;color:inherit;text-align:left} .sw-lab b{font-size:19px;font-weight:700} .sw-lab span{font-size:14px;color:var(--sub)} .sw-lab em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--teal-text);border:1px solid var(--teal-line);border-radius:999px;padding:1px 8px} .wday.sw.past .sw-lab b{color:var(--sub)} .sw-evs{display:flex;flex-wrap:wrap;gap:8px;min-width:0} .sw-ev{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;padding:0 12px;border-radius:9px;border:1px solid var(--chip-w-line);background:var(--chip-w-bg);color:var(--ink);font-size:14.5px} .sw-ev b{font-weight:700;flex:none} .sw-ev span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sw-ev.private{border-color:var(--chip-p-line);background:var(--chip-p-bg);color:var(--chip-p-ink)} .sw-ev.done{opacity:.6} .sw-none{font-size:14px;color:var(--mute)} .sw-td{font-size:13.5px;color:var(--sub);white-space:nowrap} /* ---- 月のタブ（今日の丸は、選んだ日の枠に重ならないよう、升の内側に余白をとる） ---- */ .sm-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,316px);gap:20px;align-items:start} .smg{border:1px solid var(--line);border-radius:12px;overflow:hidden} .smr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))} .smr.head span{padding:9px 0;text-align:center;font-size:14px;font-weight:700;color:var(--sub);border-bottom:1px solid var(--line)} .smc{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;min-height:120px;padding:8px 7px 8px;border-right:1px solid var(--line-2);border-top:1px solid var(--line-2);text-align:left;color:inherit} .smr .smc:last-child{border-right:0} .smr.head + .smr .smc{border-top:0} .smc:hover{background:var(--line-2)} .smc.sel{background:rgba(92,225,232,.07);box-shadow:inset 0 0 0 1.5px var(--teal-line)} .smn{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;font-size:15px;font-weight:700} .smc.today .smn{background:linear-gradient(180deg,#74E8F0,#2BC9DA);color:#03141E!important} .smc.out .smn{color:var(--mute)!important;font-weight:500} .smchips{display:flex;flex-direction:column;gap:4px;min-width:0} .smchip{display:flex;flex-direction:column;min-width:0;padding:3px 7px 4px;border-radius:7px;border:1px solid var(--chip-w-line);background:var(--chip-w-bg);color:var(--ink);font-size:12.5px;line-height:1.35} .smchip b{font-weight:600} .smchip i{display:block;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .smchip.private{border-color:var(--chip-p-line);background:var(--chip-p-bg);color:var(--chip-p-ink)} .smchip.done,.smc.out .smchip{opacity:.6} .smmore{padding-left:4px;font-size:12.5px;color:var(--sub)} .smdots{display:none} .sm-side{padding:18px} .sm-side .sv-dh{margin-bottom:16px} .sm-side .sv-dh h2{font-size:22px} .sm-list{display:flex;flex-direction:column;gap:10px} .sm-ev{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;padding:12px 12px 12px 16px;border-radius:12px;border:1px solid var(--chip-w-line);background:var(--chip-w-bg);text-align:left;color:inherit} .sm-ev:hover{filter:brightness(1.08)} .sm-ev .sv-t{width:auto;min-width:66px;font-size:22px} .sm-ev .sv-x{flex:1} .sm-ev .sv-tt{font-size:16px} .sm-ev .sv-mm{font-size:13.5px} .sm-ev .sv-mm em{font-style:normal;font-weight:700;color:var(--teal-text)} .sm-ev.done .sv-t,.sm-ev.done .sv-tt{color:var(--sub)} .sm-ev.private{border-color:var(--chip-p-line);background:var(--chip-p-bg)} .sm-side > .sc-more{width:100%;margin-top:16px;padding-top:10px;border-top:1px solid var(--line)} .sm-side .empty{padding:6px 0} /* ---- タスクのタブ ---- */ .tk-top{display:flex;align-items:center;justify-content:space-between;gap:16px} .tk-lead{font-size:15px;color:var(--sub)} .tk-biz select{min-height:44px;padding:0 38px 0 14px;border-radius:10px;border:1px solid var(--line-3);background-color:var(--field);color:var(--ink);font-size:14.5px} :is(.pg-schedule,.pg-sales) .todos.tk-list{display:flex;flex-direction:column;gap:16px;margin-top:16px;padding:0;background:none;border:0;box-shadow:none} .tk-g{padding:6px 20px 6px;border-radius:16px;border:1px solid var(--frame-line);background:var(--frame-bg)} .tk-gh{display:flex;align-items:center;gap:10px;min-height:54px;border-bottom:1px solid var(--line)} .tk-gh h2{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700} .tk-gh .num{margin-left:auto;font-size:14.5px;color:var(--sub)} .tk-g.today .tk-gh h2::before,.tk-g.late .tk-gh h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--warn)} .tk-g.late .tk-gh h2{color:var(--warn)} :is(.pg-schedule,.pg-sales) .td.tk{display:flex;align-items:center;gap:6px;min-height:58px;padding:0;border-top:1px solid var(--line);position:relative} :is(.pg-schedule,.pg-sales) .tk-gh + .td.tk,.pg-schedule .done-fold > summary + .td.tk{border-top:0} :is(.pg-schedule,.pg-sales) .td.tk:hover{background:var(--line-2)} .tk-b{flex:1;min-width:0;display:flex;align-items:center;min-height:56px;padding:0 6px;text-align:left;color:inherit} .tk-n{flex:1;min-width:0;display:flex;align-items:center} .tk-n b{min-width:0;font-size:16.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-n .biz-tag{flex:none;margin-left:14px;height:26px;padding:0 10px;font-size:13.5px;vertical-align:0} .tk-m{display:flex;align-items:center;flex:none} .tk-bz{display:none} .tk-due{min-width:150px;padding-right:24px;text-align:right;font-size:14.5px;color:var(--sub)} .tk-nf{min-width:168px;padding-left:24px;border-left:1px solid var(--line-3);font-size:14.5px;color:var(--sub)} .td.tk.late .tk-due{color:var(--warn);font-weight:700} .td.tk.done .tk-n b{color:var(--sub);font-weight:600} .tk-fix{flex:none;color:var(--sub)} .tk-fix .ms{font-size:22px} .tk-fix:hover{color:var(--ink);background:var(--line-2)} .tk-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:2px 0 2px 6px;font-size:14.5px;font-weight:600;color:var(--sub)} .tk-more:hover{color:var(--ink)} .pg-schedule .done-fold.tk-g{margin-top:0;padding:0 20px;border-top:1px solid var(--frame-line)} .pg-schedule .done-fold.tk-g summary{min-height:54px;gap:10px;font-size:17px;color:var(--sub)} .pg-schedule .done-fold.tk-g summary .num{margin-left:auto;font-size:14.5px;font-weight:500} .pg-schedule .done-fold.tk-g[open] summary{border-bottom:1px solid var(--line)} .tk-empty{padding:18px 4px} /* ---- 幅が狭い時（会話の欄を開いた時など） ---- */ @container scpage (max-width:980px){ .sv-grid,.sm-grid{grid-template-columns:minmax(0,1fr)} .tk-nf{display:none} .tk-due{padding-right:8px;min-width:0} } /* ---- スマホ ---- */ @media (max-width:767.98px){ .pg-schedule .rc-head > .pg-acts{flex:1 1 100%} .sc-head .pg-acts .btn.sec{display:none} .sc-head .pg-acts .btn.pri{flex:1;min-height:56px;font-size:17px} .sc-sx{display:none} .pg-schedule > .sc-tabs{margin-top:20px} .pg-schedule > .sc-tabs + *{margin-top:24px} .sc-tabs{grid-template-columns:repeat(4,minmax(0,1fr))} .sv-grid,.sm-grid{grid-template-columns:minmax(0,1fr);gap:28px} .sv-dh h2{font-size:23px} .sv-list{display:flex;flex-direction:column;gap:10px;border:0;background:none;border-radius:0;overflow:visible} .pg-schedule .ev.sv,.pg-schedule .sv-list > .ev.sv + .ev.sv{min-height:84px;padding:0 12px 0 0;border:1px solid var(--line);border-radius:12px;background:var(--frame-bg)} .pg-schedule .ev.sv.next{margin:0;border-color:var(--teal-line);background:rgba(92,225,232,.05)} .pg-schedule .ev.sv.private::before{display:none} .sv-b{min-height:82px;padding:12px 0 12px 16px} .sv-t{width:auto;min-width:56px;font-size:20px} .sv-bar{display:block;flex:none;align-self:stretch;width:3px;margin:4px 14px 4px 8px;border-radius:2px;background:var(--teal-text)} .ev.sv.private .sv-bar{background:var(--priv)} .ev.sv.done .sv-bar{background:rgba(190,215,235,.5)} .sv-tt{font-size:17px} .sv-mm{font-size:14px} .m-cs,.m-cs + .m-dot,.m-city{display:none} .pg-schedule .ev.sv > .sv-go,.sv-map{display:none} .sv-nx{gap:0;height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--teal-line);color:var(--teal-text);font-size:13.5px;font-weight:700} .sv-nx b{min-width:0;height:auto;padding:0;background:none;font-size:inherit} .sv-nx b::after{content:"・"} .sv-nx span{height:auto;padding:0;border:0;color:inherit;font-size:inherit;font-weight:inherit} .sv-now{padding:2px 0 2px 2px;gap:8px;font-size:13.5px} .sv-now span{width:auto} .sv-list .mv-warn{margin:0} .sv-side{gap:16px;padding-top:24px;border-top:1px solid var(--line)} .sv-td{padding:0;border:0;background:none} .sv-td .sc-ch{justify-content:flex-start;gap:12px;padding-bottom:14px;border:0} .sv-td .sc-ch h2{font-size:19px} .sv-td .sc-ch .num{font-size:17px;font-weight:700} .sv-tl{display:flex;flex-direction:column;gap:10px} .tm{min-height:62px;padding:0 10px 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--frame-bg)} .tm-b span{display:none} .tm-b b{font-size:16.5px} .tm .sv-go{display:none} .sv-td > .sc-more{margin-top:6px} .pg-schedule .wday.sw{grid-template-columns:62px minmax(0,1fr);gap:4px 10px;padding:10px 12px;align-items:start} .sw-lab{flex-direction:column;align-items:flex-start;gap:0;min-height:0} .sw-lab b{font-size:16px} .sw-lab span{font-size:13px} .sw-evs{flex-direction:column;align-items:stretch;gap:6px} .sw-ev{width:100%;min-height:40px} .sw-none{line-height:40px} .sw-td{grid-column:2;font-size:13px} .sc-cal{padding:12px 12px 14px} .sc-bar{gap:6px} .sc-bar .cal-title{font-size:20px;padding:0 6px} .sc-today{margin-left:2px} .sc-bar .legend{width:100%;justify-content:flex-end;margin-left:0} .smc{align-items:center;min-height:58px;padding:6px 2px 6px;gap:4px} .smchips{display:none} .smdots{display:flex;gap:3px;justify-content:center} .smdots i{width:6px;height:6px;border-radius:50%;background:var(--teal-text)} .smdots i.private{background:var(--priv)} .smn{width:30px;height:30px;font-size:14.5px} .sm-side{padding:16px} .tk-top{display:none} :is(.pg-schedule,.pg-sales) .todos.tk-list{margin-top:0;gap:28px} .tk-g{padding:0;border:0;background:none} .tk-gh{min-height:0;margin-bottom:12px;border:0} .tk-gh h2{font-size:19px} .tk-gh .num{margin-left:4px;font-size:19px;font-weight:700;color:var(--ink)} :is(.pg-schedule,.pg-sales) .td.tk,:is(.pg-schedule,.pg-sales) .tk-gh + .td.tk,.pg-schedule .done-fold > summary + .td.tk{min-height:76px;padding:0 6px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--frame-bg)} :is(.pg-schedule,.pg-sales) .td.tk + .td.tk{margin-top:10px} .tk-b{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:10px 4px} .tk-n{width:100%} .tk-n b{font-size:17px} .tk-n .biz-tag{display:none} .tk-bz{display:inline;font-size:13.5px;color:var(--sub)} .tk-bz:not(:empty) + .tk-due::before{content:"";display:inline-block;width:1px;height:13px;margin:0 12px;background:var(--line-3);vertical-align:-1px} .tk-due{min-width:0;padding:0;text-align:left;font-size:13.5px} .tk-nf{display:none} .tk-more{display:flex;justify-content:center;width:100%;min-height:52px;margin:10px 0 0;border:1px solid var(--line);border-radius:12px;color:var(--teal-text);font-weight:700} .pg-schedule .done-fold.tk-g{padding:0;border:0} .pg-schedule .done-fold.tk-g summary{min-height:48px;padding:0 2px;font-size:17px} .pg-schedule .done-fold.tk-g[open] summary{border:0;margin-bottom:10px} } /* 1回目の見比べの直し：月の表に幅を（このページだけ少し広く）・札の題は2行まで・次の予定の札は題の横・週の日付の欄を広く */ .page.pg-schedule{max-width:1180px} .sv-l1{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px} .sv-map{text-decoration:none} .smchip i{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-break:normal;line-break:strict} .pg-schedule .wday.sw{grid-template-columns:150px minmax(0,1fr) auto} @media (max-width:767.98px){ .pg-schedule .wday.sw{grid-template-columns:62px minmax(0,1fr)} } /* 2回目の見比べの直し（スマホ）：古い予定の上の決まり（格子）を使わない・週の題は短く・タスクの上の間隔 */ .pg-schedule > .pg-head.sc-head{display:flex} .sc-bar .t-s{display:none} @media (max-width:767.98px){ .pg-schedule > .pg-head.sc-head{margin-right:0} .sc-bar .t-l{display:none} .sc-bar .t-s{display:inline} :is(.pg-schedule,.pg-sales) .todos.tk-list{margin-top:24px} .sv-l1{gap:8px} } /* タスクのまとまりを畳んだ時は、6件目（スマホは4件目）から見た目だけ隠す */ .tk-g.fold .td.tk.tk-x{display:none} /* 3回目の見比べの直し（スマホ）：今日の予定の行を手本の高さに詰める（1画面目に今日の予定が入るように） */ @media (max-width:767.98px){ .pg-schedule .ev.sv,.pg-schedule .sv-list > .ev.sv + .ev.sv{min-height:62px} .sv-b{min-height:60px;padding:9px 0 9px 14px} .sv-t{min-width:52px;font-size:18px} .sv-bar{margin:2px 12px 2px 6px} .sv-x{gap:2px} .sv-tt{font-size:16.5px;line-height:1.4} .sv-mm{font-size:13.5px;line-height:1.4} .sv-l1{gap:4px 8px} .sv-nx{height:28px;font-size:13px} .sv-k{height:28px;min-width:34px} .sv-list{gap:8px} .sv-dh{margin-bottom:12px} .sv-tag{height:28px;padding:0 12px;font-size:13.5px} .tm{min-height:56px} } /* =================================================================== * 中のページの色の役割（2026-10-30 大晴さん「この色がタイトル、この色が項目名と、色で直感的に、ここを見たら知りたい入口か分かるように」） * 字の色で「それが何か」を分ける。点や枠の色は「種類」（仕事・私用・事業）だけに使い、字の役割の色とぶつけない * ターコイズ … まとまりの見出し（入口。左に印）／押せる文字（右に › か ⌄）／「いま・次・今日」の印 * 白の太字 … 中身の名前（予定の題・タスク・お店・科目）と、答えの数字（件数・金額・時刻） * 灰色 … 欄の名前・日付・説明などの補足／済んだ物 * 琥珀色 … 気を付ける事（期限切れ・要確認・重なりかも）だけ * 点・枠 … 水色＝仕事・紫＝私用・事業は小さな点の色（札の字は灰色） * =================================================================== * 中のページの見出しの型（2026-10-30 大晴さん「今日まで などのタイトルの部分をターコイズに。社長が知りたい事を、見たらパッと分かるように」） * 1. ページの題（h1）：白・大きく（今のまま） * 2. まとまりの見出し：ターコイズの字＋左に同じ色の印。言葉は社長の問いのまま（今日の予定／今日までのタスク／明日の予定） * 3. 件数など答えの数字：白の太字で、見出しのすぐ横（右の端に離さない） * 4. 日付や説明などの補足：灰色・小さく * 5. 気を付ける見出し（期限切れ）だけ琥珀色。済んだ物は灰色 * 塗るのは今まで通り、主のボタンと選んでいるタブ・メニューだけ（見出しは字の色だけ） * =================================================================== */ .hd{display:flex;align-items:center;gap:8px;color:var(--teal-text);font-weight:700;letter-spacing:.04em} .hd > .ms{flex:none;font-size:1.15em;color:inherit} .hd .hd-n{margin-left:2px;color:var(--ink);font-size:inherit;font-weight:700;letter-spacing:.02em} .hd.warn{color:var(--warn)} .hd.mute,.hd.mute .hd-n{color:var(--sub)} .rc-head .pg-date b{color:var(--ink);font-weight:700} /* 予定のページ */ .sv-dh{gap:12px} .sv-dh h2.hd{font-size:22px} .sv-date{font-size:15px;color:var(--sub);margin-left:4px} .sc-ch{justify-content:flex-start} .sc-ch h2.hd{font-size:18px} .sv-nd-h.hd{font-size:17px;align-items:center} .sv-nd-s b{color:var(--ink);font-weight:700} .sm-side .sv-dh h2.hd{font-size:20px} .tk-gh h2.hd{font-size:19px} .tk-g.today .tk-gh h2::before,.tk-g.late .tk-gh h2::before{content:none} .pg-schedule .done-fold.tk-g summary{justify-content:space-between} .pg-schedule .done-fold.tk-g summary .hd{font-size:17px} .done-fold[open] summary .hd .ms{transform:none} .done-fold[open] summary .tk-fx{transform:rotate(180deg)} .pg-schedule .wday.sw.today .sw-lab b{color:var(--teal-text)} /* 領収書のページ */ .ld-2 > .ld-x > .ms{color:var(--teal-text)} .ld-x b.hd{display:flex;font-size:15px;margin-bottom:2px} @media (max-width:767.98px){ .sv-dh h2.hd{font-size:20px} .sv-date{font-size:14px;margin-left:0} .sv-td .sc-ch h2.hd{font-size:19px} .sv-nd-h.hd{font-size:16.5px} .tk-gh h2.hd{font-size:19px} } /* 色の役割に合わせた直し：事業の札は字を灰色にして、事業の色は小さな点だけ（CATV のターコイズ＝見出し、NURO の紫＝私用、ZTV の橙＝気を付ける、とぶつかっていた） * 押せる文字はターコイズで右に矢印・済んだ物は灰色 */ .pg-schedule .biz-tag,.pg-sales .biz-tag,.pg-receipts .biz-tag,.pg-ledger .biz-tag{gap:6px;color:var(--sub);background:rgba(150,195,235,.08)} .pg-schedule .biz-tag::before,.pg-sales .biz-tag::before,.pg-receipts .biz-tag::before,.pg-ledger .biz-tag::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bc)} .tk-more{color:var(--teal-text)} .tk-more:hover{color:var(--ink)} .sm-ev.done .sv-mm em{color:var(--sub)} .furi-b .furi-go{font-size:18px;margin-left:-2px} .sm-side .sv-dh{gap:10px} .sm-side .sv-dh h2.hd{font-size:18px;white-space:nowrap} .sv-tag{flex:none;white-space:nowrap} /* =================================================================== * お金のページ（2026-10-30 案A「静かな紺」・色の役割・見出しの型） * 上＝題・一行・主のボタン［残高を入れる］→ タブ「全体・売上と支出・入金と支払い・事業ごと」→ 中身 * 手本：02_案件/サンロード_AI秘書/素材/参考_20261029_中の画面/案A_お金_1〜5 * 古いお金の決まり（.b3・.tx-・.fl-row・.bz・.band など）は .pg-money の中で上書きする * 支出の色は水色〜灰色の濃さ違い（社会保険料の橙が「気を付ける」の琥珀色とぶつかっていたため） * =================================================================== */ .page.pg-money{gap:0;max-width:1180px;container-type:inline-size;container-name:mnpage;--sp-exp:#5CE1E8;--sp-itaku:#4FA8D8;--sp-rent:#C3D5E2;--sp-shaho:#7E93A6;--sp-other:#4A5B6C} .pg-money > * + *{margin-top:16px} .pg-money > .pg-head{margin-top:0} .pg-money .rc-head > .rc-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 0;min-width:0} .pg-money .rc-head > .pg-acts{display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:10px} .mn-head .btn.lg .ms{font-size:22px} .mn-fake{font-size:13px;margin-left:2px} .mn-in{position:relative} .mn-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:flex;flex-direction:column;gap:2px;min-width:250px;padding:6px;border-radius:14px;border:1px solid var(--line-3);background:#0B1A30;box-shadow:0 18px 40px rgba(0,0,0,.45)} .mn-pop[hidden]{display:none} .mn-pop button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink);text-align:left} .mn-pop button:hover{background:var(--line-2)} .mn-pop .ms{font-size:20px;color:var(--teal-text)} .pg-money > .mn-tabs{margin-top:28px} .pg-money > .mn-tabs + *{margin-top:36px} .pg-money .sc-card{padding:20px 22px} .mn-ch{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin-bottom:14px} .mn-ch h2.hd{font-size:19px} .mn-r{font-size:13.5px;color:var(--sub)} .hd .hd-s{margin-left:2px;font-size:.78em;font-weight:600;letter-spacing:0;color:var(--sub)} .mn-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--sub)} .mn-foot{display:none} /* 全体：答えの札4つ */ .mn-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .mn-tile{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:18px 20px 16px;border-radius:16px;border:1px solid var(--frame-line);background:var(--frame-bg)} .mn-tile h2.hd{font-size:16.5px;padding-right:22px} .mn-big b{font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--num-big)} .mn-big b small{font-size:.6em;margin-right:2px} .mn-s{font-size:13.5px;line-height:1.5;color:var(--sub)} .mn-s .ch-r{white-space:nowrap} .mn-l2{display:none} .mn-ok,.mn-ng{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)} .mn-ok .ms{font-size:20px;color:var(--teal-text)} .mn-ng,.mn-ng .ms{color:var(--warn)} .mn-ng .ms{font-size:20px} .mn-tile.go:hover{background:var(--card-2)} .mn-go{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;padding:16px 14px;border-radius:inherit;color:var(--sub)} .mn-go .ms{font-size:22px} /* この先、お金は足りる？ */ .pg-money .projc{padding:20px 22px 16px} .pg-money .pj-sum{gap:6px 28px;margin-top:10px;font-size:15px;color:var(--sub)} .pg-money .pj-sum b{margin-left:6px;font-size:20px;font-weight:700;color:var(--ink)} .pg-money .pj-ok{font-size:14px;color:var(--ink)} .pg-money .pj-ok .ms{color:var(--teal-text)} /* 入金と支払いの行（全体の3件・入金と支払いのタブ） */ .pg-money .fl-row{grid-template-columns:160px minmax(0,1fr) 160px;gap:12px;min-height:50px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:15px} .pg-money .mn-fl .fl-row:last-child,.pg-money .mn-fm .fl-row:last-child{border-bottom:0} .pg-money .fl-d{color:var(--sub)} .pg-money .fl-l{gap:10px} .pg-money .fl-row .fl-l .ms{font-size:18px;color:var(--sub)} .pg-money .fl-n{min-width:0;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pg-money .fl-l em{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--line-3);font-style:normal;font-size:12.5px;color:var(--sub)} .pg-money .fl-row .fl-a,.pg-money .fl-row.in .fl-a{font-size:16px;font-weight:700;color:var(--ink);text-align:right} .pg-money .fl-r{font-size:14.5px;color:var(--sub)} .fl-rl{display:none} .pg-money .fl-row.low .fl-r{font-weight:700;color:var(--warn)} .mn-flow > .mn-ch{margin-bottom:12px} .fl-cols{display:grid;grid-template-columns:160px minmax(0,1fr) 160px 200px;gap:12px;padding:0 24px 8px;font-size:13px;color:var(--sub)} .fl-cols span:nth-child(n+3){text-align:right} .pg-money .mn-flow .flow-list{gap:14px} .mn-fm{padding:4px 20px 2px;border-radius:16px;border:1px solid var(--frame-line);background:var(--frame-bg)} .mn-fmh{padding:12px 4px 10px;border-bottom:1px solid var(--line);font-size:19px;font-weight:700;color:var(--teal-text)} .pg-money .mn-flow .fl-row{grid-template-columns:160px minmax(0,1fr) 160px 200px} .pg-money .fl-sum{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin:14px 0 0;padding:16px 22px;font-weight:600} .pg-money .fl-sum > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .pg-money .fl-sum span{font-size:14.5px;font-weight:500;color:var(--sub)} .pg-money .fl-sum b{font-size:22px;color:var(--ink)} /* 期間の切り替え（選んでいる期間は塗らない） */ .mn-per{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .mn-seg{display:flex;gap:8px} .mn-seg button{min-height:44px;padding:0 18px;border-radius:10px;border:1px solid var(--line-3);font-size:15px;font-weight:600;color:var(--sub)} .mn-seg button:hover{color:var(--ink)} .mn-seg button[aria-pressed="true"]{border-color:var(--teal-line);background:rgba(92,225,232,.08);box-shadow:inset 0 0 0 1px var(--teal-line);color:var(--ink)} .mn-sel select{height:44px;min-width:150px;padding:0 36px 0 14px;border-radius:10px;border:1px solid var(--line-3);background-color:var(--field);font-size:15px;color:var(--ink)} .mn-sel.on select{border-color:var(--teal-line)} .mn-perl{margin-left:4px;font-size:14px;color:var(--sub)} /* 売上と支出 */ .pg-money .mn-sum{padding:4px 0} .pg-money .big3{gap:0} .pg-money .b3{gap:6px;padding:16px 24px 18px;border-radius:0;background:none} .pg-money .b3 + .b3{border-left:1px solid var(--line)} .pg-money .b3 h2.hd{font-size:17px} .pg-money .b3 b{margin-top:0;font-size:36px;font-weight:700;color:var(--num-big)} .pg-money .b3-m{font-size:13.5px} .pg-money .b3-k{color:var(--teal-text)} .pg-money .band{height:14px;margin:4px 0 12px;border-radius:7px} .pg-money .band span + span{border-left:2px solid #0B1A30} .sp-rows{display:flex;flex-direction:column} .sp-r{display:grid;grid-template-columns:minmax(0,1fr) 160px 80px;align-items:center;gap:12px;min-height:46px;border-bottom:1px solid var(--line);font-size:15px} .sp-r .sp-c{display:flex;align-items:center;min-width:0;font-weight:600;color:var(--ink)} .pg-money .sp-r .sp-dot{margin:0 12px 0 2px;border-radius:50%} .sp-y{text-align:right;font-weight:700;color:var(--ink)} .sp-p{text-align:right;color:var(--sub)} .sp-r.tot{border-bottom:0} .sp-r.tot .sp-c{font-size:16px;font-weight:700} .mn-tx{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .pg-money .tx-big{flex:1;flex-direction:column;align-items:flex-start;gap:6px} .pg-money .tx-big > b{font-size:40px;font-weight:700;color:var(--num-big)} .pg-money .tx-ready,.pg-money .tx-ready.ok,.pg-money .tx-ready.warn{margin:0;padding:0;border:0;background:none;font-size:14.5px;font-weight:600;color:var(--ink)} .pg-money .tx-ready.ok .ms{color:var(--teal-text)} .pg-money .tx-ready.warn,.pg-money .tx-ready.warn .ms{color:var(--warn)} .pg-money .tx-rows{display:flex;gap:0;margin:0} .pg-money .tx-rows > div{flex-direction:column;align-items:flex-start;gap:4px;padding:4px 28px;border-radius:0;border-left:1px solid var(--line);background:none} .pg-money .tx-rows span{font-size:13.5px;color:var(--sub)} .pg-money .tx-rows b{font-size:22px;font-weight:700;color:var(--ink)} .mn-how{margin-top:12px} .mn-how summary{display:inline-flex;align-items:center;gap:2px;min-height:40px;font-size:14.5px;font-weight:700;color:var(--teal-text);cursor:pointer;list-style:none} .mn-how summary::-webkit-details-marker{display:none} .mn-how[open] summary .ms{transform:rotate(180deg)} .mn-how p{margin-top:4px;font-size:13px;line-height:1.7;color:var(--sub)} /* 事業ごと */ .pg-money .fbiz,.pg-money .bzd{padding:20px 22px} .pg-money .bz{border-color:var(--line);background:var(--frame-bg)} .pg-money .bz.on{border-color:var(--teal-line);background:rgba(92,225,232,.06);box-shadow:none} .pg-money .bz-r.em b{color:var(--ink)} .pg-money .bz-h i,.pg-money .band-lg i{border-radius:50%} .pg-money .bz-in.hd{margin:20px 0 10px;font-size:16px} .pg-money .sstat{background:rgba(150,195,235,.05)} /* 幅が狭い時（会話の欄を開いた時など） */ @container mnpage (max-width:980px){ .mn-tiles{grid-template-columns:1fr 1fr} .fl-cols,.pg-money .mn-flow .fl-row{grid-template-columns:130px minmax(0,1fr) 120px 150px} } /* スマホ */ @media (max-width:767.98px){ .pg-money .rc-head > .pg-acts{flex:1 1 100%} .mn-in{width:100%} .mn-head .btn.pri{width:100%;min-height:56px;font-size:17px} .mn-pop{left:0;right:0} .mn-sx,.mn-fake{display:none} .mn-foot{display:block;margin-top:20px!important;text-align:center;font-size:12.5px;color:var(--sub)} .pg-money > .mn-tabs{margin-top:20px} .pg-money > .mn-tabs + *{margin-top:20px} .pg-money .sc-card{padding:16px} .mn-ch h2.hd{font-size:17.5px} .mn-tiles{grid-template-columns:1fr 1fr;gap:10px} .mn-tile{gap:4px;padding:14px 12px 12px} .mn-tile h2.hd{gap:6px;font-size:14px;padding-right:14px} .mn-big b{font-size:23px} .mn-s{font-size:12.5px} .mn-l{display:none} .mn-l2{display:inline} .mn-go{padding:12px 6px} .mn-go .ms{font-size:18px} .pg-money .pj-sum{gap:4px 16px;font-size:13.5px} .pg-money .pj-sum b{font-size:16px} .pg-money .fl-row,.pg-money .mn-flow .fl-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"d d" "l a" ". r";gap:2px 10px;padding:12px 0} .pg-money .fl-d{grid-area:d;font-size:13.5px} .pg-money .fl-l{grid-area:l} .pg-money .fl-a{grid-area:a;font-size:16px} .pg-money .fl-r{grid-area:r;font-size:12.5px;text-align:right} .pg-money .fl-n{white-space:normal} .fl-rl{display:inline} .fl-cols{display:none} .mn-fm{padding:2px 14px} .pg-money .fl-sum{grid-template-columns:1fr;padding:14px 16px} .pg-money .fl-sum b{font-size:19px} .mn-per{gap:8px} .mn-seg{flex:1 1 100%} .mn-seg button{flex:1;padding:0 8px;font-size:14px} .mn-sel{flex:1 1 auto} .mn-sel select{width:100%} .pg-money .big3{grid-template-columns:1fr} .pg-money .b3{flex-direction:column;align-items:flex-start;padding:12px 16px} .pg-money .b3 + .b3{border-left:0;border-top:1px solid var(--line)} .pg-money .b3 b{font-size:28px} .sp-r{grid-template-columns:minmax(0,1fr) auto 52px;font-size:14px} .mn-tx{flex-direction:column;align-items:stretch;gap:12px} .pg-money .tx-big > b{font-size:32px} .pg-money .tx-rows{gap:24px} .pg-money .tx-rows > div{padding:4px 0;border-left:0} .pg-money .fbiz,.pg-money .bzd{padding:16px} } /* 1回目の見比べの直し（スマホ）：上の一行は歯車の下まで使う・札の見出しは1行・入金と支払いの行の残高は横いっぱい・売上と支出の札は縦に */ @media (max-width:767.98px){ .mn-head .rc-ttl{padding-right:0} .mn-head h1{padding-right:56px} .mn-tile h2.hd{padding-right:0;font-size:13.5px;letter-spacing:0;gap:5px} .mn-go .ms{display:none} .pg-money .fl-row,.pg-money .mn-flow .fl-row{grid-template-areas:"d d" "l a" "r r"} .pg-money .fl-l{gap:8px} .pg-money .b3{flex-wrap:nowrap;justify-content:flex-start} .pg-money .b3-m{flex-basis:auto} } /* 全体：グラフの下のお知らせは1行（注意は小さく続ける） */ .pg-money .pj-ok{flex-wrap:wrap;gap:6px} .pg-money .pj-ok > span small{margin-left:10px;font-size:12.5px;color:var(--sub)} @media (max-width:767.98px){ .pg-money .pj-ok > span small{display:block;margin:2px 0 0} } .pg-money > .mn-tabs + .mn-tiles{margin-top:28px} .pg-money .mn-fl .fl-row{min-height:46px;padding:8px 4px} @media (max-width:767.98px){ .mn-s .ch-r{white-space:normal} } /* =================================================================== * 営業と目標のページ（2026-10-30 案A「静かな紺」・色の役割・見出しの型） * 営業＝タブ「お客様対応・工程表・タスク・数字」／目標＝タブ「目標・声かけ・日誌・秘書の頭脳」 * 手本：02_案件/サンロード_AI秘書/素材/参考_20261029_中の画面/案A_営業と目標_1〜6 * 古い決まり（.cs-row・.gl・.nd・.bsw・.cs-type など）は .pg-sales・.pg-goals の中で上書きする * =================================================================== */ .page.pg-sales,.page.pg-goals{gap:0;max-width:1180px;container-type:inline-size;container-name:slpage} .pg-sales > * + *,.pg-goals > * + *{margin-top:14px} .pg-sales > .pg-head,.pg-goals > .pg-head{margin-top:0} .pg-sales .rc-head > .rc-ttl,.pg-goals .rc-head > .rc-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 0;min-width:0} .pg-sales .rc-head > .pg-acts,.pg-goals .rc-head > .pg-acts{display:flex;flex:none;flex-wrap:nowrap;align-items:center;gap:10px} .sl-head .btn.lg .ms,.gl-head .btn.lg .ms{font-size:22px} .sl-gpt{display:inline-flex;align-items:center;gap:8px} .pg-sales > .sl-tabs,.pg-goals > .gl-tabs{margin-top:24px} .pg-goals > .gl-tabs + *{margin-top:28px} .pg-sales > .bsw{margin-top:14px} .pg-sales > .bsw + *{margin-top:16px} .pg-sales .sc-card,.pg-goals .sc-card{padding:18px 22px} .pg-sales .bsw-b{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-3);background:none;font-size:14px;color:var(--sub)} .pg-sales .bsw-b i{border-radius:50%} .pg-sales .bsw-b.on{border-color:var(--teal-line);background:rgba(92,225,232,.08);box-shadow:inset 0 0 0 1px var(--teal-line);color:var(--ink)} /* 種類の札：字は灰色、種類の色は小さな点だけ（どの画面でも） */ body.inner-on .cs-type{gap:6px;height:26px;padding:0 10px;border:1px solid var(--line-3);background:none;font-weight:600;color:var(--sub)} body.inner-on .cs-type::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sub)} body.inner-on .cs-type.t0::before{background:#8FC3F0} body.inner-on .cs-type.t1::before{background:#5CE1E8} body.inner-on .cs-type.t2::before{background:#2FA6B8} body.inner-on .cs-type.t3::before{background:var(--warn)} /* お客様対応 */ .sl-prop{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 18px;border-radius:14px;border:1px solid var(--frame-line);background:var(--frame-bg);text-align:left;color:var(--ink)} .sl-prop:hover{background:var(--card-2)} .sl-prop > .ms{font-size:22px;color:var(--sub)} .sl-pt{flex:1;min-width:0;font-size:15px;color:var(--sub)} .sl-pt b{font-weight:700;color:var(--ink)} .sl-prop .sc-more{flex:none;min-height:0} .pg-sales .cs-rows{display:flex;flex-direction:column;gap:14px} .sl-lk{display:flex;align-items:center;gap:18px;margin-left:auto} .sl-lk .sc-more{min-height:40px;font-size:14px} .pg-sales .cs-row{gap:6px;min-height:62px;padding:0;border-top:1px solid var(--line)} .pg-sales .tk-gh + .cs-row{border-top:0} .pg-sales .cs-row:hover{background:var(--line-2)} .pg-sales .cs-open{gap:0;min-height:60px;margin-left:0;padding:8px 6px;border-radius:0} .pg-sales .cs-open:hover{background:none} .pg-sales .cs-when{flex-direction:row;align-items:baseline;gap:6px;width:150px} .pg-sales .cs-when b{font-size:16px;font-weight:700} .pg-sales .cs-when small{font-size:14px;color:var(--ink)} .pg-sales .cs-row.today .cs-when b{color:var(--ink)} .pg-sales .cs-row.past .cs-when b,.pg-sales .cs-row.past .cs-tt b{color:var(--sub)} .pg-sales .cs-x{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 14px} .pg-sales .cs-tt{flex-wrap:nowrap;gap:12px} .pg-sales .cs-tt b{font-size:17px} .pg-sales .cs-mm{font-size:14px} .pg-sales .cs-row.done{opacity:1} .pg-sales .cs-row.done .cs-tt b{text-decoration:none;font-weight:600;color:var(--sub)} .sl-bd{display:flex;align-items:center;flex:none} .sl-bd:empty{display:none} .sl-bd .sv-k{white-space:nowrap} .sl-nx{display:inline-flex;align-items:center;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--teal-line);font-size:13.5px;font-weight:700;color:var(--teal-text);white-space:nowrap} .sl-nx b{font-weight:700} /* 工程表 */ .pg-sales .gantt-c{padding:20px 22px 16px} .pg-sales .gantt-c .ch h2{color:var(--teal-text)} .pg-sales .gantt-c .seg2 button[aria-pressed="true"]{background:rgba(92,225,232,.1);box-shadow:inset 0 0 0 1px var(--teal-line);color:var(--ink)} /* 数字 */ .sl-tiles{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:12px} .mn-tile.sl-t{padding:16px 16px 14px} .sl-t h2.hd{padding-right:0;font-size:15px;letter-spacing:.02em} .sl-nbig b{font-size:32px} .sl-nbig b small{margin:0 0 0 2px;font-size:.5em} .sl-pgb{display:flex;align-items:center;gap:8px;margin-top:4px} .sl-bt{flex:1;height:8px;overflow:hidden;border-radius:4px;background:rgba(150,195,235,.14)} .sl-bt i{display:block;height:100%;border-radius:4px;background:#5CE1E8} .sl-pgb b{font-size:13.5px;font-weight:600;color:var(--sub)} .sl-pl{position:relative;display:flex;height:170px;border-bottom:1px solid var(--line-3)} .sl-c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0} .sl-c b{margin-bottom:4px;font-size:13.5px;font-weight:600;color:var(--sub)} .sl-c i{display:block;width:46%;max-width:56px;border-radius:4px 4px 0 0;background:rgba(92,225,232,.42)} .sl-c.sl-cur i{background:#5CE1E8} .sl-c.sl-cur b{font-weight:700;color:var(--ink)} .sl-tg{position:absolute;left:0;right:0;border-top:1px dashed var(--line-3)} .sl-tg span{position:absolute;right:0;top:-19px;font-size:12.5px;color:var(--sub)} .sl-ml{display:flex;margin-top:6px} .sl-ml span{flex:1;text-align:center;font-size:13.5px;color:var(--sub)} .sl-ml .sl-cur{font-weight:700;color:var(--ink)} .pg-sales .sl-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:10px 22px} .sl-int{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)} .sl-int .ms{font-size:22px;color:var(--sub)} .sl-oth .mn-ch{margin-bottom:10px} .sl-fr{display:grid;grid-template-columns:1fr 1fr;gap:12px} .sl-f{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 18px;border-radius:14px;border:1px dashed var(--line-3);font-size:14px;color:var(--sub)} .sl-f i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--bc)} .sl-f b{flex:none;font-size:15px;font-weight:700;color:var(--ink)} /* 目標のカード */ .pg-goals .gl-grid{grid-template-columns:1fr 1fr;gap:14px} .pg-goals .gl-grid .gl.glc{display:flex;flex-direction:column;gap:8px;padding:16px 18px 10px;border:1px solid var(--frame-line);border-radius:16px;background:var(--frame-bg)} .pg-goals .gl.fin{opacity:.7} .gl-ttl{font-size:17px} .gl-no{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--teal-line);font-style:normal;font-size:14px;font-weight:700;color:var(--teal-text)} .gl-r{display:flex;align-items:center;gap:16px} .gl-pct{flex:none;font-size:36px;font-weight:700;line-height:1.1;color:var(--num-big)} .gl-pct small{margin-left:1px;font-size:.55em} .gl-rr{flex:1;min-width:0} .pg-goals .gl-bar{height:10px;margin:0 0 6px;border-radius:5px;background:rgba(150,195,235,.14)} .pg-goals .gl-bar i,.pg-goals .gl.reached .gl-bar i{background:#5CE1E8} .pg-goals .gl-m{font-size:14px} .pg-goals .gl-checks{margin-top:0} .pg-goals .gl-checks .chk-l{min-height:36px;font-size:14.5px;color:var(--ink)} .pg-goals .gl-acts{gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)} .pg-goals .gl-due{font-size:13.5px} .pg-goals .btn.sec.gl-fin{min-height:40px;padding:0 18px} .pg-goals .btn.sec.gl-fin.ready{border-color:var(--teal-line);color:var(--teal-text)} /* 声かけ（札は灰色。返事のボタンは塗らない：塗るのは上の主のボタンだけ） */ .pg-goals > .nd-f.mn-seg{flex-wrap:wrap;margin-top:18px} .pg-goals > .nd-f.mn-seg + *{margin-top:14px} .nd-f.mn-seg button{min-height:40px;padding:0 16px;border-radius:999px;font-size:14px} .pg-goals .nudges-c{display:flex;flex-direction:column;gap:14px} .pg-goals .nd-g .mn-ch,.pg-goals .gl-need .mn-ch{margin-bottom:4px;padding-bottom:10px;border-bottom:1px solid var(--line)} .pg-goals .nd{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:12px 0;border-top:1px solid var(--line)} .pg-goals .nd-list .nd:first-child{border-top:0} .pg-goals .nd .nd-t{height:26px;margin-top:0;padding:0 10px;border:1px solid var(--line-3);background:none;font-weight:600;color:var(--sub)} .pg-goals .nd p{font-size:15px;line-height:1.6;color:var(--ink)} .pg-goals .nd .pr-b{grid-column:3;flex-wrap:nowrap;align-items:center;margin-top:0} .pg-goals .nd .link-s{grid-column:3;justify-self:end;font-size:14.5px;font-weight:700;color:var(--teal-text);text-decoration:none;white-space:nowrap} .pg-goals .nd .link-s::after{content:" ›"} .pg-goals .gl-need .nd{grid-template-columns:auto minmax(0,1fr)} .pg-goals .gl-need .nd .pr-b{grid-column:2} .pg-goals .pr-b .btn.pri,:root[data-theme="dark"] body.inner-on .pg-goals .pr-b .btn.pri{border:1px solid var(--line-3);background:none;box-shadow:none;color:var(--ink);font-weight:700} .pg-goals .pr-b .btn.ghost{color:var(--teal-text)} /* 日誌・秘書の頭脳（見出しの色だけ。中身は次の段で作り直す） */ .pg-goals .goals-c.jr .ch h2{color:var(--teal-text)} .pg-goals .jr-week{background:rgba(92,225,232,.06)} /* 幅が狭い時（会話の欄を開いた時など） */ @container slpage (max-width:980px){ .sl-tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .pg-sales .cs-x{flex-direction:column;align-items:flex-start;gap:2px} .pg-goals .nd{grid-template-columns:auto minmax(0,1fr)} .pg-goals .nd .pr-b,.pg-goals .nd .link-s{grid-column:2;justify-self:start} } /* スマホ */ @media (max-width:767.98px){ .pg-sales .rc-head > .pg-acts,.pg-goals .rc-head > .pg-acts{flex:1 1 100%} .sl-head .btn.pri,.gl-head .btn.pri{flex:1;min-height:56px;font-size:17px} .sl-head .sl-gp{flex:none;width:56px;min-height:56px;padding:0} .sl-gpt,.sl-sx{display:none} .sl-tab i,.gl-tab i{display:none} .sl-tab{font-size:13.5px} .pg-sales > .sl-tabs,.pg-goals > .gl-tabs{margin-top:18px} .pg-goals > .gl-tabs + *{margin-top:18px} .pg-sales > .bsw{margin-top:12px} .pg-sales > .bsw + *{margin-top:12px} .pg-sales .sc-card,.pg-goals .sc-card{padding:14px 16px} .sl-prop{min-height:48px;padding:4px 12px 4px 14px} .sl-prop .sc-more{font-size:0;gap:0} .sl-prop .sc-more .ms{font-size:22px} .sl-lk{gap:12px} .sl-lk .sc-more{min-height:32px;font-size:13px} .pg-sales .cs-rows{gap:20px} .pg-sales .tk-g.sl-grp{padding:0;border:0;background:none} .pg-sales .sl-grp .tk-gh{min-height:0;margin-bottom:10px;border:0;flex-wrap:wrap} .pg-sales .sl-grp .tk-gh h2.hd{font-size:18px} .pg-sales .cs-row,.pg-sales .tk-gh + .cs-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;grid-template-areas:"ck op fx" ". bd fx";align-items:center;gap:0 2px;min-height:0;padding:6px 2px 8px 2px;border:1px solid var(--line);border-radius:12px;background:var(--frame-bg)} .pg-sales .cs-row + .cs-row{margin-top:10px} .pg-sales .cs-row .tk-ck{grid-area:ck} .pg-sales .cs-row .tk-fix{grid-area:fx} .pg-sales .sl-bd{grid-area:bd;padding:0 4px 4px} .pg-sales .cs-open{grid-area:op;flex-wrap:wrap;align-items:center;gap:2px 10px;min-height:0;padding:6px 4px} .pg-sales .cs-open::after{content:"";flex-basis:100%;order:2;height:0} .pg-sales .cs-when{width:auto;order:0} .pg-sales .cs-when b{font-size:15px} .pg-sales .cs-x,.pg-sales .cs-tt{display:contents} .pg-sales .cs-tt b{order:1;font-size:17px} .pg-sales .cs-type{order:3} .pg-sales .cs-mm{order:4;font-size:13.5px} .pg-sales .cs-mm .m-biz{display:none} .sl-tiles{grid-template-columns:1fr 1fr;gap:10px} .sl-tiles .sl-t:first-child{grid-column:1 / -1} .sl-nbig b{font-size:26px} .sl-pl{height:150px} .sl-c b,.sl-ml span{font-size:12.5px} .sl-fr{grid-template-columns:1fr} .sl-int{font-size:14px} .pg-sales .sl-in{padding:10px 16px} .pg-goals .gl-grid{grid-template-columns:1fr;gap:12px} .pg-goals .gl-grid .gl.glc{padding:14px 14px 8px} .gl-ttl{font-size:16px} .gl-pct{font-size:32px} .pg-goals .nd{grid-template-columns:auto minmax(0,1fr);gap:6px 10px} .pg-goals .nd .pr-b{grid-column:1 / -1;flex-wrap:wrap} .pg-goals .gl-need .nd .pr-b{grid-column:1 / -1} .pg-goals .nd .link-s{grid-column:2;justify-self:start} .pg-goals .nd p{font-size:14.5px} } /* 1回目の見比べの直し：目標のカードは左そろえ・枠の外の余白なし */ .pg-goals #goals,.pg-goals #nudges{padding:0;border:0;background:none;box-shadow:none} .pg-goals .gl-grid .gl.glc{align-items:stretch;text-align:left} /* 2回目の見比べの直し（スマホ）：声かけの絞り込みは折らない・札は本文の上 */ @media (max-width:767.98px){ .pg-goals > .nd-f.mn-seg{flex-wrap:nowrap;gap:6px} .nd-f.mn-seg button{flex:1 1 auto;min-height:40px;padding:0 10px;font-size:13.5px;white-space:nowrap} .pg-goals .nd{grid-template-columns:minmax(0,1fr);gap:6px} .pg-goals .nd .nd-t{justify-self:start} .pg-goals .nd .pr-b,.pg-goals .gl-need .nd .pr-b,.pg-goals .nd .link-s{grid-column:1} } /* 3回目の見比べの直し（スマホ）：顧客管理・済んだ物の字は見出しと同じ行に／「時間が過ぎました」は小さく */ @media (max-width:767.98px){ .pg-sales .sl-grp .tk-gh{flex-wrap:nowrap;gap:6px} .pg-sales .sl-grp .tk-gh h2.hd{flex:none;gap:6px;font-size:17px} .sl-lk{gap:6px} .sl-lk .sc-more{gap:0;min-height:32px;font-size:12.5px;letter-spacing:0;white-space:nowrap} .sl-lk .sc-more .ms{font-size:16px} .pg-sales .sl-bd .sv-k{height:24px;padding:0 8px;font-size:12.5px} .pg-sales .sl-nx{height:26px;font-size:13px} .pg-sales .cs-row,.pg-sales .tk-gh + .cs-row{padding-top:4px;padding-bottom:6px} } /* 窓の地は透けない紺に（2026-10-30：案A のカードの地〔薄い透明〕を窓も使っていて、裏の字が透けて読めなかった） */ :root[data-theme="dark"] body.inner-on .ov .dlg{background:#0B1A30} /* ===== 設定と秘書の頭脳のページ（2026-10-30 案A「静かな紺」・色の役割・見出しの型）===== */ .pg-settings .rc-head > .rc-ttl,.pg-brain .rc-head > .rc-ttl,.pg-invoice .rc-head > .rc-ttl,.pg-mail .rc-head > .rc-ttl{display:flex;flex-direction:column;align-items:flex-start;gap:0;flex:1 1 0;min-width:0} .pg-settings,.pg-brain,.pg-invoice,.pg-mail{gap:0} .pg-settings > .st-tabs,.pg-brain > .br-tabs,.pg-invoice > .iv-tabs,.pg-mail > .ml-tabs{margin-top:24px} .pg-settings > .st-tabs + *,.pg-brain > .br-tabs + *,.pg-invoice > .iv-tabs + *,.pg-mail > .ml-tabs + *{margin-top:28px} /* 設定：まとまりと行 */ .st-body{display:flex;flex-direction:column;gap:14px} .st-card{padding:18px 22px 8px} .st-card .mn-ch{margin-bottom:10px} .st-card h2.hd{gap:8px;margin-bottom:0;padding-bottom:0;background:none;font-size:19px} .st-card h2.hd .ms{font-size:1.15em;color:inherit} .st-demo-t{margin-left:4px;font-size:13px;font-style:normal;font-weight:600;letter-spacing:0;color:var(--sub)} .st-card .st-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;min-height:62px;padding:9px 0;border-top:1px solid var(--line)} .st-card .st-x{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:center;gap:2px 16px;min-width:0} .st-card .st-x > b{font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)} .st-card .st-x > span{min-width:0;font-size:14px;line-height:1.55;color:var(--sub)} .st-card .st-x > span:empty{display:none} .st-card .st-c{flex-wrap:nowrap;justify-content:flex-end;min-width:0} .st-card .st-c:empty{display:none} .st-card .st-seg{display:flex;flex-wrap:nowrap;gap:8px;max-width:none;overflow:visible} .st-card .st-seg button{flex:none;min-width:88px;padding:0 16px;white-space:nowrap} #st-notice .st-x,#st-talk .st-x{grid-template-columns:minmax(0,1fr)} .st-card .clock-sw{padding:0;border-radius:0;background:none;box-shadow:none} .st-note{margin:-2px 0 8px;font-size:14px;line-height:1.55;color:var(--sub)} .st-val{color:var(--ink)} .st-dot{width:10px;height:10px;border-radius:50%} .st-more{min-height:48px;gap:4px;border-top:1px solid var(--line);width:100%} .st-morew[hidden]{display:none} .st-callw{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .st-call{display:flex;align-items:center;gap:8px} .st-call input{width:220px;height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--line-3);background:none;font-size:15px;color:var(--ink)} .st-call input::placeholder{color:var(--sub)} .st-tts,.st-warn{display:block;font-size:13px;color:var(--sub)} .st-warn{color:var(--warn)} .st-card .wake-st{display:block;font-style:normal;font-size:13px;color:var(--sub)} .st-card .wake-st.on{color:var(--teal-text)} .st-card .sw{min-height:44px;padding:0} .st-card .sw span{display:none} .st-card .sw i{width:52px;height:30px;border-radius:15px;background:rgba(150,195,235,.2)} .st-card .sw i::after{top:3px;left:3px;width:24px;height:24px} .st-card .sw.on i{background:var(--teal-text)} .st-card .sw.on i::after{left:25px} .st-card .sc-more{justify-content:flex-start} /* 秘書の頭脳：探す欄・見出しのカード */ .bh-q{display:flex;align-items:center;gap:12px;height:52px;padding:0 16px;border:1px solid var(--frame-line);border-radius:12px;background:var(--frame-bg)} .bh-q .ms{flex:none;font-size:22px;color:var(--sub)} .bh-q input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:15.5px;color:var(--ink)} .bh-q input::placeholder{color:var(--sub)} .bh-q input::-webkit-search-cancel-button{-webkit-appearance:none} .bh-q:focus-within{border-color:var(--teal-line)} .br-note{margin:12px 0 14px;font-size:14px;line-height:1.6;color:var(--sub)} .br-body > .br-note:first-child{margin-top:0} .bh-list{display:flex;flex-direction:column;gap:14px} .bh{padding:16px 22px 8px} .bh-top{display:flex;align-items:center;justify-content:space-between;gap:2px 16px;flex-wrap:wrap;padding-bottom:12px} .bh-top h3.hd{font-size:19px;line-height:1.4} .bh-no{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-right:4px;border-radius:50%;border:1.5px solid var(--teal-line);font-size:14px;font-weight:700;letter-spacing:0;color:var(--teal-text)} .bh-d{font-size:13.5px;line-height:1.5;color:var(--sub)} .bh-lock{display:flex;align-items:center;gap:6px;margin:-8px 0 10px 40px;font-size:13.5px;line-height:1.5;color:var(--sub)} .bh-lock .ms{flex:none;font-size:17px} .bh-l{list-style:none} .bh-it{display:flex;align-items:center;gap:4px;padding:10px 0;border-top:1px solid var(--line)} .bh-tx{flex:1;min-width:0} .bh-it p{font-size:15.5px;font-weight:700;line-height:1.55;color:var(--ink)} .bh-it small{display:block;font-size:13px;line-height:1.5;color:var(--sub)} .bh-it[data-act]:hover p{color:var(--teal-text)} .bh-calc p{font-weight:500} .bh.fold .bh-x{display:none} .bh-more{width:100%;justify-content:flex-start;border-top:1px solid var(--line)} .bh-empty{padding:10px 0;border-top:1px solid var(--line);font-size:14px;color:var(--sub)} .bh-chk{margin:4px 8px 2px 0;border:1px solid var(--line-3);background:none;color:var(--sub);font-weight:600} .bh-chk .ms{color:inherit} .bh-chk.part{border-color:rgb(var(--gold-rgb) / .55);background:none;color:var(--warn)} .bh-chk.ask{background:none;color:var(--sub)} .kb-sh{margin-top:0;padding:16px 22px 12px} .kb-sh h3.hd{flex-wrap:wrap;margin-bottom:6px;font-size:17px;line-height:1.45} .kb-sh h3.hd .pill{font-weight:600} .kb-week{background:none;padding:6px 0 0;border-top:1px solid var(--line);margin-top:8px} .kb-it{padding:10px 0;border-top:1px solid var(--line)} .kb-x p{color:var(--ink)} /* 秘書の頭脳：出来事の記録・変えた事の記録 */ .br-card{padding:16px 22px 8px} .br-card .mn-ch{margin-bottom:8px} .br-card .lg-list{margin-top:0} .br-card .lg-row{grid-template-columns:128px 56px minmax(0,1fr);padding:10px 0;border-top:1px solid var(--line);cursor:pointer} .br-card .lg-row:hover .lg-t{color:var(--teal-text)} .br-card .lg-d{font-size:13.5px} .br-card .lg-k{font-weight:600;color:var(--sub)} .br-card .lg-t{color:var(--ink)} .br-card .kb-b .btn{min-height:40px} /* 秘書の頭脳：相談先（左に名簿・右に相談メモ） */ .sd-wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:16px;align-items:start} .sd-left h2.hd{margin-bottom:10px;font-size:19px} .sd-roster{grid-template-columns:minmax(0,1fr);margin:0} .sd-row{grid-template-columns:28px minmax(0,1fr) auto 20px;grid-template-rows:auto;align-items:center;gap:0 12px;min-height:72px;padding:8px 14px;border-color:var(--frame-line);background:var(--frame-bg)} .sd-row .sd-ic{grid-row:auto;margin-top:0;font-size:24px} .sd-row .sd-x b{font-size:16px} .sd-row .sd-x small{font-size:13px} .sd-row .sd-st{grid-column:auto;justify-self:end;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--line-3);background:none;font-size:13px;font-weight:600;white-space:nowrap;color:var(--sub)} .sd-row .sd-st.st-none{border-color:rgb(var(--gold-rgb) / .6);background:none;color:var(--warn)} .sd-row .sd-st.st-set{background:none;color:var(--sub)} .sd-row .sd-go{font-size:20px;color:var(--sub)} .sd-row.on{border-color:var(--teal-line);box-shadow:inset 0 0 0 1px var(--teal-line)} .sd-memo{padding:18px 22px 20px;border-radius:16px;border-color:var(--frame-line);background:var(--frame-bg)} .sd-memo h3{margin-bottom:8px;font-size:19px;line-height:1.4;letter-spacing:.04em;color:var(--teal-text)} .sd-memo h3 .ms{color:inherit} .sd-memo h4{margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line);font-size:16px;color:var(--ink)} .sd-memo .sd-state{font-size:14.5px;line-height:1.6;color:var(--sub)} .sd-memo .sd-topic{margin-top:6px;font-size:15px;color:var(--ink)} .sd-memo .sd-q{font-size:15px;line-height:1.65} .sd-memo .sd-bring,.sd-memo .sd-meet{margin:0;font-size:15px;color:var(--ink)} .sd-memo .mute{font-size:14.5px;line-height:1.65;color:var(--sub)} .sd-memo .btn{margin-top:14px} /* 左のメニューの「秘書の頭脳」：開いている時は枠を明るく */ .side .ss-kb.on{box-shadow:inset 0 0 0 1.5px var(--teal-line)} /* 修正の窓 */ .kb-ed{padding:0;border:0;border-radius:0;margin:0} /* スマホの入口（Mac は左のメニュー） */ .gl-brain{display:none} @media (min-width:1181px){ #st-secretary .st-x,#st-brain .st-x,#st-money .st-x,#st-biz .st-x{grid-template-columns:250px minmax(0,1fr)} } @media (max-width:1180px){ .st-card .st-x{grid-template-columns:minmax(0,1fr)} } @media (max-width:980px){ .sd-wrap{grid-template-columns:minmax(0,1fr)} } @media (max-width:767.98px){ .pg-settings > .st-tabs,.pg-brain > .br-tabs,.pg-invoice > .iv-tabs,.pg-mail > .ml-tabs{margin-top:16px} .pg-settings > .st-tabs + *,.pg-brain > .br-tabs + *,.pg-invoice > .iv-tabs + *,.pg-mail > .ml-tabs + *{margin-top:16px} .st-card,.bh,.br-card,.kb-sh{padding-left:16px;padding-right:16px} .st-card .st-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0} .st-card .st-row.is-sw{grid-template-columns:minmax(0,1fr) auto} .st-card .st-c{justify-content:flex-start;flex-wrap:wrap} .st-card .st-seg{flex:1 1 100%} .st-card .st-seg button{flex:1 1 auto;min-width:0;padding:0 6px;font-size:14px} .st-callw{align-items:stretch;width:100%} .st-call input{flex:1;width:auto;min-width:0;font-size:16px} .bh-q input{font-size:16px} .bh-top h3.hd{font-size:18px;gap:6px} .bh-top{padding-bottom:8px} #brain-kb .br-note,.bh-d{display:none} .bh-q + .bh-list,.bh-q + .br-note + .bh-list{margin-top:14px} .bh-lock{margin:-2px 0 10px 36px} .bh-del{display:none} .br-card .lg-row{grid-template-columns:auto minmax(0,1fr);gap:0 8px} .br-card .lg-t{grid-column:1 / -1} .sd-row{grid-template-columns:24px minmax(0,1fr) auto;padding:8px 12px;gap:0 10px} .sd-row .sd-go{display:none} .pg-goals .gl-need .nd{grid-template-columns:minmax(0,1fr)} .gl-brain{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:60px;margin-top:14px;padding:0 16px;color:var(--teal-text);text-align:left} .gl-brain > .ms:first-child{font-size:22px} .gl-brain .hd{flex:1;font-size:17px} .gl-brain > .ms:last-child{font-size:22px;color:var(--sub)} } /* ===== 工程表（2026-10-30 線の入った表に。行＝事業・列＝日）===== */ .gx-sums{display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;gap:6px 12px;margin-bottom:14px} .gx-bh{display:contents} .gx-bh i,.gx-lab i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--bc)} .gx-bh b{font-size:15px;font-weight:700;color:var(--ink)} .gx-cnt{font-size:14px;color:var(--sub);white-space:nowrap} .gx-nx{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:14px;color:var(--ink)} .gx-nx em{flex:none;font-style:normal;font-weight:700;color:var(--teal-text)} .gx-scroll{overflow-x:auto} .gx{--gx-lw:134px;--gx-solid:#fff;--gx-past:rgba(20,40,60,.04);min-width:calc(var(--gx-lw) + var(--gx-n) * 92px);border:1px solid var(--line-3);border-radius:12px;overflow:hidden} :root[data-theme="dark"] .gx{--gx-solid:#0B1A30;--gx-past:rgba(0,0,0,.14)} .gx-week + .gx-week{border-top:1px solid var(--line-3)} .gx-row{display:grid;grid-template-columns:var(--gx-lw) repeat(var(--gx-n),minmax(0,1fr))} .gx-head{background:rgba(150,195,235,.07)} .gx-lane{position:relative;border-top:1px solid var(--line-3)} .gx-lab{display:flex;align-items:center;gap:8px;min-width:0;padding:8px 10px 8px 12px} .gx-lab b{min-width:0;font-size:14px;font-weight:700;line-height:1.35;white-space:nowrap;color:var(--ink)} .gx-head .gx-lab{gap:6px} .gx-head .gx-lab b{color:var(--teal-text)} .gx-head .gx-lab small{font-size:13px;color:var(--sub)} .gx-c{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:88px;padding:calc(var(--gx-nb,0) * 32px + 8px) 8px 8px;border-left:1px solid var(--line-3);text-align:left} .gx-lane.none .gx-c{min-height:44px} .gx-c.past{background:var(--gx-past)} .gx-c.today{background:rgba(92,225,232,.1)} .gx-h{flex-direction:row;align-items:baseline;gap:6px;min-height:0;padding:8px 10px} .gx-h b{font-size:15px;font-weight:700;color:var(--ink)} .gx-h span{font-size:13px;color:var(--sub)} .gx-h.past b{font-weight:600;color:var(--sub)} .gx-h.today b,.gx-h em{color:var(--teal-text)} .gx-h em{margin-left:auto;font-size:13px;font-style:normal;font-weight:700} .gx-card,.gx-flag{display:block;width:calc(100% + 8px);min-width:0;margin:0 -4px;padding:2px 4px;border-radius:6px;text-align:left} .gx-card:hover,.gx-flag:hover{background:var(--line-2)} .gx-t{display:block;font-size:13px;font-weight:600;line-height:1.35;color:var(--sub)} .gx-n{display:block;font-size:14px;font-weight:700;line-height:1.4;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere;line-break:strict} .gx-flag{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:start;column-gap:4px} .gx-flag .ms{font-size:16px;margin-top:2px;color:var(--sub)} .gx-flag.late .ms,.gx-flag.late .gx-n,.gx-late{color:var(--warn)} .gx-late{flex:none;font-size:13px;font-weight:700} .gx-card.done,.gx-flag.done{opacity:.55} .gx-more{display:inline-flex;align-items:center;align-self:flex-start;min-height:28px;font-size:13px;font-weight:700;color:var(--teal-text)} .gx-more .ms{font-size:16px} .gx-bars{position:absolute;top:7px;left:var(--gx-lw);right:0;display:grid;grid-template-columns:repeat(var(--gx-n),minmax(0,1fr));grid-auto-rows:32px;pointer-events:none} .gx-bar{display:flex;align-items:center;min-width:0;height:26px;margin:0 4px;padding:0 10px;border-radius:6px;border:1px solid color-mix(in srgb,var(--bc) 60%,transparent);background:color-mix(in srgb,var(--bc) 24%,var(--gx-solid));pointer-events:auto;text-align:left} .gx-bar .gx-n{overflow:hidden;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;text-overflow:ellipsis} .gx-bar.to-r{margin-right:0;border-right:0;border-radius:6px 0 0 6px} .gx-bar.from-l{margin-left:0;border-left:0;border-radius:0 6px 6px 0} .gx-bar.from-l.to-r{border-radius:0} .gx-w6 .gx-h{padding:8px 10px} .gx-wk{gap:4px;min-height:76px} .gx-wk:hover{background:var(--line-2)} .gx-wk.today:hover{background:rgba(92,225,232,.16)} .gx-wn{display:flex;flex-wrap:wrap;gap:0 12px;font-size:13px;color:var(--sub)} .gx-wn b{font-size:15px;font-weight:700;color:var(--ink)} .gx-wk .gx-n{display:flex;align-items:center;gap:3px;font-size:13px;font-weight:600} .gx-wk .gx-n .ms{flex:none;font-size:15px;color:var(--sub)} .gx-none{font-size:13px;color:var(--sub)} /* 狭い幅（会話の欄を開いた時・タブレット）：事業の列を細くして、7日分を横に収める */ @media (max-width:1180px){ .gx{--gx-lw:92px;min-width:calc(var(--gx-lw) + var(--gx-n) * 72px)} .gx-lab{gap:6px;padding:8px 6px 8px 8px} .gx-lab b{white-space:normal;font-size:13.5px} .gx-head .gx-lab{flex-direction:column;align-items:flex-start;gap:0} .gx-c{padding-left:6px;padding-right:6px} .gx-h{flex-wrap:wrap;gap:0 4px;padding:6px} .gx-h em{flex-basis:100%;margin-left:0} .gx-bar{padding:0 6px} } /* スマホの工程表（日ごとの縦の一覧）：線で区切る。前は .flag（領収書の札）と名前がぶつかり、高さ 20px で2行の文がはみ出していた */ .gx-days{gap:0;border:1px solid var(--line-3);border-radius:12px;overflow:hidden} .gd{padding:10px 12px;border-top:1px solid var(--line-3)} .gd:first-child{border-top:0} .gd.today{padding:10px 12px;border-radius:0;background:rgba(92,225,232,.1)} .gd h3{margin-bottom:2px;color:var(--ink)} .gd.today h3{color:var(--teal-text)} .gd.today h3 .num{color:var(--ink)} .gd-it{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:44px;margin:0;padding:9px 0;border-top:1px solid var(--line);border-radius:0;background:none;box-shadow:none;text-align:left} .gd-it .ms{flex:none;margin-top:2px;font-size:17px;color:var(--sub)} .gd-t{flex:none;min-width:55px;font-size:14px;font-weight:600;line-height:1.55;color:var(--sub)} .gd-it.is-due .gd-t{min-width:30px} .gd-it.late .ms,.gd-it.late .gd-t{color:var(--warn)} .gd-n{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1.5;white-space:normal;color:var(--ink)} .gd-b{flex:none;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;line-height:1.75;color:var(--sub)} .gd-b::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--bc)} /* お客様対応の日時の列：日付と時刻を別の列にして、名前に重ならないように（長い日付でも折らない） */ @media (min-width:768px){ .pg-sales .cs-when{display:grid;grid-template-columns:118px 46px;align-items:baseline;gap:0 6px;width:170px} .pg-sales .cs-when b{white-space:nowrap} .pg-sales .cs-tt b{flex:none;white-space:nowrap} } /* 窓の見出しの札（その他・タスクなど）：上の題と左をそろえ、少し間を空ける */ .dlg-hd p > .cs-type,.dlg-hd p > .kindtag{margin:6px 6px 0 0} /* ================= 請求書と会社のメールのページ（2026-10-31） ================= */ .nav-b.on .soon-t{color:inherit;box-shadow:inset 0 0 0 1px currentColor} :root[data-theme="dark"] body.inner-on .nav-b.on .soon-t{background:#03141E;color:#EAF4F7;box-shadow:none} .iv-head h1{display:flex;align-items:center;gap:12px} .iv-head .soon-t{margin:0;padding:6px 10px;font-size:14px;color:var(--sub);box-shadow:inset 0 0 0 1px var(--line-3)} .iv-body{display:flex;flex-direction:column;gap:32px} .iv-sec > h2.hd{margin:0 2px 2px;font-size:22px} .iv-none{padding:14px 16px;border-radius:12px;background:var(--frame-bg);border:1px solid var(--frame-line);font-size:15px;color:var(--sub)} .iv-note{margin-bottom:-4px} .rc-note > span.iv-note-t{font-weight:500} .iv-all{align-self:flex-start;margin-top:-20px} .rlist .iv-row{grid-template-columns:116px minmax(0,1fr) auto auto;width:100%;text-align:left} .rlist .iv-row .iv-thumb{height:72px;background:#fff;outline:1px solid var(--line);outline-offset:-1px} .iv-thumb .iv-paper{position:absolute;left:50%;top:0;width:420px;transform:translateX(-50%) scale(.276);transform-origin:top center;box-shadow:none} .rlist .iv-row.is-done .rr-a{color:var(--sub)} .iv-go{display:inline-flex;align-items:center;gap:2px;font-size:15.5px;font-weight:700;color:var(--teal-text);white-space:nowrap} .iv-go .ms{font-size:20px} /* 請求書の紙（いつも白い紙に黒い字） */ .iv-paper{position:relative;box-sizing:border-box;width:100%;padding:40px 32px 36px;background:#fff;color:#1A2430;font-size:14px;line-height:1.6;box-shadow:0 0 0 1px var(--line-3)} .iv-paper > em{position:absolute;right:10px;top:10px;padding:0 6px;border:1px solid #C9D1D9;border-radius:4px;font-size:12px;font-style:normal;color:#5F6B78} .iv-paper h3{margin:0 0 22px;font-size:26px;font-weight:700;letter-spacing:.3em;text-align:center} .ip-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px} .ip-top b{font-size:17px;font-weight:700} .ip-top span{flex:none;font-size:13.5px;text-align:right} .ip-sum{display:flex;align-items:baseline;justify-content:center;gap:20px;margin:18px 0;padding:12px 0;border-top:1.5px solid #1A2430;border-bottom:1.5px solid #1A2430} .ip-sum b{font-size:28px;font-weight:700} .iv-paper table{width:100%;border-collapse:collapse} .iv-paper th,.iv-paper td{padding:8px 10px;border:1px solid #C9D1D9;font-size:14px;color:#1A2430} .iv-paper th{background:#EEF1F4;font-weight:700;text-align:center} .iv-paper td:last-child{text-align:right;white-space:nowrap} .ip-tot td{font-weight:700} .iv-paper dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:18px 0 0;font-size:14px} .iv-paper dt{font-weight:700} .iv-paper dd{margin:0} /* 1件の窓 */ .dlg-iv,.dlg-rcv{width:min(1040px,100%)} .dlg-ivf{width:min(520px,100%)} .dlg-iv .dlg-hd h2,.dlg-rcv .dlg-hd h2{font-size:24px} .dlg-iv .dlg-ft,.dlg-rcv .dlg-ft{padding-left:24px;padding-right:24px} .iv-dlg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:28px;align-items:start} .iv-side{display:flex;flex-direction:column;gap:12px;min-width:0} .iv-side h3.hd{font-size:19px} .iv-cks{border-top:1px solid var(--line);margin-bottom:10px} .iv-ck{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;padding:9px 8px;border-bottom:1px solid var(--line)} .iv-ck > span{font-size:14.5px;color:var(--sub)} .iv-ck b{display:block;font-size:17.5px;font-weight:700;color:var(--ink)} .iv-ck small{display:block;font-size:13.5px;line-height:1.5;color:var(--sub)} .iv-txh{display:flex;align-items:center;justify-content:space-between;gap:12px} .iv-tx{box-sizing:border-box;width:100%;padding:12px 16px;border:1px solid var(--frame-line);border-radius:12px;font-size:15.5px;line-height:1.75;color:var(--ink);white-space:pre-wrap;background:none} textarea.iv-tx{display:block;min-height:150px;resize:vertical;font-family:inherit;outline:0} textarea.iv-tx:focus{border-color:var(--teal-line)} .iv-ftn{font-size:14.5px;color:var(--sub)} .iv-form{display:flex;flex-direction:column;gap:14px} /* 会社のメール */ .ml-tabs{grid-template-columns:repeat(3,minmax(0,1fr))} .ml-wrap{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);gap:16px;align-items:start} .ml-left h2.hd{margin-bottom:10px;font-size:19px} .ml-list{display:flex;flex-direction:column;gap:8px} .ml-row{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:10px;width:100%;min-height:76px;padding:10px 12px 10px 18px;border:1px solid var(--frame-line);border-radius:12px;background:var(--frame-bg);text-align:left} .ml-row:hover{border-color:var(--line-3)} .ml-row.on{border-color:var(--teal-line);box-shadow:0 0 0 1px var(--teal-line)} .ml-x{min-width:0} .ml-x b{display:block;font-size:16.5px;font-weight:700;line-height:1.45;color:var(--ink)} .ml-x small{display:block;font-size:14px;line-height:1.5;color:var(--sub)} .ml-due{font-size:14.5px;color:var(--sub);white-space:nowrap} .ml-due.today{font-weight:700;color:var(--teal-text)} .ml-row .flag{height:26px;padding:0 10px;font-size:13.5px;border:1px solid var(--warn-line)} .ml-go{font-size:20px;color:var(--sub)} .ml-view{padding:20px 24px 16px} .ml-view > h2.hd{font-size:19px} .ml-sub{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;color:var(--sub)} .ml-back,.ml-today{display:none} .ml-warn{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:10px 14px;border-radius:10px;background:var(--warn-bg);border:1px solid var(--warn-line);font-size:14.5px;line-height:1.65;color:var(--warn)} .ml-warn .ms{flex:none;font-size:20px;margin-top:1px} .ml-sec{padding:14px 0;border-bottom:1px solid var(--line)} .ml-sec h3{display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:700;color:var(--ink)} .ml-sec p{margin:6px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink)} .ml-sh{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px} .ml-sh .sc-more{min-height:32px} .ml-sec p.iv-tx{margin:0} .ml-pts{margin:6px 0 0;padding-left:1.6em;display:flex;flex-direction:column;gap:2px;font-size:15.5px;line-height:1.7;color:var(--ink)} .ml-pts li::marker{font-family:Inter,'Noto Sans JP',sans-serif;font-weight:600;color:var(--teal-text)} .ml-orig{margin-top:6px} .ml-orig .ms{font-size:22px} .ml-body{margin:4px 0 0} .ml-ft{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:10px} .ml-ftn{flex:1 1 auto;min-width:0;font-size:14px;line-height:1.5;color:var(--sub)} @media (max-width:1180px){ .rlist .iv-row{grid-template-columns:96px minmax(0,1fr) auto auto;gap:16px} .rlist .iv-row .iv-thumb{width:96px;height:64px} .iv-thumb .iv-paper{transform:translateX(-50%) scale(.229)} .rlist .iv-row .rr-a{font-size:22px} .iv-row .rr-m .sl-sx{display:none} } @media (max-width:980px){ .ml-wrap,.iv-dlg{grid-template-columns:minmax(0,1fr)} .iv-dlg > .iv-paper{order:2} } @media (max-width:767.98px){ .iv-note{display:none} .iv-body > .iv-note:has(.iv-note-t){display:flex} .iv-note-t{font-size:14px;line-height:1.5} .iv-body{gap:24px} .iv-all{margin-top:-12px} .pg-invoice .pg-acts .btn.pri{flex:1;min-height:56px;font-size:17px} .pg-invoice .pg-acts .btn.sec{display:none} .rlist .iv-row{grid-template-columns:72px minmax(0,1fr) auto;gap:4px 12px} .rlist .iv-row .iv-thumb{width:72px;height:64px} .iv-thumb .iv-paper{transform:translateX(-50%) scale(.172)} .rlist .iv-row .rr-a{font-size:18px} .rlist .iv-row .rr-p{white-space:nowrap} .rlist .iv-row .rr-t{flex-wrap:wrap} .rlist .iv-row .iv-go{display:none} .iv-sec > h2.hd{font-size:20px} .iv-paper{padding:32px 20px 24px} .pg-mail:has(.ml-wrap.open) .rc-head,.pg-mail:has(.ml-wrap.open) .ml-tabs,.ml-wrap.open .ml-left,.ml-wrap:not(.open) .ml-view{display:none} .pg-mail:has(.ml-wrap.open) .ml-wrap{margin-top:0} .ml-x small{font-size:13.5px} .ml-row.on{border-color:var(--frame-line);box-shadow:none} .ml-view{padding:0;background:none;border:0;border-radius:0} .ml-back{display:inline-flex;min-height:44px;margin:-4px 52px 6px -4px} .ml-view > h2.hd{color:var(--ink);font-size:25px;line-height:1.35;letter-spacing:.01em} .ml-view > h2.hd > .ms{display:none} .ml-sub{padding-bottom:0;border:0;font-size:14px} .ml-today{display:block;margin:2px 0 0;font-size:15px;font-weight:700;color:var(--teal-text)} .ml-sec{margin-top:12px;padding:14px 16px;border:1px solid var(--frame-line);border-radius:14px;background:var(--frame-bg)} .ml-sec h3{color:var(--teal-text);font-size:18px} .ml-sec h3::before{content:"";flex:none;width:5px;height:22px;border-radius:3px;background:currentColor} .ml-what{display:none} .ml-pts{margin-top:8px} .ml-orig{margin-top:8px} .ml-ft{flex-direction:column;align-items:stretch;margin-top:6px} .ml-ft .btn{min-height:52px;width:100%} .ml-ft .btn.pri{order:-1;font-size:16.5px} .ml-ftn{order:0;text-align:center} } /* ---- ログイン（2026-10-31 案A。手本：素材/参考_20261029_中の画面/案A_ログイン_1・2）---- * 平らな紺に枠1つ。ターコイズで塗るのは主のボタン1つだけ。文字は大きめ（手本の 1512×945 と 390×844 の寸法） */ body.login-on > :not(.login){visibility:hidden} .login{--login-line:var(--line-3);position:fixed;inset:0;z-index:130;display:flex;overflow-y:auto;padding:32px 24px 0;background:var(--page-bg,var(--bg));color:var(--ink);-webkit-overflow-scrolling:touch} :root[data-theme="dark"] .login{--login-line:rgba(90,165,240,.6)} .login-in{display:flex;flex-direction:column;align-items:center;width:100%;max-width:578px;margin:auto;padding-bottom:90px} .login-logo{display:block;width:228px;height:auto;margin:0 0 44px} .login-card{display:flex;flex-direction:column;width:100%;padding:36px 33px 32px;border:1px solid var(--login-line);border-radius:10px;background:transparent} .login-card h1{margin:0;font-size:46px;font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--hl)} .login-lead{margin:10px 0 0;font-size:21px;line-height:1.6;letter-spacing:0;color:var(--sub);overflow-wrap:anywhere} .login-card .fld{gap:8px;margin-top:30px} .login-card .fld > span:first-child{font-size:23px;color:var(--hl);letter-spacing:.02em} .login-card input{width:100%;height:70px;padding:0 26px;border:1px solid var(--frame-here-line);border-radius:12px;background:var(--field);color:var(--ink);font-size:24px;transition:border-color .18s,box-shadow .18s} .login-card input:focus{outline:none;border-color:var(--cy-hi);box-shadow:0 0 0 1px var(--cy-hi)} .login-card .login-code{margin-top:26px;font-size:30px;font-weight:500;letter-spacing:.3em;font-variant-numeric:tabular-nums} .login-say{margin:14px 0 0;font-size:18px;font-weight:700;line-height:1.6;color:var(--hl)} .login-say:empty{display:none} .login-card .btn{width:100%;min-height:72px;margin-top:26px;font-size:26px;border-radius:12px} .login-foot{margin:30px 0 0;font-size:21px;line-height:1.6;color:var(--sub);text-align:center} .login-more{display:flex;flex-direction:column;align-items:center;margin-top:32px;text-align:center} .login-more .link-b{margin:0;font-size:19px} .login-more .link-b .ms{font-size:24px} .login-help{margin:0 0 8px;font-size:17px;line-height:1.7;color:var(--sub)} .login-help p{margin:0} @media (max-width:767.98px){ .login{align-items:flex-start;padding:62px 22px 0} .login-in{max-width:none;margin:0 auto;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))} .login-logo{width:86px;margin-bottom:48px} .login-card{padding:30px 24px 24px} .login-card h1{font-size:min(28px,7.2vw)} .login-lead{margin-top:12px;font-size:16px} .login-card .fld{margin-top:24px} .login-card .fld > span:first-child{font-size:16px} .login-card input{height:54px;padding:0 18px;font-size:18px} .login-card .login-code{margin-top:20px;font-size:22px} .login-say{margin-top:12px;font-size:15px} .login-card .btn{min-height:52px;margin-top:18px;font-size:18px} .login-foot{margin-top:28px;font-size:15px} .login-more{margin-top:24px} .login-more .link-b{font-size:16px} .login-more .link-b .ms{font-size:20px} .login-help{font-size:15px} } /* ---- 撮る（本物。2026-11-01 案A。手本：素材/参考_20261029_中の画面/案A_撮る_*）---- */ .on-real .dlg-shoot{width:min(560px,100%)} .on-real .dlg-shoot .dlg-hd{border-bottom:0;padding-bottom:8px} .on-real .dlg-shoot .dlg-hd h2{font-size:24px} .on-real .dlg-shoot .dlg-ft{background:none} .sh-acts{display:flex;flex-direction:column;gap:12px} .sh-acts .btn{width:100%;min-height:64px;font-size:18px;gap:10px} .sh-acts .sh-s{text-align:center} .sh-s{margin:0;font-size:13.5px;line-height:1.6;color:var(--sub)} .sh-t{margin:0;font-size:15.5px;font-weight:700;line-height:1.6;color:var(--ink)} .sh-read{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center} .sh-ph{display:flex;align-items:center;justify-content:center;width:min(100%,300px);height:min(44vh,320px);border-radius:8px;overflow:hidden;background:var(--bg-2);flex:none} .sh-ph img{display:block;width:100%;height:100%;object-fit:contain} .sh-ph .ms{font-size:56px;color:var(--sub)} .sh-read .read-bar{width:min(100%,300px);margin:6px 0} .on-real .dlg-shoot .sh-ft{flex-direction:column;align-items:stretch;gap:10px;text-align:center;border-top:0} .sh-ft .btn{width:100%;min-height:56px;font-size:17px} .shot-c{margin-left:10px} .dlg-shoot .dlg-hd p b{color:var(--ink)} .shot-list{padding-top:4px;padding-bottom:4px;border-top:1px solid var(--line)} .sh-row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 0;text-align:left;border-top:1px solid var(--line)} .sh-row:first-child{border-top:0} .sh-th{display:flex;align-items:center;justify-content:center;flex:none;width:88px;height:88px;border-radius:10px;overflow:hidden;background:var(--bg-2)} .sh-th img{display:block;width:100%;height:100%;object-fit:cover} .sh-th .ms{font-size:36px;color:var(--sub)} .sh-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px} .sh-x b{font-size:16px;font-weight:700;line-height:1.45;color:var(--ink)} .sh-x small{font-size:13.5px;line-height:1.5;color:var(--sub)} .sh-x .read-bar{display:block;width:100%} .sh-x .sh-w,.sh-w{color:var(--warn)} .sh-a{flex:none;font-size:18px;font-weight:700;color:var(--ink)} .sh-row > .ms{flex:none;font-size:22px;color:var(--teal-text)} .sh-row > .btn{flex:none} /* 本物の写真。枠の大きさは場所ごとに決め、写真は枠に収める。横向きは枠の縦横を入れ替えて回す */ .paper.k-photo{padding:0;background:transparent;border:0;box-shadow:none;overflow:hidden;container-type:size} .k-photo img{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:translate(-50%,-50%) rotate(var(--prot,0deg))} .k-photo.k-side img{width:100cqh;height:100cqw} .thumb:not(.xl):not(.pv) .k-photo img{object-fit:cover;object-position:center top} .thumb:has(.k-photo),.rlist .rrow .thumb:has(.k-photo){background:var(--bg-2)} .k-photo.miss::after{content:'写真を読み込めませんでした';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;font-size:13px;line-height:1.5;text-align:center;color:var(--sub)} .k-pdf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--sub);font-size:13px;font-weight:700} .k-pdf .ms{font-size:32px} .thumb .paper.k-photo,.rlist .rrow .thumb .paper.k-photo{left:0;top:0;width:100%;height:100%;transform:none;zoom:1} .thumb.lg .paper.k-photo{left:0;top:0;transform:none} .on-real .thumb.xl,.on-real .rv-ph{width:100%} .thumb.xl .paper.k-photo{width:min(100%,300px);height:min(52vh,420px);zoom:1} .dlg-review .thumb.xl .paper.k-photo{width:min(100%,420px);height:min(58vh,480px);zoom:1} .thumb.pv .paper.k-photo{width:100%;height:auto;aspect-ratio:3/4} .ph-view{position:fixed;inset:0;z-index:130;background:#050C14} .ph-sc{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch} .ph-sc canvas{display:block;margin:0 auto;width:max(100%,900px);max-width:1400px;height:auto} .ph-x{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:48px;height:48px;border-radius:50%;background:rgba(5,12,20,.72);color:#fff} /* まだ読めていない写真（領収書のページ） */ .rc-uh{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:20px;font-weight:700;color:var(--teal-text)} .rc-uh .ms{font-size:24px} .rc-uh b{margin-left:6px;color:var(--ink)} .rc-ul{display:flex;flex-direction:column;gap:8px;margin-bottom:24px} .rc-u{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:12px;background:var(--frame-bg);border:1px solid var(--frame-line)} .rc-uo{flex:1;min-width:0;display:flex;align-items:center;gap:18px;text-align:left} .rc-uo .thumb{width:116px;height:68px;border:0;border-radius:8px} .rc-ux{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .rc-ux b{font-size:17px;font-weight:700;line-height:1.5;color:var(--ink)} .rc-ux .sh-w{color:var(--warn)} .rc-ux small{font-size:14px;line-height:1.5;color:var(--sub)} .rc-ub{display:flex;gap:8px;flex:none} .ov.shot .dlg-review{max-height:none} @media (max-width:767.98px){ .dlg-review .thumb.xl .paper.k-photo{width:100%;height:calc(38vh - 28px)} .sh-t{font-size:14.5px} .dlg-review .rv-ft.shot-ft{display:grid;grid-template-columns:1fr 1fr;gap:10px} .shot-ft .sp{display:none} .dlg-review .rv-ft.shot-ft .btn.pri.lg{grid-column:auto;order:0;min-width:0;min-height:50px;font-size:17px} .shot-ft .rt-l{display:none} .shot-ft .rt-s{display:inline} .sh-th{width:72px;height:72px} .sh-row{gap:12px} .rc-u{flex-wrap:wrap;padding:8px} .rc-u > .rr-go{display:none} .rc-uo{flex-basis:100%;gap:12px} .rc-uo .thumb{width:78px;height:62px} .rc-ub{flex:1;justify-content:flex-end} } /* ---- 月ごとの獲得件数：スマホは目標の文字をグラフの上の1行に出す（線の上だと棒の数字と重なる。2026-11-01）---- */ .sl-lg{display:none} @media (max-width:767.98px){ .sl-lg{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin:0 0 6px;font-size:12.5px;color:var(--sub)} .sl-lg i{width:18px;border-top:1px dashed var(--line-3)} .sl-tg span{display:none} } /* ---- 本番（backend が true）では見本の帯と見本の操作を出さない ---- */ .on-real .dbar,.on-real .sh-demobtn,.on-real .pg-demo{display:none} /* つなぐ週までは話しかけられないので、スマホの下の帯は［撮る］を主にする。タブは出すページの数だけ並べる */ .on-real .tabs{grid-template-columns:repeat(3,1fr)} .on-real .dock-talk{display:none} .on-real .dock-shoot{flex:1;justify-content:center}