@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&display=swap");

/* かけた ブランドの 色と 書体（ブランドブック：claude/brand-kaketa.md）。ここを 変えれば 全画面が かわる */
:root {
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --sans: var(--round);
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  /* 画用紙・すみ・ひだまり（7:2:1） */
  --k-paper: #FFFDF8;   /* 画用紙：背景 */
  --k-paper-2: #F5F1E8; /* ざらがみ：くぼみ・入力欄 */
  --k-card: #FFFFFF;
  --k-ink: #2B2F45;     /* すみ：文字・線・主ボタン */
  --k-ink-2: #646880;   /* うすずみ：説明 */
  --k-line: #E7E1D4;
  --k-sun: #FFD23F;     /* ひだまり：子どもの ボタン・よろこび（上の 文字は すみ） */
  --k-sun-soft: #FFF2C2;
  --k-mikan: #F08A3C;   /* 注意・フォーカス */
  --k-mikan-text: #B4561A;
  --k-shadow: rgba(43, 47, 69, .08);
  /* 前の 名前（描く画面などが つかう） */
  --kid-bg: var(--k-paper);
  --kid-ink: var(--k-ink);
  --kid-sub: var(--k-ink-2);
  --yellow: var(--k-sun);
  --yellow-d: #D9A91C;
  --red: #e5483f;
  --orange: var(--k-mikan);
  --green: #3fa35b;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
/* ロゴの アーチ（ひとふでの 橋） */
.arch { display: inline-block; width: 1.25em; height: auto; aspect-ratio: 76 / 46; color: var(--k-ink); vertical-align: -.02em; margin-right: .3em; }
.mark { display: inline-grid; place-items: center; border-radius: 50%; flex: none; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12); }
.mark svg { width: 62%; height: 62%; }