/* ゆっくりキッズ ── 濃紺 × オレンジ版（2026-09-27） */
:root{
  /* 文字 */
  --ink:        #1C3B5E;  /* 見出し・ロゴ・本文の濃い紺 */
  --ink-sub:    #4A6480;  /* そえ文。これより薄くしない */
  /* 面 */
  --cream:      #FDF6E9;  /* 全体の地色 */
  --cream-2:    #F6EDD9;  /* 少し沈ませたい面 */
  --mint:       #E9F0EA;
  --peach:      #FBECE2;  /* ぎょうじ（特別な日）の地。2026-10-03 うすい緑から変更 */
  --sky:        #E9F0F7;
  --line:       #E2D8C2;
  --line-soft:  #EDE4D2;
  /* 差し色 */
  --orange:     #E0701C;  /* ボタン・強調 */
  --orange-dark:#C45C12;
  --green:      #3F6B5E;  /* 落ち着かせたい小さな印 */
  /* 形 */
  --r-s: 10px; --r-m: 18px; --r-l: 28px;
  --w: min(100%, 1180px);
  /* 左右の余白：スマホ22px → ノートPC60px前後 → 大きい画面80px。画面の広さで伸び縮み */
  --gut: clamp(22px, 6vw, 80px);
  --ease: cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream); color:var(--ink);
  font-family:"Zen Maru Gothic",system-ui,sans-serif;
  font-size:17px; line-height:1.95;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:"Zen Maru Gothic",sans-serif; font-weight:700; line-height:1.45; letter-spacing:.01em; color:var(--ink)}
/* 見出しは、ことばの途中で折らない（Chromeは文節で、Safariは句読点・空白で折る。入りきらないときだけ途中で折る） */
h1,h2,h3{word-break:keep-all; overflow-wrap:anywhere}
@supports (word-break:auto-phrase){ h1,h2,h3{word-break:auto-phrase} }
img{max-width:100%; display:block}
a{color:var(--ink)}
.wrap{width:var(--w); margin-inline:auto; padding-inline:var(--gut)}

/* 上のおび */
.bar{position:sticky; top:0; z-index:20; background:rgba(253,246,233,.9);
  backdrop-filter:saturate(1.1) blur(10px)}
.bar .wrap{display:flex; align-items:center; justify-content:space-between; min-height:76px; gap:16px}
.logo{font-size:25px; font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--ink)}
.bar nav{display:flex; gap:30px; font-size:15.5px; font-weight:500}
.bar nav a{color:var(--ink); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; transition:border-color .2s, color .2s}
.bar nav a:hover,.bar nav a:focus-visible{border-bottom-color:var(--orange); outline:none}
.bar nav a:focus-visible{outline:2px solid var(--orange); outline-offset:4px}
/* 読むページの右上：「困りごとチェック」と「← もどる」を並べる（スマホは「もどる」だけ） */
.bar nav.bar-r{align-items:center}
/* 「← もどる」は、メニューの中でも下線つきのまま（メニューの書式に上書きされないように） */
.bar nav a.back{padding:8px 2px; border-bottom-color:var(--line)}
.bar nav a.back:hover,.bar nav a.back:focus-visible{border-bottom-color:var(--orange)}
@media (max-width:560px){ .bar-r .tocheck{display:none} }

/* ボタン */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:14px;
  background:var(--orange); color:#fff; text-decoration:none;
  padding:19px 38px; border:none; border-radius:999px; font-size:19px; font-weight:700;
  letter-spacing:.02em; font-family:inherit; cursor:pointer;
  transition:background .18s var(--ease), transform .12s var(--ease), box-shadow .18s}
.btn:hover,.btn:focus-visible{background:var(--orange-dark); outline:none; box-shadow:0 10px 26px rgba(224,112,28,.28)}
.btn:focus-visible{box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--orange)}
.btn:active{transform:translateY(1px)}
.btn.sub{background:transparent; color:var(--ink); border:2px solid var(--line)}
.btn.sub:hover,.btn.sub:focus-visible{background:var(--cream-2); border-color:var(--orange); box-shadow:none}
.btn.ghost{background:transparent; color:var(--ink); border:none; border-radius:0;
  padding:4px 2px; font-size:17px; border-bottom:2px solid var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-bottom-color:var(--orange); box-shadow:none}

.kicker{font-size:16px; font-weight:500; color:var(--ink); margin:0 0 14px}
.lead{font-size:18px; color:var(--ink-sub)}

footer{padding:56px 0 64px; margin-top:20px; border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-sub)}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
footer .logo{font-size:19px}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
}