/* =========================================================================
   まなびタイム 共通スタイル
   ここ（:root）の値を変えると、3ページ全部の見た目が変わります
   ========================================================================= */
:root{
  /* --- 色 --- */
  --bg:        #f8f9fa;   /* ページの背景 */
  --paper:     #fdfbf7;   /* 紙のノート風カードの色 */
  --ink:       #2b3a55;   /* 文字の色 */
  --ink-thin:  #5b6b83;   /* うすい文字（説明文） */
  --line:      #9ca3af;   /* 区切り線 */
  --star:      #f9a8d4;   /* 星の色（ピンク） */

  /* --- 教材カードの色（5枚ぶん。増やすときはここに足す） --- */
  --card1:     #f87171;   /* マウス */
  --card1-on:  #ef4444;   /* マウス（カーソルを乗せたとき） */
  --card2:     #3b82f6;   /* タイピングたんご */
  --card2-on:  #2563eb;
  --card3:     #34d399;   /* タイピングきゃっと */
  --card3-on:  #10b981;
  --card4:     #fbbf24;   /* ローマ字 */
  --card4-on:  #f59e0b;
  --card5:     #c084fc;   /* ドット絵おえかき */
  --card5-on:  #a855f7;

  /* --- 文字 --- */
  --font: "Hiragino Maru Gothic ProN","M PLUS Rounded 1c","UD Digi Kyokasho NP-B","BIZ UDPGothic","Yu Gothic UI",system-ui,sans-serif;

  /* --- 大きさ --- */
  --maxw: 1100px;         /* 中身の最大幅 */
  --radius: 12px;         /* 角の丸み */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.8;
  -webkit-text-size-adjust:100%;
}

a{ color:#1d4ed8; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:32px 20px 64px; }

/* =========================================================================
   トップの上半分：左＝紙のノート風タイトル ／ 右＝教材カード
   ========================================================================= */
.hero{ display:flex; gap:32px; align-items:stretch; }

/* --- 紙のノート風 --- */
.paper{
  flex:1; position:relative;
  background:var(--paper);
  padding:32px;
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  display:flex; flex-direction:column; justify-content:center;
}
/* ノートの上のとじ具（灰色の四角が10個） */
.paper-tabs{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:0 16px; }
.paper-tabs i{ display:block; width:16px; height:16px; margin-top:-8px; background:#e5e7eb; border-radius:0 0 8px 8px; }

.paper h1{ margin:8px 0 0; font-weight:400; text-align:center; }
.paper h1 span{ display:block; font-size:clamp(34px,5vw,52px); letter-spacing:.08em; }
.paper .rule{ width:190px; height:2px; background:var(--line); margin:24px auto; }
.paper p{ text-align:center; font-size:17px; margin:0; }

/* 右下のおおきな星 */
.paper .bigstar{ position:absolute; right:28px; bottom:28px; width:96px; height:96px; color:var(--star); transform:rotate(12deg); }

/* --- 教材カード --- */
.cards{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; }

.card{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--radius);
  color:#fff; text-decoration:none;
  padding:24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .3s, background-color .3s;
}
.card:hover, .card:focus-visible{ transform:scale(1.05); }
.card .no{ font-size:26px; font-weight:700; }
.card .name{ margin-top:14px; font-size:16px; font-weight:700; text-align:center; }
.card .sub{ margin-top:6px; font-size:13px; text-align:center; opacity:.95; }
/* カードの左上でくるくる回る星 */
.card .ministar{ position:absolute; top:22px; left:22px; width:44px; height:44px; color:#fff; opacity:.9; }

.c1{ background:var(--card1); } .c1:hover{ background:var(--card1-on); }
.c2{ background:var(--card2); } .c2:hover{ background:var(--card2-on); }
.c3{ background:var(--card3); } .c3:hover{ background:var(--card3-on); }
.c4{ background:var(--card4); } .c4:hover{ background:var(--card4-on); }
.c5{ background:var(--card5); } .c5:hover{ background:var(--card5-on); }

@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes wiggle{ 0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
.a-spin{ animation:spin-slow 3s linear infinite; }
.a-wiggle{ animation:wiggle 1.6s ease-in-out infinite; }
.a-float{ animation:floaty 2s ease-in-out infinite; }

/* 動きを減らす設定の人には止める（酔い・発作の配慮） */
@media (prefers-reduced-motion:reduce){
  .a-spin,.a-wiggle,.a-float{ animation:none; }
  .card{ transition:none; }
  .card:hover{ transform:none; }
}

/* =========================================================================
   大人向けの説明・本文
   ========================================================================= */
.section{ margin-top:56px; }
.section h2{
  font-size:22px; margin:0 0 16px;
  padding-left:12px; border-left:6px solid var(--card2);
}
.section h3{ font-size:17px; margin:28px 0 8px; }
.section p, .section li{ color:var(--ink-thin); font-size:15.5px; }
.section ul{ padding-left:1.4em; }

.box{ background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius); padding:20px 24px; }

/* 運営者情報などの表 */
.table{ width:100%; border-collapse:collapse; font-size:15.5px; }
.table th, .table td{ border-bottom:1px solid #e5e7eb; padding:12px 8px; text-align:left; vertical-align:top; }
.table th{ width:9em; white-space:nowrap; color:var(--ink); font-weight:700; }
.table td{ color:var(--ink-thin); }

/* =========================================================================
   ページ下部
   ========================================================================= */
.sitefoot{
  margin-top:64px; padding-top:24px;
  border-top:1px solid #e5e7eb;
  font-size:14px; color:var(--ink-thin);
}
.sitefoot nav{ margin-bottom:12px; }
.sitefoot nav a{ margin-right:18px; }

.backlink{ display:inline-block; margin-bottom:24px; font-size:15px; }

/* =========================================================================
   画面がせまいとき（タブレット縦・小さいノートPC）
   ========================================================================= */
@media (max-width:820px){
  .hero{ flex-direction:column; }
  .paper{ padding:28px 20px 96px; }
  .paper .bigstar{ width:72px; height:72px; }
  .cards{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .cards{ grid-template-columns:1fr; }
  .card{ aspect-ratio:auto; padding:28px 20px; }
  .card .ministar{ display:none; }
}