/* ビルメンAIオフィス 顧客ポータル — デザイン部品
------------------------------------------------------------------
画面はすべてこのファイルの部品で作る。テンプレートに色やサイズを
直接書かないこと。色はこの先頭にある変数だけで管理する。
部品の見本は docs/styleguide.html にある。
配色・部品は保守サイト(bilmen-hoshu)と共通の土台。
顧客ごとに変えるのは顧客名と有効アプリだけで、ロゴ・配色は全顧客共通。
------------------------------------------------------------------ */
/* ===== 1. 色・書体・寸法（ここだけで一元管理） ===== */
:root{
/* ブランド色 */
--brand: #2b5fd9;
--brand-dark: #1d47ab;
--brand-light: #3f8cff;
--brand-pale: #eaf1ff;
--brand-pale-line: #d5e3ff;
/* サイドバー（濃紺） */
--side-bg: #101a2b;
--side-text: #aeb9cb;
--side-label: #5c6a82;
--side-on-text: #7ab5ff;
--side-on-bg: rgba(63,140,255,.16);
--side-hover-bg: rgba(255,255,255,.06);
/* 面と罫線 */
--page-bg: #f4f6f9;
--surface: #ffffff;
--line: #e5e8ee;
--line-soft: #f0f2f6;
--line-softest: #f5f7fa;
/* 文字 */
--ink: #16212e; /* 見出し */
--ink-body: #3c4656; /* 本文 */
--ink-sub: #4b5566; /* やや弱い本文 */
--ink-muted: #6b7585; /* 補助 */
--ink-faint: #8a93a3; /* さらに弱い */
--ink-faintest: #98a1b1; /* 最も弱い（日付など） */
/* 状態色 */
--danger: #a02c2c;
--danger-bg: #fdeded;
--danger-mark: #e04f4f; /* 通知バッジの赤 */
/* アプリの色（アプリの manifest.json の color で選ぶ） */
--app-blue-bg: #eaf1ff; --app-blue-fg: #2b5fd9;
--app-green-bg: #e8f8f1; --app-green-fg: #0ea77f;
--app-orange-bg: #fff4e5; --app-orange-fg: #d97a08;
--app-purple-bg: #f1ecff; --app-purple-fg: #7c5cd9;
--app-cyan-bg: #e6f6fb; --app-cyan-fg: #0b8bab;
--app-gray-bg: #f0f2f6; --app-gray-fg: #6b7585;
/* タグの色 */
--tag-info-bg: #eaf1ff; --tag-info-fg: #2b5fd9;
--tag-warn-bg: #fff4e5; --tag-warn-fg: #b56a10;
--tag-neutral-bg: #f0f2f6; --tag-neutral-fg: #6b7585;
/* 書体（フォントはサーバー同梱。読めない環境ではPC標準へ） */
--font-body: 'Noto Sans JP', 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
--font-head: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Yu Gothic UI', Meiryo, sans-serif;
/* 角の丸み */
--r-sm: 4px;
--r-md: 6px;
--r-lg: 8px;
--r-xl: 10px;
--r-pill: 99px;
/* 影 */
--shadow-hover: 0 4px 14px rgba(16,26,43,.10);
/* 寸法 */
--header-h: 58px;
--side-w: 230px;
/* 入力欄の文字の大きさ（スマホ用）
iPhone の Safari は「文字が 16px より小さい入力欄」を指でタップすると、
読みにくいと判断して画面を勝手に拡大する。しかも拡大したまま戻らないため、
利用者が毎回、指で縮め直すことになる。
＝ 16px 以上にしておけば、この勝手な拡大は起きない。
16px「以上」が条件なので、これを下回る値には絶対にしないこと。
（拡大を禁止する maximum-scale は使わない。目が悪い方が自分で
拡大できなくなり、かえって使いにくくなるため）
2026-08-26 岡本さんのご指摘「入力項目をクリックすると画面が拡大になる」への対応 */
--input-font-mobile: 16px;
/* 入力欄の文字の大きさ（パソコン用）
これまで .c-field__input は 15px、.c-input は 13.5px と、それぞれの場所に
数値を直に書いていた。数値の直書きだと、あとから作った部品（時刻のドラムなど）が
同じ値を書き写せず、字の大きさがずれる原因になる。
2026-08-26 岡本さんのご指摘「字体、濃さ、大きさが他と違う」への対応として、
ここで一度だけ決めて、入力欄も時刻の札も同じ変数を見るようにした。 */
--input-font: 15px; /* ふつうの入力欄（.c-field__input） */
--input-font-sm: 13.5px;/* 詰まった画面の入力欄（.c-input） */
/* 入力欄の字の濃さ・色。時刻の札もこれと同じにする */
--input-weight: 400;
--input-color: var(--ink);
}
/* ===== 2. 土台 ===== */
*{ box-sizing:border-box }
body{
margin:0;
background:var(--page-bg);
color:var(--ink-body);
font-family:var(--font-body);
font-size:14px;
line-height:1.7;
display:flex;
flex-direction:column;
min-height:100vh;
}
a{ color:var(--brand); text-decoration:none }
a:hover{ color:var(--brand-dark) }
/* ===== 3. ヘッダー ===== */
.c-header{
display:flex; align-items:center; gap:14px;
background:var(--surface);
border-bottom:1px solid var(--line);
padding:0 24px;
height:var(--header-h);
flex:none;
/* 中身が横へはみ出さないようにする。はみ出すと画面ごと横に広がり、
右端の「パスワード変更」「ログアウト」が画面の外へ出て押せなくなる
（2026-08-23 岡本さん指摘） */
min-width:0;
}
/* 製品ロゴ「ビルメンAIオフィス」。全顧客共通で、顧客ごとの差し替えはしない */
/* ロゴを押すとホームへ戻る。リンクだが見た目は画像のまま（下線・色を付けない） */
.c-header__home{display:inline-flex; align-items:center; text-decoration:none; border:0; min-width:0}
.c-header__home:hover{opacity:.85}
/* 場所が足りないときはロゴが先に縮む。ボタンより優先度が低いため */
.c-header__logo{ height:38px; width:auto; display:block; max-width:100%; object-fit:contain }
.c-header__sub{
font-size:11px; color:var(--ink-faint);
border-left:1px solid var(--line); padding-left:14px;
white-space:nowrap;
}
.c-header__right{ margin-left:auto; display:flex; align-items:center; gap:16px; min-width:0 }
/* 利用者の名前が長いときは、名前のほうを縮めて「…」にする。
ボタン（flex:none）は縮めない＝いつでも押せるようにするため */
.c-user{ min-width:0 }
.c-user__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* 三本線（≡）。狭い画面でだけ出て、左メニューを開く。
PC幅では左メニューが常に見えているので出さない（下の 15.スマホ で出す）。
指で押せるように 44px 角を確保する。 */
.c-header__menu{
display:none;
width:44px; height:44px; flex:none;
align-items:center; justify-content:center;
background:transparent; border:1px solid var(--line);
border-radius:var(--r-md);
color:var(--ink-muted); font-size:18px; line-height:1;
font-family:inherit; cursor:pointer; padding:0;
}
.c-header__menu:hover{ border-color:var(--brand); color:var(--brand) }
/* 見本帳でだけ使う。実際の画面では狭いときにしか出ないため、
見本では常に見えるようにしておく（画面側では使わないこと） */
.c-header__menu--demo{ display:flex }
.c-header__menu:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px }
/* 左メニューを開いているときに、後ろの画面を覆う幕。
ここを押すと閉じる（＝「他の場所を押したら消える」）。
PC幅では左メニューが常に見えているので、幕は出さない。 */
.c-backdrop{ display:none }
.c-user{ display:flex; align-items:center; gap:9px }
.c-user__avatar{
width:30px; height:30px; border-radius:50%;
background:var(--brand); color:#fff;
display:grid; place-items:center;
font-weight:700; font-size:12px;
flex:none;
}
.c-user__text{ min-width:0 }
.c-user__name{ display:block; font-size:12px; line-height:1.3; color:var(--ink); font-weight:500 }
.c-user__role{ display:block; font-size:10px; line-height:1.3; color:var(--ink-faintest) }
.c-logout{ margin:0; flex:none }
.c-logout__btn{
background:transparent; color:var(--ink-muted);
border:1px solid var(--line); border-radius:var(--r-md);
padding:5px 12px; font-size:12px; font-family:inherit; cursor:pointer;
/* 文字を折り返さない。折り返すとヘッダーの高さに収まらず、
「パスワード変更」が縦に潰れて読めなくなる（2026-08-23 岡本さん指摘） */
white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center;
text-decoration:none; flex:none;
}
.c-logout__btn:hover{ border-color:var(--brand); color:var(--brand) }
/* --- ヘッダーの右上に置くボタン（c-headerbtn） -------------------------
2026-08-26 追加。「お問い合わせ」をここへ置くために作った部品。
もとは画面の右下に丸いボタン（c-fab）で出していたが、
「確認・出力へ」など画面の中のボタンに重なって押せなくなっていた
（岡本さんご指摘）。ヘッダーはどの画面にも出るので、
右下のときと同じく、どの画面からでも押せる。
高さは 44px にそろえる（指で押せる大きさ。ヘッダーは 58px なので入る）。 */
.c-headerbtn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-height:44px; padding:0 14px; flex:none;
border:1px solid var(--line); border-radius:var(--r-md);
/* 白いボタンにする（2026-08-26 岡本さんご指摘「青い枠ではなく、白いボタン」）。
ヘッダーの背景はもともと白なので、透明ではなく白を指定しても見た目は同じだが、
「白いボタン」であることを指定として残しておく。
枠線と文字の色は、メニューの中の「パスワード変更」「ログアウト」と同じ系統に
そろえてある（隣り合っても浮いて見えないようにするため）。 */
background:var(--surface); color:var(--ink-muted);
font-family:inherit; font-size:12.5px; font-weight:500; line-height:1;
/* 文字を折り返さない。折り返すとヘッダーの高さに収まらず、
縦に潰れて読めなくなる（2026-08-23 岡本さん指摘と同じ理由） */
white-space:nowrap;
text-decoration:none; cursor:pointer;
}
.c-headerbtn:hover{ border-color:var(--brand); color:var(--brand) }
.c-headerbtn:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px }
/* 2026-08-26 「目立たせる（青く塗る）」形（.c-headerbtn--accent）は取りやめた。
ヘッダーの背景が白いところに青い塗りがあると、そこだけ浮いて見え、
隣の「パスワード変更」「ログアウト」ともそろわないため
（岡本さんご指摘「見栄えが悪い」「青い枠ではなく、白いボタン」）。
押せることは、枠線と、指を乗せたときに枠と文字が青くなることで分かるようにする。 */
/* --- 利用者の名前を押すと開くメニュー（c-usermenu） --------------------
2026-08-26 追加（岡本さんご判断「利用者名を押すと出す」）。
もとは右上に「パスワード変更」（鍵の記号）と「ログアウト」を並べていたが、
お問い合わせの場所を空けるため、この中へ入れ直した。
JavaScript が動かない環境でもパスワード変更へ行けるように、
:focus-within（キーボードの Tab で中の項目に移ったとき）でも開くようにする。
閉じているときに display:none にはしない。display:none にすると
中の「パスワード変更」に Tab で移れなくなり、:focus-within が
いつまでも効かず、JavaScript が動かない環境で行き止まりになるため。
代わりに、場所を取らず目にも見えない形（clip）で置いておく。 */
.c-usermenu{ position:relative; flex:none; min-width:0 }
.c-usermenu__button{
display:flex; align-items:center; gap:9px;
min-height:44px; padding:0 8px; min-width:0;
background:transparent; border:1px solid transparent; border-radius:var(--r-md);
font-family:inherit; cursor:pointer; color:inherit; text-align:left;
}
.c-usermenu__button:hover{ border-color:var(--line); background:var(--line-softest) }
.c-usermenu__button:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px }
.c-usermenu__caret{ font-size:10px; color:var(--ink-faint); flex:none }
/* 開いたときに出る小さな板。ヘッダーの下にぶら下げる。
z-index はスマホの左メニュー（60）より上に置く。
ヘッダーは常に画面の上にあり、この板が隠れると押せなくなるため */
.c-usermenu__panel{
position:absolute; top:calc(100% + 6px); right:0; z-index:70;
display:flex; flex-direction:column; min-width:180px;
/* 閉じているとき。見えず・押せず・場所も取らないが、
Tab では中へ入れる（上の説明のとおり、行き止まりにしないため） */
clip-path:inset(50%); pointer-events:none; opacity:0;
background:var(--surface);
border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:var(--shadow-hover);
padding:6px;
}
/* JavaScript で開いたとき、またはキーボードで中へ入ったときに出す */
.c-usermenu.is-open > .c-usermenu__panel,
.c-usermenu:focus-within > .c-usermenu__panel{
clip-path:none; pointer-events:auto; opacity:1;
}
.c-usermenu__item{
display:flex; align-items:center;
min-height:44px; padding:0 12px; width:100%;
background:transparent; border:0; border-radius:var(--r-md);
color:var(--ink-body); font-family:inherit; font-size:13px; line-height:1;
white-space:nowrap; text-align:left; text-decoration:none; cursor:pointer;
}
.c-usermenu__item:hover{ background:var(--brand-pale); color:var(--brand) }
.c-usermenu__item:focus-visible{ outline:2px solid var(--brand-light); outline-offset:-2px }
/* ===== 4. レイアウト ===== */
.c-shell{ display:flex; flex:1; min-height:0 }
.c-side{
width:var(--side-w); flex:none;
background:var(--side-bg);
display:flex; flex-direction:column;
padding:18px 14px; gap:2px;
}
.c-side__label{
font-size:10px; color:var(--side-label);
padding:6px 12px; letter-spacing:.08em;
}
.c-side__label--gap{ padding-top:14px }
.c-side__item{
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:var(--r-md);
color:var(--side-text); font-size:13px;
text-decoration:none;
}
.c-side__item:hover{ background:var(--side-hover-bg); color:var(--side-text) }
.c-side__item.is-active{
background:var(--side-on-bg); color:var(--side-on-text); font-weight:700;
}
.c-side__icon{ width:18px; text-align:center; color:var(--side-label); flex:none }
.c-side__item.is-active .c-side__icon{ color:var(--side-on-text) }
/* 機能を持つアプリの名前は、下の機能一覧を開閉するボタンにする（ページは移動しない）。
見た目は c-side__item と同じ。ボタンは文字や背景を受け継がないのでここで揃える。 */
.c-side__item--toggle{
width:100%;
border:0; background:transparent;
font-family:inherit; font-size:13px; text-align:left;
cursor:pointer;
}
.c-side__item--toggle:focus-visible{
outline:2px solid var(--brand-light); outline-offset:-2px;
}
/* 開閉の印。閉じているとき ▸ ／ 開いているとき ▾ */
.c-side__caret{
margin-left:auto; flex:none;
font-size:10px; line-height:1; color:var(--side-label);
}
.c-side__caret::before{ content:"▸" }
.c-side__item--toggle[aria-expanded="true"] .c-side__caret::before{ content:"▾" }
.c-side__item.is-active .c-side__caret{ color:var(--side-on-text) }
/* アプリの下にぶら下げる「アプリの中の機能」。閉じているときは hidden を付ける */
.c-side__sub{
display:flex; flex-direction:column; gap:2px;
margin:2px 0 6px 21px; padding-left:11px;
border-left:1px solid var(--side-hover-bg);
}
.c-side__sub[hidden]{ display:none }
.c-side__subitem{
padding:7px 10px; border-radius:var(--r-md);
color:var(--side-label); font-size:12.5px; text-decoration:none;
}
.c-side__subitem:hover{ background:var(--side-hover-bg); color:var(--side-text) }
.c-side__subitem.is-active{ color:var(--side-on-text); font-weight:700 }
.c-side__badge{
margin-left:auto; background:var(--brand-light); color:#fff;
border-radius:var(--r-pill); font-size:10px; font-weight:700; padding:1px 7px;
}
/* 「別タブで開く」ボタン（↗）。販売管理システム Billy の左メニューと同じ操作感。
c-side__row でメニュー項目と ↗ を1行に並べる（リンクの入れ子は不可のため兄弟にする）。
項目名を押したときは今までどおり同じタブで開き、↗ を押したときだけ別タブで開く。 */
.c-side__row{ position:relative; display:flex; align-items:center }
.c-side__row > .c-side__item,
.c-side__row > .c-side__subitem{
flex:1; min-width:0;
padding-right:32px; /* ↗ の場所を空けて項目名と重ならないようにする */
}
.c-side__open{
position:absolute; right:5px; top:50%;
transform:translateY(-50%);
width:22px; height:22px; flex:none;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-sm);
color:var(--side-label); font-size:12px; line-height:1;
text-decoration:none; opacity:.5;
}
/* ふだんは控えめ。マウスを乗せたときにはっきりさせる */
.c-side__row:hover .c-side__open{ opacity:1; color:var(--side-on-text) }
.c-side__open:hover{
background:var(--side-hover-bg); color:var(--side-on-text); opacity:1;
}
.c-side__open:focus-visible{
opacity:1; color:var(--side-on-text);
outline:2px solid var(--brand-light); outline-offset:-1px;
}
.c-main{
flex:1; min-width:0;
/* 下の余白を取るのは、画面右下の「一番上へ戻る」ボタン（.c-totop）が
いちばん下の内容に重ならないようにするため。
2026-08-26 右下の「ご意見・お問い合わせ」の丸いボタンを廃止したので、
96px から 76px へ詰めた（ボタン44px＋上下の余白ぶん） */
padding:24px 28px 76px;
display:flex; flex-direction:column; gap:20px;
}
/* 見出しと中身をひとまとまりにする箱 */
.c-stack{ display:flex; flex-direction:column; gap:14px }
/* ===== 5. カード・見出し ===== */
.c-card{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:20px 24px;
}
.c-card__title{
font-weight:700; font-size:14px; color:var(--ink); margin:0;
}
.c-section-title{
font-weight:700; font-size:15px; color:var(--ink); margin:0;
}
/* 顧客名を出す歓迎カード */
.c-welcome{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:26px 30px;
display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.c-welcome__date{ font-size:12.5px; color:var(--ink-faint); margin-bottom:6px }
.c-welcome__name{
margin:0; font-family:var(--font-head);
font-weight:700; font-size:24px; color:var(--ink); line-height:1.35;
}
.c-welcome__lead{ font-size:13px; color:var(--ink-muted); margin-top:8px }
/* 歓迎カードの右側に数字を出す枠（将来の機能強化で使う部品）。
契約プラン名と利用ユーザー数は出さないと決めたため、今の画面では使っていない */
.c-welcome__facts{ margin-left:auto; display:flex; gap:24px; text-align:right }
.c-fact__label{ font-size:11px; color:var(--ink-faintest) }
.c-fact__value{ font-weight:700; font-size:15px; color:var(--ink) }
.c-fact__value--brand{ color:var(--brand) }
/* ===== 6. アプリのタイル ===== */
.c-tiles{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:16px;
}
.c-tile{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); padding:24px;
display:flex; flex-direction:column; gap:14px;
min-height:120px; text-decoration:none; color:inherit;
transition:border-color .15s, box-shadow .15s;
}
.c-tile:hover{ border-color:var(--brand); box-shadow:var(--shadow-hover); color:inherit }
.c-tile__head{ display:flex; align-items:center; gap:14px }
.c-tile__icon{
width:52px; height:52px; border-radius:var(--r-xl);
display:grid; place-items:center; font-size:24px; flex:none;
background:var(--app-gray-bg); color:var(--app-gray-fg);
}
.c-tile__body{ min-width:0 }
.c-tile__name{ display:block; font-weight:700; font-size:16px; color:var(--ink); line-height:1.4 }
.c-tile__desc{ display:block; font-size:12px; color:var(--ink-faint); margin-top:3px; line-height:1.5 }
.c-tile__foot{
display:flex; align-items:center; margin-top:auto;
border-top:1px solid var(--line-soft); padding-top:12px;
}
.c-tile__note{ font-size:11.5px; color:var(--ink-faintest) }
.c-tile__open{ margin-left:auto; font-weight:700; font-size:12.5px; color:var(--brand) }
/* アプリの色（アプリの manifest.json の color で指定） */
.c-tile__icon--blue { background:var(--app-blue-bg); color:var(--app-blue-fg) }
.c-tile__icon--green { background:var(--app-green-bg); color:var(--app-green-fg) }
.c-tile__icon--orange{ background:var(--app-orange-bg); color:var(--app-orange-fg) }
.c-tile__icon--purple{ background:var(--app-purple-bg); color:var(--app-purple-fg) }
.c-tile__icon--cyan { background:var(--app-cyan-bg); color:var(--app-cyan-fg) }
.c-tile__icon--gray { background:var(--app-gray-bg); color:var(--app-gray-fg) }
/* アプリが1つも無いときの案内 */
.c-empty{
background:var(--surface); border:1px dashed var(--line);
border-radius:var(--r-lg); padding:40px 20px;
text-align:center; color:var(--ink-muted); font-size:14px;
}
/* 「まだ1件もありません」の中に置く、次にすることへのボタン。
2026-08-24 追加。それまで各画面が style="margin-top:12px" と直書きしていたが、
直書きは決まり（design.css の部品だけで作る）に反するので部品にした。 */
.c-empty__action{ display:inline-block; margin-top:12px }
/* ===== 7. ボタン ===== */
.c-btn{
display:inline-block; text-align:center;
border:none; border-radius:var(--r-md);
padding:11px 16px;
font-family:inherit; font-weight:700; font-size:13px;
cursor:pointer; text-decoration:none;
}
.c-btn--primary{ background:var(--brand); color:#fff }
.c-btn--primary:hover{ background:var(--brand-dark); color:#fff }
.c-btn--ghost{ background:transparent; color:var(--brand); border:1px solid var(--line) }
.c-btn--ghost:hover{ border-color:var(--brand) }
.c-btn--block{ display:block; width:100% }
/* 処理中で押せないボタン（出力中など）。二度押しを防ぐために使う */
.c-btn.is-busy,
.c-btn:disabled{ opacity:.55; cursor:default; pointer-events:none }
/* ===== 8. フォーム ===== */
.c-field{ margin-bottom:18px }
.c-field__label{
display:block; font-size:13px; font-weight:700;
color:var(--ink); margin-bottom:6px;
}
.c-field__input{
width:100%; padding:10px 12px;
/* 大きさは変数から取る（時刻の札と同じ値を見るため。数値の直書きをしない） */
font-size:var(--input-font); font-family:inherit;
border:1px solid var(--line); border-radius:var(--r-md);
background:var(--surface); color:var(--ink);
}
.c-field__input:focus{ outline:2px solid var(--brand-pale); border-color:var(--brand) }
.c-field__hint{ font-size:12.5px; color:var(--ink-faint); margin:5px 0 0 }
/* --- 必ず入れる項目の印（c-req） --------------------------------------
入力する前に「ここは必ず要る」と分かるようにする。
色だけで伝えず「必須」と文字でも書く（色が分かりにくい人にも伝わるように）。
任意の項目は、これまでどおり項目名に「（任意）」と書く。 */
.c-req{
display:inline-block; margin-left:6px;
padding:1px 6px; border-radius:var(--r-sm);
background:var(--danger-bg); color:var(--danger);
font-size:10.5px; font-weight:700; line-height:1.6;
/* 項目名より前に出ないよう、上下の位置を少し上げる */
vertical-align:1px;
}
/* --- 作業時間の入力欄（c-papertime。全画面で共通） ---------------------
2026-08-26 作り直し（4回目・ドラム式）。
■ 経緯
岡本さんの「ドラムが全部共通で古臭いから修正して」というご指摘を、
一度「ドラムをやめる」と取り違えて文字の欄だけにしてしまった。
正しくは「**ドラムのままで、見た目と操作性を良くしてほしい**」。
そこで、ブラウザ任せの ではなく、
**自分たちで作ったドラム**に組み直した。
自作にすると、この製品の色・角丸・影（先頭の変数）をそのまま使えるので、
ほかの画面から浮かない。
■ 組み立て
(1) c-papertime__field … 「9:00 〜 12:00」の1つの文字列を持つ本体の欄。
JavaScript が動く端末では画面から隠し、
動かない端末ではふつうの文字の欄として出す
（打った文字がそのまま保存される逃げ道）。
(2) c-papertime__panel … 札とドラムを包む枠。紙の画面ではこれを浮かせる。
(3) c-papertime__pair … 「開始」「終了」の2つの札を「〜」で結んだ見た目。
(4) c-papertime__slot … 押せる札。いまの時刻が大きく出る。
(5) c-papertime__drum … 札を押すと下に開く、時と分の2列。
いま選ばれている数字は青く塗る（.is-on）。
(6) c-papertime__clear … 打ち直すときの「時刻を消す」。控えめな見た目。
■ 「よく使う時間帯」のボタンは廃止した（2026-08-26 岡本さんのご指示）
「時間のとこだけドラム式で入力でお願いします。
今は、時間がいくつもあってみずらいです」
＝ 時刻の候補がいくつも並んでいて見づらい、というご指摘。
ドラムで選べるので候補のボタンは要らない。旧 .c-papertime__quick ／
.c-papertime__btn は廃止した。
ドラムの中の数字は JavaScript が作る（app/static/js/app.js）。
HTML に書くのは (1)〜(6) の枠と目印だけで、数字は書かない。
同じものを何か所にも書かないため。 */
.c-papertime{
width:100%; min-width:0;
/* ドラムの1マスの高さ。指で押せる 44px 以上にする。
「時」と「分」で同じ値を使うので、行が必ずそろう */
--pt-cell:44px;
/* --- 時刻の札の字を「そろえる先」 ---------------------------------
2026-08-26 岡本さんのご指摘「字体、濃さ、大きさが他と違う」への対応。
それまで札の字は font-size:20px / font-weight:700 と数値を直に書いており、
すぐ上の日付欄（15px / 400）より 5px 大きく、300 も太かった。
画面の中で時刻だけが浮いて見える、はっきりした原因がこれ。
ここで既定を「ふつうの入力欄と同じ」に置き、置かれる場所ごとに
下の --field / --input / --paper で入れ替える。
こうすれば、入力欄の大きさを直したときに札も自動で付いてくる。 */
--pt-font: var(--font-body);
--pt-size: var(--input-font);
--pt-weight:var(--input-weight);
--pt-color: var(--input-color);
}
/* 「作業時間」のように見出し付きで置く欄（.c-field__input と並ぶ） */
.c-papertime--field{ --pt-size:var(--input-font) }
/* 設定画面など、詰まった画面の欄（.c-input と並ぶ） */
.c-papertime--input{ --pt-size:var(--input-font-sm) }
/* 「9:00 〜 12:00」の数字がそろって見えるよう、等幅の数字にする */
.c-papertime__field{ font-variant-numeric:tabular-nums }
/* JavaScript が動く端末では、本体の欄は画面から隠す（札のほうで操作するため）。
hidden ではなく CSS で隠すのは、JavaScript が動かない端末では
欄が出たままになるようにするため（打った文字がそのまま保存される逃げ道） */
.c-papertime.is-drum > .c-papertime__field{ display:none }
/* 札とドラムを包む枠。ふつうの画面では、そのまま欄の下に置く */
.c-papertime__panel[hidden]{ display:none }
/* JavaScript が動かない端末では、押しても何も起きないので出さない
（動かないものを見せると、かえって迷わせてしまうため）。
本体の文字の欄は残るので、文字を打てば今までどおり保存できる */
.no-js .c-papertime__panel{ display:none }
/* --- 開始 〜 終了 の2つの札 ------------------------------------------ */
.c-papertime__pair{
display:flex; align-items:flex-end; gap:10px;
font-family:var(--font-body);
}
.c-papertime__slot{
flex:1 1 0; min-width:0;
display:flex; flex-direction:column; align-items:stretch; gap:3px;
background:none; border:0; padding:0; margin:0;
font-family:inherit; cursor:pointer; text-align:left;
}
/* 「開始」「終了」の小さな見出し。どちらの札か迷わないようにする */
.c-papertime__cap{
font-size:11.5px; font-weight:600; color:var(--ink-muted);
letter-spacing:.04em; line-height:1.4;
}
/* 時刻が出る枠。ふつうの入力欄と同じ枠・角丸・**同じ字**にする。
以前はここで 20px / 700 と直に書いていたため、
すぐ上の日付欄（15px / 400）と見た目がそろわなかった
（2026-08-26 岡本さんのご指摘。実画面を測って確認）。
いまは上の --pt-* から取るので、置かれた場所の入力欄と必ず同じになる。
「押して選ぶ場所だ」ということは、字を大きくして伝えるのではなく、
枠・角丸・「開始」「終了」の札と、押したときの色の変化で伝えている。 */
.c-papertime__value{
display:flex; align-items:center; justify-content:center;
min-height:48px; padding:6px 10px;
background:var(--surface); color:var(--pt-color);
border:1px solid var(--line); border-radius:var(--r-lg);
font-family:var(--pt-font);
font-size:var(--pt-size); font-weight:var(--pt-weight); line-height:1.2;
font-variant-numeric:tabular-nums; letter-spacing:.02em;
transition:border-color .12s, box-shadow .12s, background .12s;
}
.c-papertime__slot:hover .c-papertime__value{
border-color:var(--brand); background:var(--brand-pale);
}
.c-papertime__slot:focus-visible{ outline:0 }
.c-papertime__slot:focus-visible .c-papertime__value{
outline:2px solid var(--brand); outline-offset:2px;
}
/* いま開いている札は、枠を濃くして「この札を選んでいる」と分かるようにする */
.c-papertime__slot.is-open .c-papertime__value{
border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-pale);
}
/* 時刻がまだ入っていないときの表示。
色だけを薄くする。大きさ・太さまで変えると、入っているときと
入っていないときで字が飛び跳ねて見えるため（他の入力欄の
プレースホルダも、色だけが薄くて大きさは同じ） */
.c-papertime__value.is-empty{ color:var(--ink-faintest) }
/* 開始と終了を結ぶ「〜」。札の枠の高さに合わせて中央に置く */
.c-papertime__tilde{
flex:none; color:var(--ink-faint); font-size:16px; font-weight:600;
line-height:48px;
}
/* --- 押すと下に開くドラム（時・分の2列） ----------------------------- */
.c-papertime__drum{
display:grid; grid-template-columns:1fr 1fr; gap:8px;
margin-top:8px; padding:8px;
background:var(--surface);
border:1px solid var(--brand-pale-line); border-radius:var(--r-lg);
box-shadow:var(--shadow-hover);
font-family:var(--font-body);
}
.c-papertime__drum[hidden]{ display:none }
.c-papertime__col{ display:flex; flex-direction:column; min-width:0 }
/* 「時」「分」の見出し。列を上でおさえて、数字が何の列か分かるようにする */
.c-papertime__colcap{
flex:none; text-align:center;
font-size:11.5px; font-weight:700; color:var(--ink-muted);
padding-bottom:5px; border-bottom:1px solid var(--line-soft); margin-bottom:5px;
}
/* 数字が縦に並ぶところ。ここだけが縦に転がる（ドラム）。
高さを決めておかないと画面いっぱいに伸びてしまうので、
ちょうど5つぶんくらいが見える高さで止める */
.c-papertime__list{
flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
/* 1マスの高さ（--pt-cell）を決めて、列の高さもその倍数にする。
こうしないと「時」と「分」が別々の位置で止まり、
数字が階段状にずれて見える（2026-08-26 画面を撮って確認）。
44px × 5マス ＋ すき間4px × 4 ＝ 236px */
max-height:calc(var(--pt-cell) * 5 + 4px * 4);
/* 1マスずつぴたっと止める。指で転がしたときも行がそろう */
scroll-snap-type:y mandatory;
/* scroll-behavior:smooth は使わない。
開いた瞬間に「いま選ばれている数字」が見えていてほしいので、
すべって移動する時間があると、その一瞬だけ違う数字が見えてしまう。
指で転がすときの手ざわりは、ブラウザ標準のままで十分 */
display:flex; flex-direction:column; gap:4px;
padding:2px;
/* iPhone で指をはなしたあとも滑って止まるようにする */
-webkit-overflow-scrolling:touch;
}
/* 転がす棒（スクロールバー）は細くして、数字の邪魔をしない */
.c-papertime__list::-webkit-scrollbar{ width:6px }
.c-papertime__list::-webkit-scrollbar-thumb{
background:var(--line); border-radius:var(--r-pill);
}
.c-papertime__num{
flex:none;
display:flex; align-items:center; justify-content:center;
/* 高さは決め打ち（min-height ではない）。
字の多い「10」と少ない「9」で高さが変わると、
「時」と「分」の行がそろわなくなるため */
height:var(--pt-cell); padding:4px;
scroll-snap-align:start;
background:var(--surface); color:var(--ink-body);
border:1px solid transparent; border-radius:var(--r-md);
font-family:inherit; font-size:17px; font-weight:600;
font-variant-numeric:tabular-nums; line-height:1.2;
cursor:pointer;
transition:background .1s, color .1s;
}
.c-papertime__num:hover{ background:var(--brand-pale); color:var(--brand-dark) }
.c-papertime__num:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px }
/* いま選ばれている数字は青く塗る（岡本さんの画面イメージ）。
色だけに頼らないよう、太字にもして見分けやすくする */
.c-papertime__num.is-on{
background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700;
}
.c-papertime__num.is-on:hover{ background:var(--brand-dark); color:#fff }
/* 「時刻を消す」。打ち直すときの入口。
数字を選ぶ操作とは性質が違うので、2列の下いっぱいに1つだけ置き、
控えめな見た目（枠なし・小さい字）にして目線を数字のほうへ向ける */
.c-papertime__clear{
grid-column:1 / -1;
display:flex; align-items:center; justify-content:center;
min-height:36px; margin-top:2px; padding:4px 8px;
background:none; border:0; border-top:1px solid var(--line-soft);
color:var(--ink-faint);
font-family:inherit; font-size:12.5px; line-height:1.4;
cursor:pointer;
}
.c-papertime__clear:hover{ color:var(--ink); text-decoration:underline }
.c-papertime__clear:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px }
/* --- 紙の画面（確認・出力）の出し方 ---------------------------------
紙の上では「9:00 〜 12:00」の1行のまま（本体の欄を隠さない）。
その1行を押したときだけ、札とドラムを**紙の上に浮かせて**開く。
紙の見た目を押しのけないよう、position:absolute で紙の上に重ねる。
閉じればまた1行に戻る（2026-08-26 岡本さんのご指示への対応）。 */
.c-papertime--paper{ position:relative }
.c-papertime--paper > .c-papertime__panel{
position:absolute; z-index:30;
top:calc(100% + 4px); left:0;
/* 紙のセルより狭いことがあるので、指で押せる幅は確保する。
ただし画面からはみ出さないよう上限も置く（横スクロールを出さないため） */
width:max(260px, 100%); max-width:min(340px, 92vw);
padding:10px;
background:var(--surface);
border:1px solid var(--brand-pale-line); border-radius:var(--r-xl);
box-shadow:var(--shadow-hover);
/* 紙の書体ではなく画面の書体にする。
「これは紙に出ないもの（操作のための部品）」と見た目で分かるように。
浮かせた札は紙の外に出る「操作の部品」なので、紙の中の字ではなく
画面のふつうの入力欄（--input-font-sm）にそろえる。
紙の中に印字される1行そのもの（.c-papertime__field＝.c-paperedit）は
紙の書体・大きさのままにしてある（紙の見た目を壊さないため） */
font-family:var(--font-body); font-size:14px; color:var(--ink-body);
line-height:1.7;
--pt-size:var(--input-font-sm);
}
/* 浮かせた中では、ドラムは枠を二重にしない（外側の枠で足りているため） */
.c-papertime--paper .c-papertime__drum{
border:0; box-shadow:none; padding:0; margin-top:8px;
}
/* 紙の1行は、押せることが分かるように指の形にする */
.c-papertime--paper > .c-papertime__field{ cursor:pointer }
/* ===== 9. お知らせ・タグ ===== */
/* ホーム画面の下に置く「お知らせ」の中身。
1行は［日付］［種類の札］［題名］の順に並ぶ（2026-08-25 岡本さんの画面イメージ）。
日付と札は幅を固定して、題名の頭の位置を縦にそろえる。読み流しやすくするため。 */
.c-notice{ display:flex; flex-direction:column; gap:12px }
.c-notice__row{
display:flex; gap:14px; align-items:center;
padding:6px 0; border-bottom:1px solid var(--line-softest);
}
.c-notice__date{ font-size:11.5px; color:var(--ink-faintest); flex:none; width:64px }
/* 題名。残りの幅をすべて使う。min-width:0 は、長い題名でも
親からはみ出さずに…で切れるようにするため（grid/flex の決まり） */
.c-notice__text{ font-size:13px; color:var(--ink-body); flex:1 1 auto; min-width:0 }
/* 種類の札。3種類とも同じ幅にして、題名の頭をそろえる。
幅がばらばらだと題名が階段状になり、目で追いにくくなる */
.c-notice__kind{ flex:none; width:96px; text-align:center }
/* 長い題名は1行に収めて…で切る。折り返すと行の高さがばらつくため */
.c-notice__text{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* いちばん下の行の下線は消す（枠の底の線と二重に見えるため） */
.c-notice__row:last-child{ border-bottom:0 }
/* お知らせが1件も無いときの案内 */
.c-notice__empty{ font-size:13px; color:var(--ink-muted); padding:6px 0 }
/* お知らせの一覧（/notices）で使う、本文まで出す1件ぶん。
ホームの枠は題名だけなので、詳しい中身はこちらで読んでいただく。
1件ずつ下線で区切って、どこまでが1件か分かるようにする */
.c-noticefull{ padding-bottom:14px; border-bottom:1px solid var(--line-softest) }
.c-noticefull:last-child{ padding-bottom:0; border-bottom:0 }
/* この中の行には下線を引かない（枠の区切りと二重に見えるため） */
.c-noticefull .c-notice__row{ border-bottom:0; padding-bottom:0 }
/* 題名は全部読めるようにする（一覧と違って…で切らない） */
.c-noticefull .c-notice__text{ white-space:normal; overflow:visible }
/* 本文。改行をそのまま出す（c-sysnotice__body と同じ考え方） */
.c-noticefull__body{
margin:6px 0 0; padding-left:78px;
font-size:13px; color:var(--ink-body); line-height:1.8;
white-space:pre-wrap; word-break:break-word;
}
/* スマホでは日付のぶんの字下げをやめる（横幅が足りず本文が細長くなるため） */
@media (max-width:600px){
.c-noticefull__body{ padding-left:0 }
}
/* 枠の見出しの行（左に題、右に「一覧 →」）。
c-card の中で使う。題と行き先を1行に収めて、枠の高さを節約する */
.c-cardhead{
display:flex; align-items:baseline; justify-content:space-between;
gap:12px; margin-bottom:14px;
}
.c-cardhead .c-card__title{ margin:0 }
.c-cardhead__link{ font-size:12.5px; color:var(--brand); font-weight:700; flex:none }
/* ホーム画面の下に置く2つの枠の並び。
左（お知らせ）を広く、右（お困りですか？）を狭くする＝2:1。
狭い画面では縦に積む。横に並べたままだと、
どちらの枠も文字が詰まって読めなくなるため。
切り替え点を 820px にしているのは、この製品の決まり
（横並びが縦積みになるのは 820px、スマホは 600px）に合わせるため。
ここだけ別の数字にすると、同じ画面幅なのに場所によって
見え方が変わってしまう（tests/test_layout_consistency.py が見張っている） */
.c-homefoot{
display:grid; grid-template-columns:2fr 1fr; gap:20px;
/* stretch にして左右の枠の高さをそろえる。
start だと中身のぶんだけの高さになり、左右で高さが合わなかった
（2026-08-25 岡本さん指摘） */
align-items:stretch; margin-top:24px;
}
@media (max-width:820px){
.c-homefoot{ grid-template-columns:1fr; gap:16px }
}
/* スマホでは日付・札・題名が横に収まらないので、
［日付＋札］を上の行、題名を下の行の2段にする。
横並びのままだと題名が数文字しか見えなくなる */
@media (max-width:600px){
.c-notice__row{ flex-wrap:wrap; gap:8px }
.c-notice__date{ width:auto }
.c-notice__kind{ width:auto }
/* 題名は下の行に回して、幅いっぱいで折り返して全部読めるようにする */
.c-notice__text{ flex:1 0 100%; white-space:normal; overflow:visible }
}
/* 状態の印（利用中・停止中・提出済・未設定など）。
飾りではなく「読ませる情報」なので、小さくしすぎない。
以前は 10.5px で、一覧の中でいちばん読みにくい文字だった（2026-08-23 変更）。 */
.c-tag{
padding:2px 9px; border-radius:var(--r-sm);
font-size:12px; flex:none; white-space:nowrap;
background:var(--tag-neutral-bg); color:var(--tag-neutral-fg);
}
.c-tag--info{ background:var(--tag-info-bg); color:var(--tag-info-fg) }
.c-tag--warn{ background:var(--tag-warn-bg); color:var(--tag-warn-fg) }
/* 入力がまだ足りないことを知らせる札（2026-08-26 追加。点検・写真報告書の一覧）。
状態の札（完了＝c-tag--warn）と隣り合って並ぶので、
同じ色だと2つの意味が混ざって読めない。別の色にして見分けられるようにする。
色は新しく決めず、すでにある「気づいてほしいこと」用の変数を使う。 */
.c-tag--missing{ background:var(--danger-bg); color:var(--danger) }
/* サポート窓口の枠（ホーム画面の下・右側）。
お知らせの枠と高さがそろうよう、余白は c-card と同じ考え方にしている */
.c-support{
background:var(--brand-pale); border:1px solid var(--brand-pale-line);
border-radius:var(--r-lg); padding:20px 24px;
display:flex; flex-direction:column; gap:10px;
}
/* 説明文は伸ばして、ボタンを枠の下端へ寄せる。
左のお知らせと高さがそろったとき、ボタンが宙に浮かないようにするため */
.c-support__text{ font-size:12.5px; color:var(--ink-sub); line-height:1.6; flex:1 }
.c-support__foot{ font-size:11.5px; color:var(--ink-faint); text-align:center }
/* 枠の中のボタン。枠の幅いっぱいに広げて押しやすくする
（右側の枠は狭いので、文字ぶんの幅だと指で狙いにくい） */
.c-support .c-btn{ justify-content:center; text-align:center }
/* 通知ベル（将来の機能強化で使う部品） */
.c-bell{ color:var(--ink-muted); font-size:15px; position:relative }
.c-bell__count{
position:absolute; top:-4px; right:-7px;
background:var(--danger-mark); color:#fff; border-radius:var(--r-pill);
font-size:9px; font-weight:700; padding:1px 5px;
}
/* ===== 10. お知らせ帯（画面内のメッセージ） ===== */
.c-alert{
border-radius:var(--r-lg); padding:11px 14px;
font-size:13.5px; margin-bottom:18px; border-left:4px solid;
}
.c-alert--error{ background:var(--danger-bg); border-color:var(--danger); color:var(--danger) }
.c-alert--info{ background:var(--brand-pale); border-color:var(--brand); color:var(--ink-sub) }
/* 注意（間違いではないが、そのままだと困ること）。
2026-08-25 追加。提出の前に「入力が足りません」と知らせるのに使う。
赤（error）は「できませんでした」に取っておきたいので、あいだの色を用意した */
.c-alert--warn{ background:var(--tag-warn-bg); border-color:var(--tag-warn-fg); color:var(--tag-warn-fg) }
.c-alert p{ margin:0 }
/* 足りないものの一覧（c-alert の中に置く）。
2026-08-25 追加。1行ずつ並べ、押すと直す場所へ飛べる */
.c-checklist{ list-style:none; margin:8px 0 0; padding:0 }
.c-checklist__item{ margin-top:4px }
.c-checklist__item::before{ content:"・"; color:var(--tag-warn-fg) }
.c-checklist__link{ color:inherit; text-decoration:underline; font-weight:600 }
.c-checklist__link:hover{ text-decoration:none }
/* ===== 11. ログイン前の画面（サイドバーなし） ===== */
.c-plain{
flex:1; display:flex; align-items:center; justify-content:center;
padding:40px 20px;
}
.c-panel{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-xl); padding:34px 34px 30px;
width:100%; max-width:400px;
}
.c-panel__logo{ display:block; height:40px; width:auto; margin:0 auto 20px }
.c-panel__title{
font-family:var(--font-head); font-weight:700; font-size:19px;
color:var(--ink); margin:0 0 6px; text-align:center;
}
.c-panel__lead{
font-size:13px; color:var(--ink-muted);
margin:0 0 24px; text-align:center;
}
/* ===== 12. アプリ画面の共通部分 ===== */
.c-page-title{
font-family:var(--font-head); font-weight:700; font-size:20px;
color:var(--ink); margin:0 0 6px;
}
.c-page-lead{ font-size:13px; color:var(--ink-muted); margin:0 }
/* 「← 一覧へ」のような戻り道の下に見出しを置くときの間。
テンプレートに style="margin-top:8px" と直書きしないための部品 */
.c-page-title--gap{ margin-top:8px }
.c-back{ display:inline-block; font-size:13px; color:var(--brand) }
/* ===== 13. エラー画面 ===== */
.c-error{ text-align:center; padding:60px 20px }
.c-error__title{
font-family:var(--font-head); font-weight:700; font-size:22px;
color:var(--ink); margin:0 0 10px;
}
.c-error__text{ color:var(--ink-muted); font-size:14px; margin:0 0 20px }
/* --- 一番上へ戻るボタン（c-totop） ------------------------------------
長い一覧で、絞り込みや「選んだ分を出力」のボタンまで戻るためのもの。
少し下へスクロールしたときだけ出す（ふだんは邪魔をしない）。
2026-08-26 右下の「ご意見・お問い合わせ」の丸いボタンを廃止したので、
その上に避ける必要がなくなった。右下の隅（20px）へ下ろす。
JavaScriptが動かない環境では出さない（app.js が is-on を付けて初めて見える）。 */
.c-totop{
position:fixed; right:20px; bottom:20px; z-index:30;
width:44px; height:44px; /* 指で押せる大きさ（現場のスマホ用） */
display:flex; align-items:center; justify-content:center;
background:var(--surface); color:var(--ink-sub);
border:1px solid var(--line); border-radius:var(--r-pill);
box-shadow:var(--shadow-hover);
font-size:16px; line-height:1; cursor:pointer;
/* ふだんは見えない。下へスクロールすると is-on が付いて見えるようになる */
opacity:0; visibility:hidden;
transition:opacity .15s, visibility .15s;
}
.c-totop.is-on{ opacity:1; visibility:visible }
.c-totop:hover{ border-color:var(--brand); color:var(--brand) }
.c-totop:focus-visible{ outline:2px solid var(--brand-light); outline-offset:2px }
@media (prefers-reduced-motion:reduce){
.c-totop{ transition:none }
}
/* ===== 14. フッター ===== */
.c-footer{
text-align:center; font-size:11px; color:var(--ink-faintest);
padding:14px; background:var(--surface);
border-top:1px solid var(--line);
}
/* ===== 15. スマホ ===== */
@media (max-width:820px){
/* 狭い画面では、左メニューを「三本線で開く引き出し」に切り替える。
以前は画面の上に横並びの帯にしていたが、
・押したい項目が帯の外に隠れて横スクロールが要る
・上にあるぶん本文が下がる
ため操作しにくかった（2026-08-23 岡本さん指摘）。
引き出しにすると、ふだんは本文が画面いっぱいに使える。 */
.c-header__menu{ display:flex }
.c-shell{ flex-direction:column }
.c-side{
position:fixed; top:var(--header-h); left:0; bottom:0;
z-index:60;
width:min(84vw, var(--side-w));
overflow-y:auto;
/* 閉じているときは画面の左外に置く。display:none にしないのは、
開閉が滑らかに見えるようにするため */
transform:translateX(-100%);
transition:transform .2s ease;
}
.c-side.is-open{ transform:translateX(0) }
/* 幕。開いているときだけ出る。押すと閉じる */
.c-backdrop{
display:block; position:fixed; inset:0; z-index:50;
background:rgba(16,26,43,.45);
border:0; padding:0; margin:0;
opacity:0; pointer-events:none;
transition:opacity .2s ease;
}
.c-backdrop.is-open{ opacity:1; pointer-events:auto }
/* 指で押す場所は 44px 以上にする */
.c-side__item, .c-side__item--toggle{ min-height:44px }
.c-side__subitem{ min-height:44px; display:flex; align-items:center }
/* スマホ幅では「別タブで開く」(↗) は出さない。
指で押すと誤タップしやすく、現場でタブを増やす操作は使わないため。 */
.c-side__open{ display:none }
.c-side__row > .c-side__item,
.c-side__row > .c-side__subitem{ padding-right:12px }
/* 下の余白は「一番上へ戻る」ボタン（.c-totop）に本文が隠れない分だけ取る。
2026-08-26 右下の「ご意見・お問い合わせ」の丸いボタンを廃止したので
92px から 72px へ詰めた */
.c-main{ padding:18px 14px 72px }
.c-welcome{ padding:20px }
.c-welcome__facts{ margin-left:0; width:100%; text-align:left }
.c-tiles{ grid-template-columns:1fr }
}
@media (max-width:600px){
.c-header{ padding:0 10px; gap:8px }
.c-header__sub{ display:none }
.c-user__name, .c-user__role{ display:none }
/* ロゴは狭い画面では小さくする。大きいままだと右の
「パスワード変更」「ログアウト」の場所が足りなくなり、
文字が縦に潰れて読めなくなる（2026-08-23 岡本さん指摘） */
.c-header__logo{ height:28px }
.c-header__right{ gap:6px }
/* 狭い画面では文字を出さず、記号だけにする。
文字のままだと入りきらず潰れるため。
data-short の中身（🔑 / ⏻）を出し、元の文字は読み上げ用に残す */
.c-logout__btn{ padding:0; width:44px; height:44px; font-size:0 }
.c-logout__btn::before{
content:attr(data-short); font-size:16px; line-height:1;
}
/* ヘッダーのボタン（ご意見）は、狭い画面でも文字のまま出す。
以前は「お問い合わせ」の6文字が入りきらず記号（✎）だけにしていたが、
記号だけだと何のボタンか分からない（2026-08-26 岡本さんご指摘）。
文字を「ご意見」の3文字に短くしたことで、狭い画面にも収まるようになった。
実際に 375px の画面で測った結果（2026-08-26）:
ヘッダーの中身 = 左メニュー 44px ＋ ロゴ 120.8px ＋ このボタン 63.5px
＋ 利用者アイコン 56.6px ＋ すき間 8px×3 = 309px
使える幅 = 375px − 左右の余白 10px×2 = 355px
46px 余るので、はみ出さない（横スクロールが出ないことも確認ずみ）。
利用者の名前は上の指定でこの幅では隠れるため、名前が長くても押し出されない。
左右の余白だけ 14px → 12px に詰めて、余りをさらに確保している。 */
.c-headerbtn{ padding:0 12px }
/* 名前と役割は隠れてアバターの1文字だけになるが、
アバターごと押せばメニューは開く（押す場所は 44px のまま） */
.c-usermenu__button{ padding:0 4px; gap:4px }
.c-welcome__name{ font-size:20px }
.c-panel{ padding:26px 22px }
}
/* ===== 16. 業務アプリの部品 =====
入力 → 処理 → 確認・修正 → 出力 の4画面で使う共通部品。
アプリ側のテンプレートには色やサイズを書かず、ここの部品だけを使う。 */
/* --- 手順の表示 --- */
.c-steps{
display:flex; align-items:center; gap:6px; flex-wrap:wrap;
margin-bottom:22px;
}
.c-step{
display:flex; align-items:center; gap:8px;
padding:8px 14px; border-radius:99px;
background:var(--surface); border:1px solid var(--line);
font-size:12.5px; color:var(--ink-faint); white-space:nowrap;
}
.c-step__num{
width:20px; height:20px; border-radius:50%; flex:none;
display:grid; place-items:center; font-size:11px; font-weight:700;
background:var(--line-soft); color:var(--ink-faint);
}
.c-step.is-current{ border-color:var(--brand); background:var(--brand-pale); color:var(--brand) }
.c-step.is-current .c-step__num{ background:var(--brand); color:#fff }
.c-step.is-done{ color:var(--ink-sub) }
.c-step.is-done .c-step__num{ background:var(--app-green-bg); color:var(--app-green-fg) }
.c-step__arrow{ color:var(--ink-faintest); font-size:12px }
/* --- ファイルを選ぶ枠 --- */
.c-upload{
border:2px dashed var(--brand-pale-line); border-radius:var(--r-lg);
background:var(--brand-pale); padding:28px 24px; text-align:center;
}
.c-upload__icon{ font-size:30px; color:var(--brand); line-height:1 }
.c-upload__title{ font-weight:700; font-size:15px; color:var(--ink); margin-top:10px }
.c-upload__hint{ font-size:12.5px; color:var(--ink-muted); margin-top:6px; line-height:1.7 }
.c-upload__input{
display:block; margin:16px auto 0; max-width:420px; width:100%;
font-family:inherit; font-size:13px; color:var(--ink-body);
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-md); padding:10px 12px;
}
/* ファイルを枠の上まで運んできている間（app.js が付け外しする） */
.c-upload.is-dragover{
border-color:var(--brand); border-style:solid;
background:var(--brand-pale-line);
}
/* 選んだファイルの名前 */
.c-upload__file{
display:block; margin-top:10px;
font-size:12.5px; font-weight:700; color:var(--brand);
}
/* --- 件数の表示 --- */
.c-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px }
.c-stat{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-md); padding:12px 18px; min-width:110px;
}
.c-stat__value{ font-weight:700; font-size:20px; color:var(--ink); line-height:1.2 }
.c-stat__value--brand{ color:var(--brand) }
.c-stat__value--warn{ color:var(--tag-warn-fg) }
.c-stat__label{ font-size:11.5px; color:var(--ink-faintest); margin-top:4px }
/* --- 絞り込みの帯 --- */
.c-toolbar{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-md); padding:12px 14px; margin-bottom:14px;
}
.c-toolbar__grow{ flex:1 1 200px }
.c-toolbar__note{ font-size:12px; color:var(--ink-muted) }
/* --- 入力部品（フォームの追加分） --- */
.c-input{
width:100%; padding:8px 10px;
/* 大きさは変数から取る（時刻の札と同じ値を見るため。数値の直書きをしない） */
font-size:var(--input-font-sm); font-family:inherit;
border:1px solid var(--line); border-radius:var(--r-sm);
background:var(--surface); color:var(--ink);
}
.c-input:focus{ outline:2px solid var(--brand-light); outline-offset:-1px }
.c-input--narrow{ max-width:220px }
.c-select{
padding:8px 10px; font-size:13px; font-family:inherit;
border:1px solid var(--line); border-radius:var(--r-sm);
background:var(--surface); color:var(--ink); max-width:100%;
}
.c-textarea{
width:100%; padding:10px 12px; min-height:96px; resize:vertical;
font-size:13.5px; font-family:inherit; line-height:1.8;
border:1px solid var(--line); border-radius:var(--r-md);
background:var(--surface); color:var(--ink);
}
.c-check{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-body) }
.c-check input{ width:16px; height:16px; accent-color:var(--brand) }
/* --- 表 --- */
.c-tablewrap{
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg); overflow-x:auto;
}
.c-table{ width:100%; border-collapse:collapse; font-size:13px; min-width:760px }
.c-table th, .c-table td{
padding:10px 12px; text-align:left; vertical-align:middle;
border-bottom:1px solid var(--line-soft);
}
/* 見出しの行。「何の列か」を伝える大事な文字なので小さくしすぎない
（以前は 11.5px。2026-08-23 変更） */
.c-table th{
background:var(--line-softest); color:var(--ink-sub);
font-size:12.5px; font-weight:700; white-space:nowrap;
position:sticky; top:0; z-index:1;
}
.c-table tr:last-child td{ border-bottom:none }
.c-table tbody tr:hover{ background:var(--line-softest) }
.c-table__main{ font-weight:700; color:var(--ink) }
.c-table__sub{ display:block; font-size:11.5px; color:var(--ink-faintest); margin-top:2px }
.c-table__c{ text-align:center; white-space:nowrap }
.c-table__nowrap{ white-space:nowrap }
/* 数を入れる列。桁をそろえて見比べられるように右寄せにする */
.c-table__num{ text-align:right; white-space:nowrap }
/* --- 並べ替えできる列見出し（c-sortth） --------------------------------
見出しを押すと、その列で並べ替える。
並び順の値は「ほかの条件で絞り込む」の中の並び順と同じものを使うので、
どちらを操作しても同じ結果になる。
ふつうのリンクなので、JavaScriptが動かない環境でも効く。 */
.c-sortth{ padding:0 }
.c-sortth__link{
display:flex; align-items:center; gap:5px;
/* th の余白をリンク側に持たせて、見出しのどこを押しても効くようにする */
padding:11px 14px;
color:inherit; font:inherit; text-decoration:none;
/* 指で押す場所として十分な高さを確保する（現場のスマホ用） */
min-height:44px; box-sizing:border-box;
}
.c-sortth__link:hover{ background:var(--brand-pale); color:var(--brand) }
.c-sortth__link:focus-visible{ outline:2px solid var(--brand-light); outline-offset:-2px }
/* いまこの列で並んでいるときは、色と太さで分かるようにする */
.c-sortth__link.is-on{ color:var(--brand) }
/* 並べ替えの向きの印（⇅ ▲ ▼）。ふだんは控えめにして、
並んでいる列だけはっきり見せる */
.c-sortth__mark{ font-size:10px; color:var(--ink-faintest); flex:none }
.c-sortth__link.is-on .c-sortth__mark{ color:var(--brand) }
/* 中央寄せ・右寄せの列では、見出しの中身も同じ側に寄せる */
.c-sortth.c-table__c .c-sortth__link{ justify-content:center }
.c-sortth.c-table__num .c-sortth__link{ justify-content:flex-end }
/* 列が少なく、中身も短い表につける。
ふつうの .c-table は横760pxを確保して横スクロールさせるが、
4〜5列しかない表ではスマホでも収まるので、その幅の縛りを外す。
（現場のスマホで、毎回横に振らないと右端のボタンが押せなかったため）
列が多い表には付けないこと。付けると文字が潰れて読みにくくなる。 */
.c-table--fit{ min-width:0 }
/* 表の行やボタンの並びの中に置くフォーム。
実行を伴う操作（停止・再開など）はリンクではなくボタンで送るため、
1行に並べても崩れないようにする */
.c-inline-form{ display:inline-block; margin:0 }
/* --- ボタンの並び --- */
.c-actions{
display:flex; flex-wrap:wrap; align-items:center; gap:10px;
margin-top:20px;
}
.c-actions__right{ margin-left:auto }
.c-actions--right{ justify-content:flex-end }
.c-btn--sm{ padding:7px 12px; font-size:12px }
/* --- 画面の中の小見出し ------------------------------------------------
1つの画面の中を「ここから別のまとまり」と区切る文字。
以前は各アプリが c-card__title に style="margin:..." を直書きしていた。
直書きをやめるため、部品として置く。 */
.c-subhead{
font-family:var(--font-head); font-weight:700; font-size:14px;
color:var(--ink); margin:18px 0 12px;
}
/* --- 小さなボタン（消す・並べ替えなど） --------------------------------
以前は点検・写真報告書だけがアプリ独自CSS（t-mini）で持っていた。
ほかの画面でも同じ形を使うため、ここへ引き上げた。 */
.c-mini{
background:transparent; color:var(--ink-muted);
border:1px solid var(--line); border-radius:var(--r-sm);
padding:3px 8px; font-size:11px; font-family:inherit; cursor:pointer;
}
.c-mini:hover{ border-color:var(--brand); color:var(--brand) }
/* --- 印（タグ）を横に並べる（撮影箇所など） ----------------------------
以前は点検・写真報告書だけがアプリ独自CSS（t-chips / t-chip）で持っていた。 */
.c-chips{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px }
.c-chip{ display:flex; align-items:center; gap:4px }
.c-chip form{ margin:0 }
/* --- 設定の一覧（1行に入力欄をいくつか並べる） --------------------------
点検項目の設定と、日常清掃の項目マスタが、同じ形をそれぞれ
アプリ独自CSS（i-srow / t-daily-srow）で持っていた。
同じものは1つにする、というルールに合わせてここへ引き上げた。
列の並びは画面ごとに違うので、修飾クラスで選ぶ（テンプレートに直書きしない）。 */
.c-srow{
display:grid;
grid-template-columns:1fr 1fr auto auto auto;
gap:8px; align-items:center;
padding:7px 0; border-bottom:1px solid var(--line-soft);
}
.c-srow:last-child{ border-bottom:none }
.c-srow .c-input{ font-size:12.5px; padding:6px 8px }
/* 見るだけの行（2列） */
.c-srow--read{ grid-template-columns:1fr 1fr }
/* 点検項目の設定（項目名・チェック項目・標準点・対象外・削除） */
.c-srow--check{ grid-template-columns:1fr 1.4fr 90px auto auto }
/* 見出しの行（項目名・チェック項目…）。入力欄ではないので細く見せる */
.c-srow--head{ font-size:11.5px; color:var(--ink-faint); font-weight:700 }
/* 場所やブロックの区切り */
.c-sblock{ font-weight:700; font-size:13px; color:var(--ink); margin:14px 0 4px }
/* いちばん下の「＋ 足す」の行 */
.c-sadd{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px }
.c-sadd .c-input{ font-size:12.5px }
@media (max-width:820px){
/* 狭い画面では横に並べず縦に積む（列が潰れて文字が重なるのを防ぐ）。
修飾クラスの指定も打ち消すため、まとめて1列にする */
.c-srow,
.c-srow--read,
.c-srow--check{ grid-template-columns:1fr; gap:5px; padding:10px 0 }
.c-srow--head{ display:none }
}
/* --- 補足の文 --- */
.c-note{ font-size:12.5px; color:var(--ink-muted); line-height:1.8 }
.c-note--warn{ color:var(--tag-warn-fg) }
/* --- 状態の印（タグの追加分） --- */
.c-tag--ok{ background:var(--app-green-bg); color:var(--app-green-fg) }
.c-tag--muted{ background:var(--tag-neutral-bg); color:var(--tag-neutral-fg) }
/* --- できあがったファイルの一覧 --- */
.c-files{ display:flex; flex-direction:column; gap:1px; background:var(--line-soft);
border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.c-file{
display:flex; align-items:center; gap:12px;
background:var(--surface); padding:11px 14px; font-size:13px;
color:var(--ink-body); text-decoration:none;
}
.c-file:hover{ background:var(--brand-pale); color:var(--brand) }
.c-file__icon{ color:var(--app-green-fg); flex:none }
.c-file__name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.c-file__get{ font-size:12px; font-weight:700; color:var(--brand); flex:none }
@media (max-width:820px){
.c-steps{ gap:4px }
.c-step{ padding:6px 10px; font-size:11.5px }
.c-stat{ flex:1 1 calc(50% - 5px); min-width:0 }
.c-actions__right{ margin-left:0; width:100% }
}
/* 帯・件数表示を c-stack の中に入れるときは、二重に間が空かないよう余白を消す */
.c-toolbar--flat{ margin-bottom:0 }
.c-stats--flat{ margin-bottom:0 }
.c-steps--flat{ margin-bottom:0 }
.c-actions--flat{ margin-top:0 }
/* ===== 17. 業務アプリの画面の枠 =====
Billy の画面と同じ組み方にそろえている。
お客様が普段使っている画面と同じ形にして、迷わないようにするため。
（上部バー → 濃紺の見出し帯 → 検索 → 一覧、という並び） */
/* --- 上部バー（画面名＋右に操作ボタン） --- */
.c-appbar{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
background:var(--surface); border:1px solid var(--line);
border-radius:var(--r-lg) var(--r-lg) 0 0;
padding:12px 18px;
}
.c-appbar__title{
font-family:var(--font-head); font-weight:700; font-size:17px;
color:var(--ink); margin:0;
border-left:4px solid var(--brand); padding-left:10px;
}
.c-appbar__lead{ font-size:12px; color:var(--ink-muted) }
.c-appbar__actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.c-appbar__actions form{ margin:0 }
/* --- 濃紺の見出し帯が付く枠（検索・一覧） --- */
.c-block{
background:var(--surface); border:1px solid var(--line); border-top:none;
}
.c-block--last{ border-radius:0 0 var(--r-lg) var(--r-lg); padding-bottom:6px }
.c-block__head{
background:var(--side-bg); color:#fff;
font-size:12.5px; font-weight:700; padding:7px 18px;
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.c-block__head--thin{ font-weight:400 }
.c-block__count{ margin-left:auto; font-weight:400; color:var(--side-text) }
.c-block__body{ padding:14px 18px }
/* --- 検索（絞り込み）の共通部品 -----------------------------------------
3アプリ（お知らせチラシ・点検写真報告書・清掃巡回）で、見た目・たたみ方・
言葉をすべて同じにするための部品。アプリ側で独自CSSを持たないこと。
2026-08-23 変更（岡本さんのご指摘3点への対応）
・以前は flex + min-width:170px で並べていたが、項目が10個ある画面では
狭い画面で170pxを保てず、項目名と入力欄が重なっていた。
grid（auto-fit + minmax）に変え、入れられる幅が無いときは自動で
列数が減るようにした。minmax の下限には % を混ぜ、
どんなに狭くても枠からはみ出さない（＝重ならない）ようにしている。
・縦に場所を取りすぎないよう、余白と行間を詰めた。
ただし指で押す場所（入力欄・ボタン）は 44px 以上を保つ。 */
.c-search{
display:grid;
/* min(170px,100%) が要。画面が170pxより狭くても列がはみ出さない */
grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
gap:10px 14px; align-items:end; padding:12px 18px;
}
/* 「文字で探す」だけは2列ぶんの幅を取る（長い言葉を入れるため）。
1列しか置けない狭い画面では自動で1列に戻る */
.c-search__field--wide{ grid-column:span 2 }
/* 日付の期間（この日から〜この日まで）も2列ぶんを使う。
1列（最小170px）に日付を2つ入れると 1つ 74px まで潰れて読めないため
（2026-08-26 岡本さんのご指摘への対応）。 */
.c-search__field--range{ grid-column:span 2 }
@media (max-width:600px){
.c-search__field--wide{ grid-column:span 1 }
/* スマホは日付を縦に積むので、1列に戻してよい */
.c-search__field--range{ grid-column:span 1 }
}
.c-search__field{ min-width:0 }
/* 「絞り込む」「解除」の行。3アプリとも検索欄の下・左そろえで同じ位置に出す */
.c-search__submit{
grid-column:1/-1;
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
/* 入力欄の見出し。「何を入れる欄か」を伝える文字なので小さくしすぎない
（以前は 11.5px。2026-08-23 変更） */
.c-label{
display:block; font-size:12.5px; color:var(--ink-muted);
margin-bottom:3px;
/* 長い項目名でも欄からあふれず、重なって見えないようにする */
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.c-range{ display:flex; align-items:center; gap:6px }
.c-range__tilde{ color:var(--ink-faint); font-size:12px; flex:none }
/* 日付の2つ入力は、日付が最後まで読める幅を必ず確保する。
2026-08-26 修正（岡本さん「作業日の日付が消えている」）。
これまでは min-width:0 だったため、絞り込みの列（最小170px）を
2つで分け合うと 1つあたり 74〜102px まで潰れていた。
はブラウザが中に「年/月/日」とカレンダーの絵を
描くので、それより狭いと日付の後ろが絵の下に隠れて読めなくなる。
＝値が消えたのではなく、狭くて読めない状態だった。
実測では 130px で「2026/08/01」が最後まで読める。
余裕を見て 138px を下限にする。 */
.c-range .c-input{ min-width:138px; flex:1 1 0 }
@media (max-width:600px){
/* スマホは日付を縦に積む（横だと1つが極端に狭くなるため） */
.c-range{ flex-direction:column; align-items:stretch; gap:4px }
.c-range__tilde{ display:none }
/* 指で押す場所は 44px 以上にする（現場でスマホから使うため）。
パソコンでは縦を詰めたいので、狭い画面のときだけ効かせる */
.c-search .c-input{ min-height:44px }
.c-search .c-btn{ min-height:44px; padding-top:0; padding-bottom:0 }
.c-search .c-check{ min-height:44px }
}
/* --- 「ほかの条件で絞り込む」＝たためる部分（共通部品） ------------------
以前は点検・写真報告書だけがアプリ独自CSS（t-filter）で持っていた。
3アプリで同じたたみ方にするため、ここへ引き上げた。 */
.c-search__more{ grid-column:1/-1; margin:0 }
.c-search__more-sum{
display:flex; align-items:center; gap:8px;
cursor:pointer; list-style:none;
font-size:12.5px; color:var(--brand); font-weight:700;
/* 指で押す場所なので 44px 以上を確保する */
min-height:44px; padding:4px 0;
}
.c-search__more-sum::-webkit-details-marker{ display:none }
.c-search__more-sum::before{ content:"▶"; font-size:9px }
.c-search__more[open] .c-search__more-sum::before{ content:"▼" }
/* たたんだ中身も、外側と同じ並べ方にする（見た目を揃えるため） */
.c-search__more-body{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
gap:10px 14px; align-items:end;
padding:4px 0 8px;
}
/* --- 折りたたみ（ふだん使わない項目をたたんでおく枠） ---
2026-08-24 追加。マスタの入力画面を簡単に見せるために使う（B12）。
検索欄専用の c-search__more と同じ見た目にそろえてあるが、
こちらは入力欄でも表でも、どこでも使える一般の部品。 */
.c-details{ border-top:1px solid var(--line-soft); margin:14px 0 0 }
.c-details__summary{
display:flex; align-items:center; gap:8px;
cursor:pointer; list-style:none;
font-size:12.5px; color:var(--brand); font-weight:700;
/* 指で押す場所なので 44px 以上を確保する */
min-height:44px; padding:4px 0;
}
.c-details__summary::-webkit-details-marker{ display:none }
.c-details__summary::before{ content:"▶"; font-size:9px }
.c-details[open] .c-details__summary::before{ content:"▼" }
.c-details__body{ padding:2px 0 8px }
/* --- 罫線の表（Billyの一覧と同じ見た目） --- */
.c-grid-table{ width:100%; border-collapse:collapse; font-size:12.5px; white-space:nowrap }
.c-grid-table th{
background:var(--line-softest); color:var(--ink-sub);
font-weight:700; text-align:left;
padding:7px 10px; border:1px solid var(--line);
}
.c-grid-table td{
padding:7px 10px; border:1px solid var(--line); color:var(--ink-body);
background:var(--surface); vertical-align:middle;
}
.c-grid-table tr:hover td{ background:var(--brand-pale) }
.c-grid-table__c{ text-align:center; width:52px }
.c-grid-table__num{ text-align:right; width:76px }
.c-grid-table__wrap{ white-space:normal; min-width:180px }
/* --- 一覧の「開く」ボタン（Billyの画面と同じ形） --- */
.c-editbtn{
display:inline-block; padding:3px 10px;
border:1px solid var(--brand); border-radius:var(--r-sm);
font-size:11.5px; font-weight:700; color:var(--brand);
background:var(--surface); text-decoration:none; white-space:nowrap;
}
.c-editbtn:hover{ background:var(--brand); color:#fff }
/* --- 左の縦メニュー（マスタの選択など） --- */
.c-split{ display:flex; align-items:stretch }
.c-split__nav{
width:186px; flex:none;
background:var(--line-softest);
border:1px solid var(--line); border-top:none;
padding:12px 10px;
}
.c-split__label{ font-size:10.5px; color:var(--ink-faint); padding:8px 8px 4px; letter-spacing:.06em }
.c-split__item{
display:flex; align-items:center; gap:8px;
padding:9px 10px; border-radius:var(--r-md);
font-size:13px; color:var(--ink-body); text-decoration:none;
}
.c-split__item:hover{ background:var(--surface); color:var(--brand) }
.c-split__item.is-active{ background:var(--brand); color:#fff; font-weight:700 }
.c-split__icon{ width:16px; text-align:center; color:var(--ink-faint); flex:none }
.c-split__item.is-active .c-split__icon{ color:#fff }
.c-split__note{
font-size:11px; color:var(--ink-faint); line-height:1.6;
margin:14px 8px 0; padding-top:12px; border-top:1px solid var(--line);
}
.c-split__main{ flex:1; min-width:0 }
/* --- 入口のボタンを横2列に並べる枠（基本情報の各種マスタなど） ---
Billy の「基本設定」画面と同じ並べ方。
スマホでも2列のまま。長い名前は折り返すので、横スクロールにはならない。 */
.c-linkgrid{
display:grid; grid-template-columns:repeat(2,1fr);
gap:10px; padding:14px 18px;
}
/* --- 一覧の先頭（全部選ぶ・まとめて操作） --- */
.c-listhead{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:12px 18px; border-bottom:1px solid var(--line);
}
/* --- 一覧を「10件分の高さ」に収めて、その中だけ動かす枠（c-scrollbox） ---
2026-08-26 追加。岡本さんのご指摘「縦に長すぎる。表示件数を絞って
スクロール（10件まで）」への対応。
ページを分けるやり方（1ページ目・2ページ目…）ではなく、
「窓」を10件分だけ開けて、その中を上下に動かして残りを見る形にした
（岡本さんが3案から「枠の中だけスクロール」をお選びになったため）。
高さの決め方
固定の px で決め打ちすると、文字が大きくなる画面幅（スマホ）では
見える件数がずれる。そこで「1件分の高さ × 10件」で計算している。
1件分の高さ（--scrollbox-row）は一覧の作りごとに違うので、
各アプリの CSS で上書きする。ここでは既定値だけ置く。
下端の影
枠の下でぷつりと切れていると「ここで終わり」と誤解される。
続きがあることが見て分かるよう、下端に薄い影を重ねている。
いちばん下まで動かすと影は消える（background-attachment:local の仕組み。
JavaScript を足さずに実現できる）。
スマホでの操作
overscroll-behavior:contain … 枠の中をなぞっている間はページ全体が動かず、
枠の端まで来て初めてページ全体のスクロールに移る。
-webkit-overflow-scrolling:touch … iPhone で指を離した後もすっと流れる。 */
.c-scrollbox{
--scrollbox-row:46px; /* 1件分のおよその高さ（各アプリで上書きする） */
--scrollbox-rows:10; /* 何件分を見せるか */
/* 「1件分の高さ × 10件」で高さを決める。
rem（文字の大きさを基準にした単位）なので、
文字を大きくする設定でも件数がずれない。
ただしスマホは画面そのものが短く、10件分（1300px超）だと
窓のほうが画面より長くなって意味がなくなる。
そこで「画面の高さの85%」を上限にして、短い画面では自動的に
見える件数が減るようにしている（min＝小さいほうを採る）。 */
/* 10件ぴったりで切ると、最後の行がきれいに終わって見え、
「ここで終わり」と誤解される。そこで 10件＋次の行の頭だけ（0.35件分）
をのぞかせて、続きがあることを見た目でも伝える（2026-08-26）。 */
max-height:min(
calc(var(--scrollbox-row) * (var(--scrollbox-rows) + .35)),
85vh
);
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
/* 影の重ね方
1枚目・2枚目 … 白のぼかし。いちばん上／いちばん下にいるとき影を隠す役
3枚目・4枚目 … 灰色の影。上下に続きがあるときだけ見える
local を付けた層は中身と一緒に動き、scroll を付けた層は枠に貼り付く。
この差で「上まで来たら上の影が消える」動きになる。 */
/* 「窓（入れ物）」だと分かるように、上下に区切り線を引く */
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
/* 動かせるつまみ（スクロールバー）を、いつでも見えるようにする。
最近のブラウザ・スマホは「触っている間だけ」つまみを出す作りなので、
何もしないと止まっているときは何も見えず、続きがあると気づけない。
色を指定すると、その場所がつねに確保されて出たままになる。 */
scrollbar-width:thin;
scrollbar-color:var(--ink-faintest) var(--line-softest);
}
/* Chrome・Edge・Safari 用（上の指定が効かない版のため、同じ見た目を作る） */
.c-scrollbox::-webkit-scrollbar{ width:10px; height:10px }
.c-scrollbox::-webkit-scrollbar-track{ background:var(--line-softest) }
.c-scrollbox::-webkit-scrollbar-thumb{
background:var(--ink-faintest); border-radius:5px;
border:2px solid var(--line-softest);
}
/* 表を入れる場合は、横スクロール（c-tablewrap）と縦スクロールを
同じ入れ物で受け持たせる。別々の入れ物にすると、
スマホで横に振ったときに縦の位置がずれる。 */
.c-tablewrap.c-scrollbox{ overflow:auto }
/* --- スクロールする窓のすぐ下に置く案内 -------------------------------
窓の下端で切れていると「ここで終わり」と誤解される。
影だけでは弱いので、言葉でもはっきり伝える。
件数は画面ごとに変わるので、文言はテンプレート側から入れる。 */
.c-scrollnote{
display:flex; align-items:center; gap:6px;
padding:8px 18px; font-size:12px; color:var(--ink-muted);
background:var(--line-softest); border-bottom:1px solid var(--line);
}
.c-scrollnote::before{
content:"\2193"; /* 下向きの矢印 */
font-weight:700; color:var(--brand);
}
/* --- 入力欄を横に並べる --- */
.c-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 18px }
@media (max-width:820px){
.c-split{ flex-direction:column }
.c-split__nav{ width:auto; display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.c-split__label{ padding:0 4px }
.c-split__note{ display:none }
.c-appbar__actions{ margin-left:0; width:100% }
}
/* ===== 18. 送信中の表示 =====
写真を送っている間、画面全体を覆って進み具合を出す部品。
（現場のスマホで二重に押してしまう事故を防ぐ） */
.c-sending{
position:fixed; inset:0; z-index:50;
display:flex; align-items:center; justify-content:center;
background:rgba(16,26,43,.45);
}
.c-sending__box{
display:flex; align-items:center; gap:12px;
background:var(--surface); border-radius:var(--r-xl);
box-shadow:var(--shadow-hover);
padding:18px 22px; max-width:80vw;
}
.c-sending__text{ font-size:13.5px; color:var(--ink-body) }
.c-sending__spin{
width:20px; height:20px; flex:none; border-radius:50%;
border:3px solid var(--brand-pale-line); border-top-color:var(--brand);
animation:c-spin .9s linear infinite;
}
@keyframes c-spin{ to{ transform:rotate(360deg) } }
/* 動きを減らす設定の端末では回さない */
@media (prefers-reduced-motion:reduce){
.c-sending__spin{ animation:none }
}
/* ===== 18-2. 送信の進み具合（画面をふさがない帯） =====
写真を次々に撮るときに使う。.c-sending は画面全体を覆って操作を止めるため、
「撮ったらすぐ次を撮る」使い方には向かない。こちらは画面の上に細い帯を出すだけで、
帯が出ている間も撮影ボタンを押せる（2026-08-23 現場の「撮影が遅い」への対応）。 */
.c-upq{
position:fixed; left:0; right:0; top:0; z-index:40;
background:var(--surface); border-bottom:1px solid var(--line);
box-shadow:var(--shadow-hover);
padding:7px 14px; display:flex; align-items:center; gap:10px;
font-size:12.5px; color:var(--ink-body);
}
.c-upq[hidden]{ display:none }
.c-upq__spin{
width:15px; height:15px; flex:none; border-radius:50%;
border:2.5px solid var(--brand-pale-line); border-top-color:var(--brand);
animation:c-spin .9s linear infinite;
}
/* 送信がぜんぶ終わったら回転を止める（済んだ印） */
.c-upq--done .c-upq__spin{
animation:none; border-color:var(--brand);
}
.c-upq__text{ flex:1 1 auto; min-width:0 }
.c-upq__count{ font-weight:700; color:var(--ink) }
/* 送れなかったときに出る「やり直す」ボタン */
.c-upq__retry{ flex:none }
.c-upq--warn{ background:var(--danger-bg); border-bottom-color:var(--danger) }
.c-upq--warn .c-upq__count{ color:var(--danger) }
@media (prefers-reduced-motion:reduce){
.c-upq__spin{ animation:none }
}
/* ===== 18-3. 送信を待っている写真 =====
撮った瞬間に画面へ小さく出し、撮れたことが目で分かるようにする部品。
送信が終わるまでは薄く、送れなかったものは赤い枠と「やり直す」を出す。 */
.c-pending{ position:relative; display:block }
.c-pending__img{
display:block; width:100%; height:92px; object-fit:contain;
border:1px solid var(--line); border-radius:var(--r-md);
background:var(--line-softest); opacity:.5;
}
.c-pending__state{
position:absolute; left:0; right:0; bottom:0;
font-size:10px; text-align:center; padding:1px 2px;
background:var(--surface); opacity:.92; color:var(--ink-sub);
border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md);
}
.c-pending--fail .c-pending__img{ border:1.5px solid var(--danger); opacity:.9 }
.c-pending--fail .c-pending__state{ color:var(--danger); font-weight:700; cursor:pointer }
/* ===== 18-4. 小画面（出力設定などの設定ダイアログ） =====
一覧で選んだあと、出す前に「PDFかExcelか」「発行日はいつか」を決めてもらう
小さな画面。3つのアプリ（点検・写真報告書／清掃巡回報告書／日常清掃
チェックリスト）で同じ部品・同じ言葉を使う（2026-08-24 お客様のご要望）。
HTMLの