@charset "UTF-8";
/* ============================================================
   カメふしぎ島 —「おうちの方へ」(保護者向けの橋渡しページ)
   - kids.css とカラートークンを共有し、同じサイトだと分かるようにする
   - フォント/文字サイズ/行間は大人向け（子どもページと区別）
   - ふりがな・島のちずナビ・進行✓・折りたたみは使わない
   - コントラスト比は WCAG AA 以上を数値で確認
   ============================================================ */

:root{
  --o-bg:        #fffbf0;
  --o-card:      #ffffff;
  --o-ink:       #1e3a2f;  /* 本文 (対 #fffbf0  11.94:1) */
  --o-ink-soft:  #4f6a5a;  /* 補助文字 (対 #fffbf0  6.35:1) */
  --o-green:     #1f5636;  /* リンク・見出し罫 (対 #fffbf0  8.62:1) */
  --o-forest:    #2f4a3c;  /* フッター背景 */
  --o-line:      #dfe6dc;
  --o-tint:      #f2f7f0;
  --o-accent:    #b8860b;
  --o-radius:    14px;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--o-bg);
  color:var(--o-ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",Meiryo,sans-serif;
  font-size:17px;
  line-height:1.9;
  letter-spacing:.01em;
  -webkit-text-size-adjust:100%;
}

.o-wrap{width:min(700px,92vw);margin-inline:auto}

a{color:var(--o-green)}
a:focus-visible{outline:3px solid var(--o-accent);outline-offset:2px}

/* ---------- 上部リンク ---------- */
.o-top{padding:12px 0 0;font-size:15px}
.o-top a{display:inline-block;padding:8px 4px;text-decoration:none;font-weight:700}
.o-top a:hover{text-decoration:underline}
.o-top span{color:var(--o-ink-soft);padding:0 4px}

/* ---------- 見出し ---------- */
.o-head{margin:12px 0 0;padding-bottom:18px;border-bottom:2px solid var(--o-line)}
.o-kicker{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--o-ink-soft);letter-spacing:.06em}
.o-head h1{margin:0;font-size:clamp(25px,5.8vw,31px);line-height:1.55;font-weight:700}
.o-head .o-lead{margin:14px 0 0;font-size:17px;line-height:1.95}

/* ---------- セクション ---------- */
.o-sec{margin:32px 0 0}
.o-sec>h2{
  margin:0 0 14px;font-size:clamp(19px,4.4vw,22px);line-height:1.6;font-weight:700;
  padding-left:12px;border-left:5px solid var(--o-green);
}
.o-sec p{margin:0 0 13px}
.o-sec p:last-child{margin-bottom:0}
.o-note{font-size:15px;color:var(--o-ink-soft);line-height:1.85}

/* ---------- 箇条書き ---------- */
.o-list{margin:0 0 13px;padding-left:1.35em}
.o-list li{margin-bottom:6px}
.o-list li:last-child{margin-bottom:0}

/* ---------- 会話の文案 ---------- */
.o-say{
  margin:0 0 13px;padding:12px 16px;
  background:var(--o-tint);border-left:4px solid #a9c6b3;border-radius:0 8px 8px 0;
  font-size:17px;line-height:1.9;
}

/* ---------- 本文中の導線 ---------- */
.o-go{margin:14px 0 0;display:grid;gap:8px}
.o-go a{
  display:inline-block;font-weight:700;text-decoration:none;
  padding:8px 2px;min-height:44px;line-height:1.65;
}
.o-go a:hover{text-decoration:underline}
.o-go a::before{content:"→ "}

/* ---------- こんなときは ---------- */
.o-scene{
  background:var(--o-card);border:1px solid var(--o-line);
  border-radius:var(--o-radius);padding:18px 17px;margin:0 0 14px;
}
.o-scene:last-child{margin-bottom:0}
.o-scene>h3{margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.7}
.o-scene p{margin:0 0 13px}
.o-scene p:last-child{margin-bottom:0}
.o-scene .o-go{margin-top:12px}

/* ---------- これだけは ---------- */
.o-safe{margin:0;padding:0;list-style:none;counter-reset:os}
.o-safe li{counter-increment:os;position:relative;padding-left:42px;margin-bottom:16px}
.o-safe li:last-child{margin-bottom:0}
.o-safe li::before{
  content:counter(os);position:absolute;left:0;top:3px;
  width:30px;height:30px;border-radius:50%;
  background:var(--o-green);color:#fff;
  font-size:15px;font-weight:700;line-height:30px;text-align:center;
}
.o-safe b{display:block;font-size:17px;line-height:1.75}
.o-safe span{display:block;font-size:16px;color:var(--o-ink-soft);line-height:1.85;margin-top:2px}
.o-src{
  margin:16px 0 0;padding-top:12px;border-top:1px dashed var(--o-line);
  font-size:15px;color:var(--o-ink-soft);line-height:1.9;
}
.o-src a{font-weight:700}

/* ---------- 本体への入口（このページの中心） ---------- */
.o-links{display:grid;gap:11px;margin:0}
.o-link{
  display:flex;align-items:center;gap:14px;
  background:var(--o-card);border:1px solid var(--o-line);
  border-radius:12px;padding:16px 16px;text-decoration:none;color:var(--o-ink);
  min-height:56px;
}
.o-link:hover{border-color:var(--o-green);background:var(--o-tint)}
.o-link .ico{flex:0 0 auto;font-size:26px;line-height:1}
.o-link .txt{flex:1 1 auto}
.o-link b{display:block;font-size:17px;font-weight:700;line-height:1.7;color:var(--o-green)}
.o-link span{display:block;font-size:15px;color:var(--o-ink-soft);line-height:1.8}
.o-link .arw{flex:0 0 auto;color:var(--o-green);font-weight:700}

/* ---------- フッター ---------- */
.o-footer{
  background:var(--o-forest);color:#f4efe2;margin-top:44px;padding:26px 0 30px;font-size:15px;
}
.o-footer p{margin:0 0 8px;line-height:1.9}
.o-footer p:last-child{margin-bottom:0}
.o-footer a{color:#ffe9b8;font-weight:700;display:inline-block;padding:6px 2px}

@media (min-width:700px){
  body{font-size:18px}
  .o-scene{padding:20px 22px}
  .o-link{padding:18px 20px}
}