/* ============================================================ さんすうブロック — スタイル 小学1年生向け: 大きなボタン・はっきりした色・丸いかたち ============================================================ */ :root { --orange: #ff9f43; --orange-dark: #e8862a; --blue: #4aa3ff; --blue-dark: #2f7fd6; --green: #2ecc71; --green-dark: #1faa58; --pink: #ff7eb3; --purple: #a06cd5; --ink: #3d3d4e; --mark: #af4809; /* しきに かきこむ しるし（きょうかしょの えんぴつの いろ）。 水色の しきの 上で 4.5:1 に とどく こさに した */ --paper: #ffffff; --bg-top: #cdeeff; --bg-bottom: #fff6d8; --slot-line: #b9c4d0; /* 面用（白ぬき文字を のせられる 濃さ）と 文字用（白い地で 4.5:1）を 2段階に わける。ひとつの 値で 両方を まかなうと、かならず どちらかが とどかない。もとの 色相は 変えず、明度だけ さげている。 */ --orange-surface: #b15c00; --orange-surface-d: #8d4c0f; --orange-text: #b16013; --blue-surface: #0070e4; --blue-surface-d: #205ea2; --blue-text: #256dbc; --amber-surface: #946c00; --amber-surface-d: #7c5607; --green-surface: #1e8349; --green-surface-d: #136b37; --green-text: #198646; --purple-surface: #9751d1; --purple-surface-d: #793eb6; --purple-text: #9358cf; --pink-surface: #e30059; --pink-surface-d: #af215c; --radius: 18px; --shadow: 0 4px 0 rgba(0, 0, 0, 0.14); /* 端末幅に応じて なめらかに拡大縮小する流体サイズ */ --slot-size: clamp(32px, 9.5vw, 54px); --block-size: calc(var(--slot-size) - 8px); --eq-font: clamp(38px, 11vw, 66px); /* さくらんぼ: まると まるの あいだは しるし（わ）が とおれる ひろさに する */ --cherry-r: clamp(40px, 11vw, 54px); --cherry-gap: clamp(16px, 4.5vw, 26px); --key-h: clamp(54px, 9.5vmin, 78px); --key-font: clamp(24px, 4.8vmin, 34px); /* ノッチ・ホームバー・丸角の ぶん */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* 児童むけの がめんなので 配色は 固定する（かってに 暗くしない） */ :root { color-scheme: light; } /* ---------- タップ領域 44px ---------- ボタンじたいを 44px に すると、つめて ならべた タブや ＋− が おりかえって べつの こわれかたを する。 見た目は そのままに、疑似要素で あたり判定だけを ひろげる。 （input は 疑似要素を もてないので、チェックボックスの たぐいは かこみの