/* ============================================================================= style.css — 画面の見た目（CSS）。最小限のひな型。 CSSの基本: 「セレクタ { プロパティ: 値; }」で、どの部分をどう見せるかを指定する。 想定: スマホ閲覧がメイン＋PCの大きい画面にも対応（レスポンシブ）。 ============================================================================= */ /* ============================================================================= ★デザイントークン（色の定義集）— ここが「色を変える唯一の場所」 ----------------------------------------------------------------------------- :root は「ページ全体」を指す特別な指定。ここで作った「--名前: 色;」は “変数（色に付けた名前）”で、下の各スタイルからは var(--名前) で呼び出す。 ＝色を直接書かず、名前で参照する。こうすると… ・同じ色があちこちに散らばらない（1か所を直せば全部変わる） ・将来「デザインテーマ」を切り替えるのも、ここを差し替えるだけで済む （将来テーマを増やすときは、例えば を付けて 「.theme-b { --color-primary: 別の色; … }」と上書きすれば画面全体が変わる。） 色を調整したいときは、原則この :root の中の値だけを書き換えること。 ============================================================================= */ :root { /* --- 機能色：ホームの各メニュー＝機能ごとの“固有色”（混ぜない） --- */ --color-record: #8cc152; /* 記録＝緑 */ --color-record-hover: #7cb342; /* 記録（マウスを乗せたとき少し濃く） */ --color-record-bg: #f3f9ec; /* ごく薄い緑の背景（薄い青の --color-accent-bg の緑版） */ --color-record-bg-hover:#e9f4dc; /* 上の薄い緑の“マウスを乗せたとき”版（少し濃い） */ --color-edit: #f5c84b; /* 編集＝黄 */ --color-edit-hover: #eebb2e; --color-edit-soft: #fbe7b3; /* 編集の淡い黄（編集画面の月ナビ帯・日付帯の背景） */ --color-shipping: #f48fb1; /* 出荷＝ピンク */ --color-shipping-hover: #ef79a3; --color-shipping-bg: #fdf0f4; /* ごく薄いピンクの背景（記録画面の --color-record-bg のピンク版） */ --color-shipping-bg-hover:#fbe4ec; /* 上の薄いピンクの"マウスを乗せたとき"版（少し濃い） */ --color-shipping-text: #ad1457; /* ピンク系の濃いめ文字（記録画面の --color-success の役割のピンク版） */ --color-settings: #d4dade; /* 設定＝グレー */ --color-settings-hover: #c4ccd1; --color-stats: #c3a6e0; /* 統計＝紫 */ --color-stats-hover: #b28fd6; --color-stats-bg: #f4eefa; /* ごく薄い紫の背景（記録画面の --color-record-bg の紫版） */ --color-stats-text: #6b3f99; /* 紫系の濃いめ文字（出荷画面の --color-shipping-text の紫版） */ /* お客様情報＝khaki（くすんだ淡い黄土色）。ホーム画面のボタン色＆その画面の上部バーの色。 */ --color-customer-info: khaki; /* #F0E68C */ --color-customer-info-hover: #e6d977; /* 上の色に触れたとき少し濃く */ /* 農業日誌＝bisque（うすい肌色。2026-08-07 ユーザー決定）。ホームのボタン＆その画面の上部バーの色。 とても淡い色なので、線・見出し・強調には濃い茶（下の2つ）を必ず組で使う （bisque 単体では文字や枠が背景に埋もれて読めないため）。 */ --color-nikki: bisque; /* #FFE4C4 */ --color-nikki-hover: #f7d3ab; /* 上の色に触れたとき少し濃く */ --color-nikki-deep: #c98b4b; /* bisque の濃い版（タブの下線・枠線・選択の印） */ --color-nikki-bg: #fff6ec; /* ごく薄い地色（年の見出し帯・ナビ帯。--color-accent-bg の日誌版） */ --color-nikki-text: #8a5a2b; /* 濃い茶の文字（bisque や薄い地の上に載せる。--color-stats-text の日誌版） */ /* 原価の内訳（人件費／材料費）を色分けするための専用トークン。統計画面の円グラフ・積み上げ棒グラフで使う。 以前は --color-stats と --color-stats-hover（同じ紫の濃淡）を流用していたが、濃淡だけの違いは 見分けにくいとの指摘（2026-07-11）を受け、はっきり別の色相にした。階層4「コスト分析」でも 同じ2色を再利用する想定のため、統計テーマ色ではなく役割名で定義する。 */ --color-cost-labor: var(--color-stats); /* 人件費＝統計のテーマ色（紫）そのまま */ --color-cost-material: #3f9c8f; /* 材料費＝紫の反対側に近いティール（緑がかった青） */ /* --- 共通アクション色：ダイアログ・下部バーのボタン（全画面で同じ意味＝同じ色） --- */ /* 決定／はい／OK／更新／記録＝主アクション。今回“青系”で統一。 */ --color-primary: #235e9c; /* 主ボタンの色（やや明るい青） */ --color-primary-hover: #1d4f83; /* 主ボタン（マウスを乗せたとき少し濃く） */ --color-on-primary: #fff; /* 主ボタンの上に載る文字色（白） */ /* キャンセル／いいえ＝副アクション（控えめなグレー）。 */ --color-cancel: #e0e0e0; --color-cancel-hover: #d2d2d2; --color-on-cancel: var(--text); /* 副ボタンの文字色（濃いグレー） */ /* 削除＝取り消せない危険操作（濃いピンク）。 */ --color-danger: #d05a7a; --color-danger-hover: #bf4d6c; --color-on-danger: #fff; /* --- 選択・強調色：カレンダーの選択日／チェックON／タブ選択 など --- 主アクションと同じ青に統一して、アプリ全体の“青”を1色にそろえる。 */ --color-accent: var(--color-primary); /* 選択・強調の青＝主ボタンと同じ色（別名。primaryを変えれば一緒に変わる） */ --color-accent-soft: #9db8d6; /* 薄い青（枠・フォーカスの線） */ --color-accent-bg: #d9e6f5; /* ごく薄い青（選択中の背景） */ --color-accent-bg-hover:#c9dcee; /* 上の薄い青の“マウスを乗せたとき”版（少し濃い） */ --color-on-accent: #fff; /* 青塗りの上の文字色（白） */ /* --- 中立色：文字（濃い→薄いの3段階。役割で使い分ける） --- */ --text: #1b1b1b; /* 通常の文字・見出し（濃い＝ほぼ黒） */ --text-hint: #555555; /* 少し弱い文字・補足・ヒント（表の見出しなど） */ --text-faint: #999999; /* さらに薄い文字・未選択の案内・無効時 */ --color-on-label: #000; /* 緑ラベル（--color-record 等）の上に載る黒文字 */ /* --- 中立色：背景・面 --- */ --bg: #f7f7f7; /* ページ全体の背景 */ --surface-card: #fff; /* 白い面（カード・パネル・自作UI部品の地）。アプリ内の“白い箱”はこれに統一 */ --surface-input: #eceef0; /* 入力欄の薄いグレー地（初期設定など） */ --surface-disabled: #f0f0f0; /* 無効な入力欄の地 */ --hover-bg: #f2f4f5; /* ボタン/行にマウスを乗せたとき */ --active-bg: #e7eaec; /* 押した瞬間 */ /* --- 中立色：枠線 --- */ --border: #cfcfcf; /* 標準の枠線 */ --border-light: #e2e4e7; /* 薄い区切り線 */ --border-input: #bbb; /* ダイアログの入力欄など、少し濃いめの枠 */ /* --- 状態色：意味のある色（機能色とは別に、成功・エラー等を表す） --- */ --color-error: #c62828; /* エラー・注意・危険を表す赤（アプリ内の"赤"はこれに統一）。日曜の色にも使う */ --color-error-hover: #ad2323; /* 赤いボタンにマウスを乗せたとき（少し濃い赤） */ --color-success: #2e7d32; /* 成功・マスターログイン中を表す緑（アプリ内の"濃い緑"はこれに統一） */ --color-warn: #b96b00; /* 注意・警告を表す橙（success/error と並ぶ状態色。例：使用量が多め） */ --color-warn-text: #8a4e00; /* 注意の数値などに使う、濃い橙の文字 */ --color-warn-bg: #fdf1e0; /* ごく薄い橙の背景（注意バナー等の地。--color-record-bg 等の橙版） */ --color-today: var(--color-success); /* カレンダーの「今日」＝成功緑と同じ（選択＝青と区別するため別名だけ持つ） */ --color-saturday: #1565c0; /* 土曜（青） */ --color-sun-bg: #fdecec; /* カレンダー日曜列の淡い赤背景 */ --color-sat-bg: #eaf1fb; /* カレンダー土曜列の淡い青背景 */ /* 予定超過（終了予定日を過ぎたのに完了していない作業計画）の行に敷く淡いピンク。 「注意」の橙(--color-warn-bg)とは別の役割として持つ＝一覧の中で「期限切れの1項目」を ひと目で見分けるための地色。バッジ（設定画面の作業計画ボタン）と同じ状態を指す。 */ --color-overdue-bg: #fadfe8; /* 予定超過の行の背景（淡いピンク） */ --color-overdue-bg-hover: #f6cbda; /* 同・マウスを乗せた／押したとき（少し濃いピンク） */ /* --- 系列識別色：複数カテゴリ（野菜別・畑別など）を色分けして比べるグラフ専用の8色 --- 2026-07-13新設。既存の機能色/状態色は「意味のある1色」だが、これは「区別するためだけの色」 という別の役割のため新規カテゴリにした（似た色の重複ではなく、8色セットで1つの役割）。 色の並び順は固定（隣同士が見分けやすい順）で、増減させない・並べ替えない。 9系列目以降は個別の色を割り当てず「その他」としてまとめる（stats_calc.phpの集計側で処理）。 */ --chart-series-1: #2a78d6; /* 青 */ --chart-series-2: #1baf7a; /* 青緑 */ --chart-series-3: #eda100; /* 黄 */ --chart-series-4: #008300; /* 緑 */ --chart-series-5: #4a3aa7; /* 紫 */ --chart-series-6: #e34948; /* 赤 */ --chart-series-7: #e87ba4; /* ピンク */ --chart-series-8: #eb6834; /* 橙（8番目=「その他」用としても使う） */ /* --- サイズ：文字・アイコンの大きさ（画面をまたいで使い回す“役割”ごとの大きさ） --- 色と同じ考え方で、大きさも「名前」で管理する。生の px を各所に直書きせず、 var(--名前) で参照する＝1か所直せば、同じ役割の場所がまとめて変わる。 名前は「どの画面か」ではなく「どんな役割か」で付ける（他画面でも使い回せるように）。 ※まずはホーム画面上部から導入。ほかの画面へは順次この名前に置き換えていく。 */ /* 角丸（かどまる）を“役割ごと”に分けて持つ。名前で「どこに効くか」が分かるようにする。 ＝デザインで「カードの角丸だけ変えたい」ときは --radius-card だけ直せばよい。 ※メニューボタンは別役割として --btn-menu-radius、ゲージのバーは --gauge-radius に分けてある。 極小部品(4px)は、他画面に着手するとき --radius-chip を追加予定。 */ --radius-control: 8px; /* 操作部品の角丸（ボタン・入力欄・タブなど） */ --radius-card: 10px; /* カード・パネルの角丸（情報を載せる箱） */ --radius-dialog: 14px; /* モーダル（）の角丸。確認/カレンダー/時刻など全ポップアップ共通 */ --radius-checkbox: 4.5px; /* チェックボックスの角丸（一辺30pxの15%）。アプリ全体共通 */ --font-display: 26px; /* 画面で一番大きく見せる強調文字（例：ホーム上部の日付） */ --font-note: 15px; /* 補足・案内の小さめ文字（例：お知らせ、一覧の「データ無し」） */ --font-hint: 13px; /* さらに小さい補足・ヒント文（入力欄下の注意・使い方ヒント・？印の中の文字・ログインのラベル） */ --font-input: 16px; /* 入力欄・ボタン等の操作部品の文字（スマホ自動ズーム防止の下限。16px未満だとiPhone等で入力時に画面が拡大する） */ --font-tab: 20px; /* 画面上部の切り替えタブの文字（出荷画面の「出荷入力/精算記録/履歴」など）。操作部品より一回り大きく見せる */ --font-genka-label: 20px; /* 出荷画面の参考原価帯「参考原価」見出しの文字。帯の高さ（数字26px基準）を超えない範囲で大きめに */ --font-unit: 15px; /* 入力欄に添える単位テキストの文字（時間単価の「円」・手数料の「%」・素材の資材単位）。表とは役割が違うので --table-font とは別トークン */ --table-font: 15px; /* 表（データ一覧）のセル・見出しの文字（規格表など。他の表にも使い回せる汎用） */ --icon-sm: 22px; /* 小さめアイコンの一辺の大きさ（例：右上のログアウト） */ --icon-sm-pad: 6px; /* 小さめアイコンボタンの内側余白（指で押しやすくするため） */ --help-mark-size: 20px; /* ？ヘルプ丸印の一辺（記録の.rate-help・野菜の.help-markで共通。--icon-sm 22pxより一回り小さい別部品） */ /* メニューボタン（ホームの記録・編集・出荷・設定・統計）の大きさ一式。 */ --btn-menu-h: 80px; /* ボタンの高さ */ --btn-menu-font: 22px; /* ラベルの文字サイズ */ --btn-menu-icon: 40px; /* 左のアイコンの一辺の大きさ */ --btn-menu-radius: 10px; /* 角の丸み */ --btn-menu-pad-x: 20px; /* 左右の内側余白＝左端アイコンの位置もこの値にそろえる */ /* 背の低いメニューボタン（マスターログイン・マスターログアウト）。 メニューボタンより低め。角丸はメニューボタン共通（--btn-menu-radius）を流用する。 */ --btn-menu-low-h: 54px; /* 高さ（メニューボタン80pxより低い） */ --btn-menu-low-font: 18px; /* 文字サイズ */ --btn-menu-low-icon: 32px; /* 人型アイコンの大きさ */ /* 縦の間隔（役割ごと）。名前で「何と何の間か」が分かるようにする。 */ --section-gap: 16px; /* 画面内で大きなブロック（カード・ボタン群など）を縦に積むときの間隔 */ --btn-gap: 14px; /* ボタンを縦に並べたときの、ボタン同士の間隔 */ /* ゲージ（データベース使用量バーなどの“割合バー”）一式。 状態色（正常＝--color-success／注意＝--color-warn／危険＝--color-error）は 共通の状態色を使う。ここではゲージ固有のサイズと、土台・枠・レールの色だけを持つ。 */ --gauge-font: 16px; /* 見出し・数値の文字サイズ */ --gauge-h: 12px; /* 帯（ゲージ）の高さ＝太さ */ --gauge-radius: 6px; /* 帯の角丸 */ --gauge-pad-y: 6px; /* バー枠の上下の内側余白（高さ54pxに収める詰め） */ --gauge-pad-x: 14px; /* バー枠の左右の内側余白 */ --gauge-label-gap: 8px; /* 見出しと右の数値の間（横の間隔） */ --gauge-row-gap: 6px; /* 見出し行と、その下のバーの間 */ --gauge-bg: #dbe2e8; /* 土台の背景 */ --gauge-border: #a9b6c0; /* 枠線 */ --gauge-track: #bcc7d0; /* 未使用部分（帯の下地＝レール） */ /* お知らせ領域（ホーム上部の「日付＋お知らせ」の白い枠）一式。役割ごとに余白を持つ。 */ --notice-pad-y: 14px; /* 枠の上下の内側余白 */ --notice-pad-x: 44px; /* 枠の左右の内側余白（右上ログアウトアイコンと重ならない広さ） */ --notice-date-gap: 6px; /* 日付と、その下のお知らせ文の間 */ --notice-line-gap: 2px; /* お知らせが複数行のときの行間 */ --notice-logout-inset: 8px; /* 右上ログアウトアイコンの、枠の角からの距離 */ /* 季節のワンポイント絵（お知らせ枠の左下に置く桜などの小さな絵）の大きさ一式。 枠の高さ（日付＋お知らせ1行で約80px）に収まり、中央寄せの文字とぶつからない大きさ。 */ --season-art-w: 104px; /* 絵の横幅 */ --season-art-h: 78px; /* 絵の高さ */ --season-art-inset: 4px; /* 枠の左下の角からの距離 */ /* 上部バー（全画面共通の帯 .settings-bar）の大きさ一式。色は別枠の --bar-bg/--bar-fg。 ※ --bar-h と --bar-close-tap は複数箇所で“必ず一致”させる連動値（バラバラに直すとズレる）。 */ --bar-h: 52px; /* 帯の高さ（.settings-bar の height と .topbar-* の padding-top で共用） */ --bar-pad-x: 16px; /* 帯の左右の内側余白 */ --bar-gap: 8px; /* 帯内の要素間隔（戻る×と見出しの間） */ --bar-close-tap: 44px; /* 戻る×のタップ領域（見出しh1の右余白と釣り合わせて中央に見せる） */ --bar-close-icon: 34px; /* 戻る×アイコン(svg)の実寸 */ --bar-title-font: 20px; /* 上部バーの見出し文字 */ /* 記録画面（作業追加）の「記録日時」表示一式。役割ごとに余白・文字を持つ。 */ --record-datetime-pad: 2px 28px 4px; /* 日時ボックスの内側余白（左右を広めにして両端を中央寄りに） */ --record-datetime-font: 18px; /* 日時の文字サイズ */ --record-datetime-gap: 14px; /* 日付と時刻の間隔（ラベルの右余白も同値） */ --record-datetime-time-pad: 6px 4px; /* 日付・時刻ボタンの内側余白 */ /* 記録画面の「天気・気温」一式（日時のすぐ下の行）。日時と同じ作法にそろえる。 */ /* --- 記録画面の上部（上部バー→日時→天気→畑）の「見た目の隙間」を 10px にそろえる --- ねらい: 目に見える隙間を、全画面共通の行間（--item-row-gap＝10px）と同じにする。 なぜ「行間を10pxにする」だけでは合わないか: ① 目に見える隙間 ＝ 上の要素の内側余白 ＋ 行間 ＋ 下の要素の内側余白 の合計。 行間を10pxにしても、内側余白のぶんだけ広く見えてしまう。 ② さらに各行は「ラベル（内側余白なし）」と「ボタン（上下6pxの内側余白）」が 中央ぞろえで並ぶため、“文字から文字までの距離”は計算だけでは求めにくい。 → そこで下の3つは **実際にブラウザで測って合わせた値**（3か所とも文字基準で10px）。 ※ 文字サイズ・ボタンの内側余白（--record-datetime-time-pad）・.app-main の余白（16px）を 変えたときは、ここの値も測り直すこと（計算では出せない）。 */ --record-datetime-pull-up: 12px; /* 上部バー → 日時 を 10px にする引き上げ量 */ --record-weather-pull-up: 16px; /* 日時 → 天気 を 10px にする引き上げ量 */ --record-weather-pull-next: 12px; /* 天気 → 畑（以降の項目行）を 10px にする引き上げ量 */ --record-weather-icon: 20px; /* 天気アイコン（表示ボタンの中。文字の高さに合わせた実寸） */ --record-weather-icon-gap: 4px; /* 天気アイコンと天気名の間隔 */ --tenki-opt-icon: 26px; /* ドロップダウンの選択肢アイコンの実寸（タップ用に少し大きめ） */ --tenki-opt-gap: 12px; /* ドロップダウンの選択肢アイコンと文字の間隔 */ /* 天気アイコンの色（天気ごと＝役割で持つ）。線画SVGの線の色になる。 実際の空の色をイメージしつつ、白地でも見やすい濃さにそろえてある。 */ --tenki-color-sunny: #ef9a1e; /* 晴れ＝太陽のオレンジ */ --tenki-color-cloudy: #8b95a1; /* 曇り＝雲のグレー */ --tenki-color-cloudy-rain: #6d8ba9; /* 曇時々雨＝グレーと青の中間 */ --tenki-color-rain: #2f7ed1; /* 雨＝青 */ --tenki-color-snow: #56b4dd; /* 雪＝水色 */ --editday-list-icon: 20px; /* 編集画面の記録一覧の写真アイコンの実寸（列幅もこの値） */ --editday-memo-icon: 17px; /* 同・メモアイコン（塗りの画像なので線画より小さめが釣り合う） */ /* 記録一覧の1行に文字が入りきらないときに使う、小さめの文字サイズ（JSが段階的に付け替える）。 通常 15px（--table-font）→ 13px → 12px の順に試して、1行に収まるところを探す。 */ --editday-fit-font-s: 13px; /* 少し小さく（1段階目） */ --editday-fit-font-xs: 12px; /* もっと小さく（2段階目。これでも入らなければ2行表示にする） */ /* 記録一覧の「畑」列に必ず残す最低幅。畑列は“余った幅をもらう”設計（1fr）なので、 その日に長い野菜名・作業内容が1件でもあると幅を取られて畑名がほぼ消えてしまう。 それを防ぐための下限（12pxなら1行に約7文字＝2行で15文字ぶん入る）。 */ --editday-hatake-min: 90px; /* 項目行（入力行：畑・野菜などの1行）一式。記録・設定など複数画面で使い回す汎用トークン。 */ --item-row-gap: 10px; /* 項目行どうしの縦の間隔 */ --item-row-h: 48px; /* 項目行の高さ（緑ラベル・入力欄で共通） */ --input-row-h: 40px; /* 小さめ入力欄の高さ（数量・単価など副次的な入力。項目行48pxより一段低くコンパクトに） */ /* フォーム部品の共通サイズ */ --checkbox-size: 30px; /* チェックボックスの一辺（アプリ全体で共通・指で押しやすい大きさ） */ /* 緑ラベル（項目名の緑ボックス）一式。記録の各項目・素材見出しなど、緑ラベル全般で使う。 */ --label-pad: 6px 8px; /* 緑ラベルの内側余白 */ /* モーダル（ポップアップ ）の枠一式。確認・カレンダー・時刻など全モーダルで共有する。 角丸は上の --radius-dialog(14px)。文字サイズは各ダイアログ内の --dialog-title-size/-body-size。 */ --dialog-pad: 16px; /* モーダルの内側余白 */ --dialog-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); /* モーダルの影（浮いて見せる） */ --dialog-backdrop: rgba(0, 0, 0, 0.45); /* 背後を暗くする幕（::backdrop） */ } /* 「*」= すべての要素。box-sizing は、幅の計算に余白を含める指定（レイアウトが崩れにくい）。 */ * { box-sizing: border-box; } /* html … 端末の回転や拡大時に文字サイズが勝手に変わるのを防ぐ（iOS対策）。 */ /* ※ 以前は scrollbar-gutter:stable でスクロールバー領域を常時確保していたが、 その“確保された右側の帯”のせいで、画面上部に固定した全幅バー（.settings-bar）の 右側に白い隙間が残ってしまう（fixed の right:0 はこの確保領域の内側までしか届かない）。 バーを端まで届かせることを優先し、この指定は外す（横ずれ対策より隙間ゼロを優先）。 */ html { -webkit-text-size-adjust: 100%; } /* ============================================================================= 共通ローディング（画面遷移／DB取得の待ち時間に出す「クルクル」＋操作ブロック） 既定は非表示。app.js が遷移開始で少し遅れて .is-on を付けて表示する。 ============================================================================= */ .app-loading { position: fixed; inset: 0; z-index: 100; /* 画面全体を覆う（最前面） */ display: none; /* 既定は出さない */ align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); /* うっすら暗くして下の操作をブロック */ } .app-loading.is-on { display: flex; } /* 表示状態 */ /* くるくる回る輪（スピナー）。太めの円の一部だけ白くして回転させる。 */ .app-loading-spinner { width: 46px; height: 46px; border: 5px solid rgba(255, 255, 255, 0.45); border-top-color: var(--color-on-primary); /* 上だけ白＝回っているのが分かる */ border-radius: 50%; animation: app-spin 0.8s linear infinite; } @keyframes app-spin { to { transform: rotate(360deg); } } /* 端末側で「動きを減らす」設定のときは、回転を止めて点滅に控える（過度な動き対策）。 */ @media (prefers-reduced-motion: reduce) { .app-loading-spinner { animation: app-spin 2s linear infinite; } } /* body = ページ全体。フォント・文字色・背景色のような“全体の土台”を決める。 */ body { margin: 0; font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; line-height: 1.6; /* 行間に少しゆとりを持たせて読みやすく */ color: var(--text); /* 文字色（濃いグレー） */ background: var(--bg); /* 背景色（薄いグレー） */ min-height: 100vh; min-height: 100dvh; /* dvh = スマホのアドレスバー増減を考慮した“実際の表示高さ” */ /* iPhone等の横向き時、ノッチ側に文字が隠れないよう左右に安全余白を取る。 */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* ボタン・リンクをタップしたときの“青い反応色”を消して、見た目を素直にする（スマホ）。 */ button, a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* 本文エリア。max-width で横幅を制限し、margin:auto で中央寄せ。 */ .app-main { max-width: 480px; margin: 0 auto; padding: 16px; } /* フォーム部品の見た目（入力欄を押しやすい大きさに）。 */ form label { display: block; margin: 12px 0; } /* ラベルを縦に並べる */ form input, form select { width: 100%; padding: 8px; font-size: var(--font-input); } form label.checkbox { display: flex; align-items: center; gap: 8px; } /* チェックは横並び */ form label.checkbox input { width: auto; } /* チェックは幅100%にしない */ /* --- チェックボックス（アプリ全体共通デザイン） --- ブラウザ標準の見た目（border-radiusを指定してもOS/ブラウザによって角が丸まらない）に accent-color で色だけ変えるやり方だと限界があるため、appearance:none で標準の見た目を消し、 枠・チェックマークを自前で描く。色を変えたい場面（警告=赤系／ログイン=緑系など）は、 この基本形の上から :checked の background/border-color だけを個別に上書きする。 */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; /* Safari対応 */ margin: 0; border: 2px solid var(--border-input); border-radius: var(--radius-checkbox); background: var(--surface-card); position: relative; /* チェックマーク(::after)を内側に置く基準 */ cursor: pointer; } input[type="checkbox"]:checked { background: var(--color-accent); /* 既定の色（青）。warn/successは各箇所で上書き */ border-color: var(--color-accent); } /* チェックマーク（レ点）。borderの2辺をL字に見せて45度回すと、よく見るレ点になる定番の描き方。 位置・太さはボックスサイズ（--checkbox-size=30px）に対する割合で決めているので、 サイズトークンを変えてもレ点の見た目のバランスは保たれる。 */ input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 27%; top: 8%; width: 30%; height: 55%; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(40deg); } input[type="checkbox"]:disabled { background: var(--surface-disabled); border-color: var(--border-input); cursor: not-allowed; } input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 2px; } button { padding: 10px 16px; font-size: var(--font-input); cursor: pointer; } /* 状態表示などの小さな見た目。 */ .error { color: var(--color-error); } /* エラーは赤 */ .hint { color: var(--text-hint); font-size: var(--font-hint); margin: 4px 0 0; } /* 補足は小さい灰色 */ .badge { display: inline-block; padding: 4px 8px; background: #fdd835; border-radius: 4px; } /* 黄色の札 */ /* ============================================================================= ホーム画面（ログイン後のメイン画面・モック準拠） ※ .home 配下だけに効くよう限定する。 ============================================================================= */ /* 画面全体を縦積みにし、高さいっぱいを使う。これで最下部の 「マスターログイン」を下端に寄せられる（.home-bottom の margin-top:auto）。 app-main の上下padding 16px×2=32px を差し引く。 */ .home { display: flex; flex-direction: column; gap: var(--section-gap); min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); } /* --- 入力欄の案内文（placeholder）の色。全画面共通 --- placeholder … 入力欄が空のとき薄く表示される案内文（例「畑の名前を入力してください」）。 ブラウザごとの既定色はまちまちなので、アプリの「薄い文字」トークンにそろえる。 「入力済みの文字（濃い）」と見分けやすい薄さにするのが目的。 */ input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; /* 一部ブラウザは既定で半透明にするため、透過を切って色指定どおりに見せる */ } /* --- 未送信バナー（オフライン耐性・全画面共通） --- 記録の送信に失敗してキュー（端末内）に残っている間、どの画面でも最上部に出す帯。 app.js（未送信キューの共通処理）が body の先頭に挿し込み、送信し終えると消す。 色は「注意」の状態色（橙）＝エラーほど深刻ではないが気づいてほしい情報。 */ .kiroku-queue-banner { background: var(--color-warn-bg); color: var(--color-warn-text); border-bottom: 1px solid var(--color-warn); padding: 8px 12px; text-align: center; font-size: var(--font-note); font-weight: 700; } /* --- 上部の枠：日付＋お知らせ --- */ .home-header { position: relative; /* 右上のログアウトを絶対配置する基準 */ border: 1px solid var(--border); /* モックの細い枠線 */ border-radius: var(--radius-card); background: var(--surface-card); /* 白い面（共通トークン） */ padding: var(--notice-pad-y) var(--notice-pad-x); /* 上下14px・左右44px（左右はログアウトアイコン回避） */ text-align: center; } /* 日付（例: 2026年7月17日（金））。狭い画面で2行に折り返さないよう、 文字サイズを「画面幅に収まる大きさ」まで自動で縮める。 ・min(A, B) … AとBの小さい方を使う標準機能。広い画面ではA（通常の26px）のまま。 ・B の逆算式 … 100vw（画面の横幅）から左右の余白 （本文 .app-main の16px×2 ＋ 枠 .home-header の44px×2 ＝ 120px）と 字間（letter-spacing 1px × 最長14文字）を引き、最長の日付 「2026年12月31日（水）」の文字幅（全角6文字＋半角数字8文字 ≒ 10.4文字分）で割る。 */ .home-date { font-size: min(var(--font-display), calc((100vw - 134px) / 10.4)); font-weight: 600; letter-spacing: 1px; white-space: nowrap; /* 保険: 万一計算より長くても折り返さず1行のままにする */ } .home-notice { margin-top: var(--notice-date-gap); font-size: var(--font-note); color: var(--text-hint); } .home-notice p { margin: var(--notice-line-gap) 0; } /* お知らせ各行 */ .home-notice .empty { color: var(--text-faint); } /* お知らせが無いときの薄い文字 */ /* --- 季節のワンポイント絵（ホーム上部の枠の左下） --- 型: 枠に「season-art ＋ season-<季節キー>」の2クラスを足すだけで絵が出る。 絵は assets/season-<キー>-bg.svg。今がどの季節かは app/season.php が日付から決める。 ::before … 枠の中に自動で作られる「最初の子レイヤー」。ここに絵を置けば、 枠本来の白い背景や枠線はそのまま生かせる（設定ボタンの .set-btn-art と同じ考え方）。 全面ではなく左下の小さな絵なので、inset(全面)ではなく left/bottom と大きさを指定する。 */ .season-art { overflow: hidden; } /* 角丸からはみ出たぶんを切り落とす */ .season-art::before { content: ""; position: absolute; left: var(--season-art-inset); /* 枠の左下に少し余白を空けて置く */ bottom: var(--season-art-inset); width: var(--season-art-w); /* ワンポイントの大きさ（下のトークンで調整） */ height: var(--season-art-h); background: left bottom / contain no-repeat; /* 絵全体が入る大きさで左下に。画像は季節ごとに下で指定 */ opacity: .6; /* うっすら（濃さの調整はここ1か所） */ pointer-events: none; /* 装飾なのでタップ判定に影響させない */ } /* 日付とお知らせを絵より手前に出す（position を持たせると描画順が上がる）。 右上のログアウトは既に absolute なので、そのままでも絵より手前に描かれる。 */ .home-header .home-date, .home-header .home-notice { position: relative; } /* 季節ごとの絵（キーは app/season.php の SEASON_LABELS と共通。 新しい季節の絵に差し替えるときは、assets にSVGを置いて下の1行を直すだけ）。 */ .season-fuyu::before { background-image: url("season-fuyu-bg.svg"); } /* 冬＝雪をかぶった枝と雪だるま */ .season-hatsuharu::before { background-image: url("season-hatsuharu-bg.svg"); } /* 初春＝ふきのとうとつくし */ .season-haru::before { background-image: url("season-haru-bg.svg"); } /* 春＝桜 */ .season-shoka::before { background-image: url("season-shoka-bg.svg"); } /* 初夏＝植えたばかりの苗 */ .season-tsuyu::before { background-image: url("season-tsuyu-bg.svg"); } /* 梅雨＝あじさいと雨 */ .season-natsu::before { background-image: url("season-natsu-bg.svg"); } /* 夏＝アイスバー */ .season-shoshu::before { background-image: url("season-shoshu-bg.svg"); } /* 初秋＝十五夜（団子・すすき・満月） */ .season-aki::before { background-image: url("season-aki-bg.svg"); } /* 秋＝もみじとどんぐり */ .season-shoto::before { background-image: url("season-shoto-bg.svg"); } /* 初冬＝大きなみかん */ /* 右上の小さなログアウトボタン（アイコンのみ）。 */ .logout-form.corner { position: absolute; top: var(--notice-logout-inset); right: var(--notice-logout-inset); margin: 0; } .logout-btn { background: transparent; border: none; padding: var(--icon-sm-pad); color: var(--text-hint); cursor: pointer; line-height: 0; } .logout-btn:hover { color: var(--color-error); } /* ホバーで赤くして“出る”操作だと分かる */ .logout-btn svg { width: var(--icon-sm); height: var(--icon-sm); display: block; } /* --- メニューボタン（記録・編集など） --- */ .home-menu { display: flex; flex-direction: column; gap: var(--btn-gap); } /* メニューの区切り線（「出荷」と「設定」の間）。上＝日々の作業／下＝設定・管理、の境目。 ・
の既定の枠線と余白を消し、上辺の1本線だけにする。 ・margin は 0 のまま＝間隔は .home-menu の gap（14px）に任せる （ここで margin を足すと gap と足し算になり、そこだけ不自然に空く）。 */ .menu-sep { width: 100%; margin: 0; border: none; border-top: 1px solid var(--border); } /* ===== ソラコロからのお知らせ（ホーム画面・出荷と設定の間）===== 1日1回のAIアドバイスを、マスコット（ソラコロ）の絵と並べて出す小さなカード。 ・メニューボタンと同じ幅に収まり、ボタンではないので押せる見た目にはしない。 ・色はごく薄い緑（--color-record-bg）＝畑・作物の話題であることを、うるさくない範囲で示す。 ボタンの機能色（記録の緑）とは別物なので、面の色として薄いほうを使う。 ・スマホを最優先に、絵は縮み、文章は折り返す（--responsive の考え方）。 */ .soracoro-notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-light); border-radius: var(--radius-card); background: var(--color-record-bg); } /* 絵の部分。flex-shrink:0 ＝ 文章が長くてもソラコロを潰さない。 */ .soracoro-notice-icon { flex-shrink: 0; line-height: 0; /* SVGの下に余分なすき間ができるのを防ぐ */ } /* min-width:0 ＝ 長い単語があってもはみ出さずに折り返させるための決まり文句（flex項目の作法）。 */ .soracoro-notice-body { flex: 1; min-width: 0; } .soracoro-notice-text { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; /* AIの文章に改行があれば、そのまま活かす */ } /* 「考えています…」の待ちメッセージ。本文より控えめにする。 */ .soracoro-notice-loading { margin: 0; font-size: 13px; color: var(--text-hint); } /* メンテナンス遮断中（非スーパーマスター）にメニューの代わりに出す案内文。 */ .maintenance-blocked-notice { margin-top: var(--notice-date-gap); color: var(--color-warn-text); font-weight: 700; text-align: center; } /* 共通のメニューボタン。アイコンは左端に固定し、文字はボタン全体の中央に置く。 position:relative（親の基準）＋ アイコンを absolute で左に固定することで、 ラベルはアイコンの幅に影響されず“ボタン全体”の中央にそろう。 */ .menu-btn { position: relative; /* 中のアイコンを絶対配置する基準 */ display: flex; align-items: center; justify-content: center; /* ラベルを横中央に */ width: 100%; height: var(--btn-menu-h); /* メニューボタン（記録・編集など）の縦サイズ */ padding: 0 var(--btn-menu-pad-x); border: none; border-radius: var(--btn-menu-radius); color: var(--text); /* 文字は濃い色（モックに合わせる） */ font-size: var(--btn-menu-font); font-family: inherit; /*