@charset "UTF-8";
/* =============================================================================
   配色と文字サイズ
   -----------------------------------------------------------------------------
   見た目を変えたいときは、このファイルだけを直してください。
   app.css には配置や大きさだけを書いてあり、色は一切書いていません。

   下のほうに配色の候補をいくつか用意してあります。
   使いたいものを囲んでいるコメント記号を外し、
   いま有効なものをコメントで囲めば入れ替わります。

   【守ってほしいこと】利用者は高齢者です（設計メモ 7-0）。
     - 文字と背景の明暗差をはっきりつける（WCAG AA = 4.5:1 以上）
     - ink-weak より薄い文字色を作らない
     - 色だけで意味を伝えない。必ず文字を添える

   【注意】CSS のコメントは入れ子にできません。
   コメントの中にコメントの終わり記号を書くと、そこで閉じてしまい、
   以降が壊れます。説明文に記号そのものを書かないでください。
   ========================================================================== */

:root {
    /* --- 書体 ------------------------------------------------------------
       画面全体を明朝体でそろえる。
       氏名・法名だけ明朝、他はゴシックにすると釣り合いが悪いため。

       先頭の IPAmj明朝 は異体字（𠮷 𠩤 𣳾 や IVS）を持つ唯一のフォントで、
       帳票と同じ字形を画面でも確かめられる。
       入っていない端末では後ろのものへ順に落ちる。

       ゴシックに戻したいときは、この 2 行を次に置き換える:
         --font-ui:   "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
         --font-name: "IPAmjMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
       ---------------------------------------------------------------------- */
    --font-ui:   "IPAmjMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    /* 氏名・法名。いまは本文と同じ（設計メモ 12-1） */
    --font-name: "IPAmjMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;

    /* --- 文字の大きさ ---------------------------------------------------- */
    --size-base: 18px;      /* 本文。18px を下回らないこと */
    --size-small: 16px;     /* 一覧・補足 */
    --size-large: 22px;     /* 見出し */
    --size-title: 28px;     /* 画面の題 */

    /* --- 基本の色 -------------------------------------------------------- */
    --ink: #1a1a1a;         /* 本文の文字 */
    --ink-weak: #4a4a4a;    /* 補足の文字。これより薄くしない */
    --paper: #ffffff;       /* 表・カードの地 */
    --ground: #f2f0ec;      /* 画面全体の地 */
    --line: #c4bfb6;        /* 細い罫線 */
    --shade: rgba(0, 0, 0, 0.18);  /* 表が横に続いていることを示す端の影 */
    --line-strong: #8a8378; /* 入力欄・ボタンの枠 */

    /* --- 主色（見出し帯・主ボタン・選択中）------------------------------- */
    --accent: #7a1f2b;         /* 寺の落ち着いた臙脂 */
    --accent-dark: #631823;    /* 主ボタンにカーソルを乗せたとき */
    --accent-ink: #ffffff;     /* 主色の上に乗る文字 */
    --accent-weak: #f3e7e8;    /* 選択中の行・条件の札 */

    /* --- 知らせの色 ------------------------------------------------------ */
    --ok: #1a5c34;
    --ok-weak: #e4f1e8;
    --warn: #8a4b00;
    --warn-weak: #fdf0dd;
    --error: #9a1b1b;
    --error-weak: #fbe6e6;

    /* --- 寸法 ------------------------------------------------------------ */
    --tap: 44px;        /* 押せるものの最小の高さ。小さくしないこと */
    --radius: 6px;
    --gap: 16px;
}


/* =============================================================================
   配色の候補

   使いたいものを囲んでいるコメント記号を外してください。
   上の :root より後に書いてあるので、同じ項目はこちらが優先されます。
   ========================================================================== */


/* 藍（落ち着いた紺）
:root {
    --accent:      #1f3a5f;
    --accent-dark: #172c48;
    --accent-ink:  #ffffff;
    --accent-weak: #e6ecf4;
    --ground:      #f1f3f6;
    --line:        #bfc5cf;
    --line-strong: #7d8797;
}
*/


/* 苔（穏やかな緑）
:root {
    --accent:      #33502f;
    --accent-dark: #263c23;
    --accent-ink:  #ffffff;
    --accent-weak: #e8efe6;
    --ground:      #f2f4f0;
    --line:        #c2c9bd;
    --line-strong: #808a7a;
}
*/


/* 墨（色を使わない）
:root {
    --accent:      #2b2b2b;
    --accent-dark: #111111;
    --accent-ink:  #ffffff;
    --accent-weak: #eaeaea;
    --ground:      #f4f4f4;
    --line:        #c8c8c8;
    --line-strong: #808080;
}
*/


/* もっと大きな文字（見えにくいという声が出たとき）
:root {
    --size-base:  20px;
    --size-small: 18px;
    --size-large: 24px;
    --size-title: 32px;
    --tap:        52px;
}
*/