<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>＃漢字 アーカイブ - じゅにさん子育てブログ</title>
	<atom:link href="https://jouniorsankosodate.com/tag/%EF%BC%83%E6%BC%A2%E5%AD%97/feed/" rel="self" type="application/rss+xml" />
	<link>https://jouniorsankosodate.com/tag/＃漢字/</link>
	<description>勉強が苦手な子でも、わかる・できる・続けられる</description>
	<lastBuildDate>Sun, 28 Dec 2025 10:01:18 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://jouniorsankosodate.com/wp-content/uploads/2026/02/cropped-44f1f7a5e508593f7c057572c07f45a3-32x32.jpg</url>
	<title>＃漢字 アーカイブ - じゅにさん子育てブログ</title>
	<link>https://jouniorsankosodate.com/tag/＃漢字/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL10</title>
		<link>https://jouniorsankosodate.com/tacota-bushu-flash-10/</link>
					<comments>https://jouniorsankosodate.com/tacota-bushu-flash-10/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Sat, 27 Dec 2025 14:01:07 +0000</pubDate>
				<category><![CDATA[🐙タコタの部首レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃成り立ち]]></category>
		<category><![CDATA[＃漢字]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃部首]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2688</guid>

					<description><![CDATA[<p>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL10 まずはタコタの「もんだい」カードを見て、３択クイズにちょうせん！ えをタップすると、正解のイラストと「部首の意味・なりたち」がわかるよ。  [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-10/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL10</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタとおぼえる部首フラッシュ LEVEL10（読み方・意味＋なりたち） -->
<div class="bushu-flash-lv10" id="bushu-flash-lv10">
  <h2 class="bushu-title">
    タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL10
  </h2>
  <p class="bushu-sub">
    まずはタコタの「もんだい」カードを見て、３択クイズにちょうせん！<br>
    えをタップすると、正解のイラストと「部首の意味・なりたち」がわかるよ。
  </p>

  <div class="bushu-status">
    <span class="bushu-counter" id="bushu-lv10-counter">1 / 20</span>
    <button type="button" class="bushu-btn-sub" id="bushu-lv10-shuffle">🔀 シャッフルする</button>
  </div>

  <div class="bushu-card">
    <div class="bushu-img-wrap">
      <img decoding="async" id="bushu-lv10-img" src="" alt="部首カード" loading="lazy">
    </div>

    <div class="bushu-text">
      <h3 id="bushu-lv10-name"></h3>

      <div class="bushu-quiz">
        <p id="bushu-lv10-q" class="bushu-q"></p>
        <ul class="bushu-choices" id="bushu-lv10-choices"></ul>
        <p id="bushu-lv10-feedback" class="bushu-feedback"></p>
      </div>

      <p id="bushu-lv10-explain" class="bushu-explain" style="display:none;"></p>
      <p id="bushu-lv10-extra" class="bushu-extra" style="display:none;"></p>
    </div>
  </div>

  <div class="bushu-nav">
    <button type="button" class="bushu-btn-sub" id="bushu-lv10-restart">↩ はじめから</button>
    <button type="button" class="bushu-btn-main" id="bushu-lv10-next">▶ つぎのもんだいへ</button>
  </div>

  <p class="bushu-note">※「🔀 シャッフルする」をおすと、もんだいの順番が入れかわるよ。</p>
</div>

<style>
.bushu-flash-lv10{
  --card-bg:#ecfff4;
  --accent:#065f46;   /* 深緑 */
  --border:#222;
  --text:#333;
  --muted:#666;

  max-width:720px;
  margin:2rem auto;
  padding:1.3rem;
  border-radius:18px;
  border:2px solid var(--border);
  background:#f7fffb;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  font-family:"游ゴシック体","YuGothic","ヒラギノ角ゴ ProN W3",system-ui,sans-serif;
}
.bushu-flash-lv10 .bushu-title{
  text-align:center;
  margin:0;
  font-size:1.25rem;
  font-weight:800;
}
.bushu-flash-lv10 .bushu-sub{
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  margin-top:.3rem;
}
.bushu-flash-lv10 .bushu-status{
  display:flex;
  justify-content:space-between;
  margin:.6rem 0;
  font-size:.9rem;
}
.bushu-flash-lv10 .bushu-counter{
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
.bushu-flash-lv10 .bushu-card{
  display:flex;
  gap:1rem;
  padding:.9rem;
  border-radius:16px;
  background:var(--card-bg);
  border:2px solid var(--border);
}
@media(max-width:640px){
  .bushu-flash-lv10 .bushu-card{
    flex-direction:column;
    align-items:center;
    padding:.8rem;
  }
}
.bushu-flash-lv10 .bushu-img-wrap{
  flex:0 0 220px;
  max-width:220px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:#fff;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.bushu-flash-lv10 .bushu-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.bushu-flash-lv10 .bushu-text h3{
  margin:.1rem 0 .4rem;
  font-size:1rem;
  font-weight:800;
}
.bushu-flash-lv10 .bushu-quiz{
  margin-top:.1rem;
  border:1px solid #cfeee0;
  background:#fff;
  border-radius:10px;
  padding:.6rem;
}
.bushu-flash-lv10 .bushu-q{
  font-weight:700;
  margin:0 0 .4rem;
  font-size:.95rem;
}
.bushu-flash-lv10 .bushu-choices{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.bushu-flash-lv10 .bushu-choices button{
  width:100%;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid #ddd;
  background:#f7fffb;
  cursor:pointer;
  font-size:.95rem;
}
.bushu-flash-lv10 .bushu-choices button:hover{opacity:.92;}
.bushu-flash-lv10 .bushu-choices button.bushu-correct{
  background:#ecfdf3 !important;
  border-color:#10b981 !important;
}
.bushu-flash-lv10 .bushu-choices button.bushu-wrong{
  background:#fee2e2 !important;
  border-color:#ef4444 !important;
}
.bushu-flash-lv10 .bushu-feedback{
  margin-top:.4rem;
  font-size:.9rem;
  font-weight:900;
}
.bushu-flash-lv10 .bushu-feedback.ok{color:#065f46;}
.bushu-flash-lv10 .bushu-feedback.ng{color:#b91c1c;}

.bushu-flash-lv10 .bushu-explain,
.bushu-flash-lv10 .bushu-extra{
  font-size:.9rem;
  margin:.45rem 0 0;
  color:var(--text);
  line-height:1.7;
}
.bushu-flash-lv10 .bushu-extra{color:var(--muted);}

.bushu-flash-lv10 .bushu-btn-main{
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:.5rem 1.1rem;
  border:2px solid #064e3b;
  cursor:pointer;
}
.bushu-flash-lv10 .bushu-btn-sub{
  border-radius:999px;
  padding:.4rem .9rem;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
}
.bushu-flash-lv10 .bushu-nav{
  margin-top:.9rem;
  position:relative;
  height:46px;
}
.bushu-flash-lv10 #bushu-lv10-restart{
  position:absolute;
  left:0;
  top:0;
}
.bushu-flash-lv10 #bushu-lv10-next{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
}
@media(max-width:640px){
  .bushu-flash-lv10 .bushu-nav{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .bushu-flash-lv10 #bushu-lv10-restart,
  .bushu-flash-lv10 #bushu-lv10-next{
    position:static;
    transform:none;
    width:100%;
    text-align:center;
  }
}
.bushu-flash-lv10 .bushu-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.5rem;
}
</style>

<script>
(function(){

  // ✅ 「もんだい」表示中に見せる共通画像（今回はアイキャッチを流用）
  const commonProblemImg =
    "https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1b65958cc1425b2a8565a1331eb494c.jpg";

  // ✅ LEVEL10 cards（20こ完成版）
  const cards = [
    {
      name:"① 歹（がつへん／かばねへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8e25f0f428ac9d75f259f3a581639499.webp",
      explain:"「歹」は“死んだ人の骨（ガイコツ）”の形がもと。骨・死・残る…みたいなイメージにつながるよ。",
      extra:"ポイント：こわくしすぎず「骨がのこる」って覚えると◎（例：死・残・殴 など）",
      q:"①の部首イメージに一番近いのは？",
      choices:["白骨に残る肉（骨のイメージ）","ふわふわの毛","鳥の巣（かご）"],
      answer:0
    },
    {
      name:"② 毛（け）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/66e19c880fd87d146101d721bd7e6e51.webp",
      explain:"「毛」はそのまま“け・体毛”の形がもと。ふわっとした毛の感じを表すよ。",
      extra:"ポイント：毛が入る漢字は「毛・うぶげ・細かい」系を連想！（例：筆・耗 など）",
      q:"②の部首イメージに近いのは？",
      choices:["ふわふわの毛","えのついた小刀","高い山"],
      answer:0
    },
    {
      name:"③ 氏（うじ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d8f2af5102706f2377d214f94feb115e.webp",
      explain:"「氏」は、え（柄）のついた小さな刃物の形がもとと言われるよ。そこから“一族・名字”の意味に発展。",
      extra:"ポイント：「氏名（しめい）」の“氏”！＝名字のイメージで固定しよう。",
      q:"③の部首イメージに近いのは？",
      choices:["えのついた小刀","白骨（骨）","長い髪の老人"],
      answer:0
    },
    {
      name:"④ 父（ちち）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171074.webp",
      explain:"「父」は、手に道具（斧など）を持って働く姿がもと。そこから“父・年上の男の人”の意味へ。",
      extra:"ポイント：『お父さん＝働く人』のイメージで覚えると残りやすい！",
      q:"④の部首イメージに近いのは？",
      choices:["斧を持つ父（働く姿）","鳥の巣（かご）","鼻の形"],
      answer:0
    },
    {
      name:"⑤ 片（かた）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171017_0.webp",
      explain:"「片」は、物を“二つに割った片方”がもと。半分・かけらのイメージにつながるよ。",
      extra:"ポイント：「片方だけ」＝片。左右どちらでも“半分”って覚えたらOK！",
      q:"⑤の部首イメージに近いのは？",
      choices:["木を縦に割った右半分","ふわふわの毛","酒つぼ（発酵）"],
      answer:0
    },
    {
      name:"⑥ 至（いたる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171016_0.webp",
      explain:"「至」は、矢が地面に刺さって“そこまで届いて止まる”形がもと。到達・到着のイメージだよ。",
      extra:"ポイント：『到着＝止まる』が合図。矢がブスッ→ここまで！",
      q:"⑥の部首イメージに近いのは？",
      choices:["矢が地面に刺さって止まる（到達）","高くそびえる山","反対向きに飛ぶ鳥"],
      answer:0
    },
    {
      name:"⑦ 色（いろ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171015_0.webp",
      explain:"「色」は、ひざまずく人に上から手を差しのべる形がもとと言われるよ。そこから“ようす・気持ち・色合い”へ。",
      extra:"ポイント：「顔色」「色々」みたいに“状態・雰囲気”の言葉でよく使うね。",
      q:"⑦の部首イメージに近いのは？",
      choices:["ひざまずく人に手を差し伸べる","皿の赤い血","木を縦に割った右半分"],
      answer:0
    },
    {
      name:"⑧ 血（ち）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/9ef61120464d5316b3558fb546a8dbc4.webp",
      explain:"「血」は、器（うつわ）に入った血を表す形がもと。血・血のつながり（なかま）のイメージだよ。",
      extra:"ポイント：『血縁（けつえん）』＝つながり。こわくしすぎず“赤い液体”でOK！",
      q:"⑧の部首イメージに近いのは？",
      choices:["皿の赤い血","えのついた小刀","鳥の巣（かご）"],
      answer:0
    },
    {
      name:"⑨ 西（にし）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/94f2f365abe93fc257332ed670cdf5e0.webp",
      explain:"「西」は“鳥の巣（あみかご）”の形がもとという説があるよ。そこから方角の“西”に。",
      extra:"ポイント：方角は“にし”。形は“かご”で覚えると引っかかりやすい！",
      q:"⑨の部首イメージに近いのは？",
      choices:["鳥の巣（目の粗いカゴ）","高い山","鼻の形"],
      answer:0
    },
    {
      name:"⑩ 見（みる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b84565f4e91e852285dc5f6db9c82a6c.webp",
      explain:"「見」は“大きな目＋足”が合体した形がもと。目で見て、足で近づいて様子を見るイメージだよ。",
      extra:"ポイント：『見る＝目』だけじゃなく『見に行く＝足』もセット！",
      q:"⑩の部首イメージに近いのは？",
      choices:["大きな目で見る（目＋足）","ふわふわの毛","麦踏み"],
      answer:0
    },
    {
      name:"⑪ 酉（ひよみのとり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171014_0.webp",
      explain:"「酉」は、酒だる・酒つぼの形がもと。お酒・発酵するもののイメージにつながるよ。",
      extra:"ポイント：酉が入る漢字は“お酒・発酵”を連想！（例：酒・酔・酢 など）",
      q:"⑪の部首イメージに近いのは？",
      choices:["酒つぼ（発酵の泡）","白骨（骨）","木を縦に割った右半分"],
      answer:0
    },
    {
      name:"⑫ 長（ながい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171069_0.webp",
      explain:"「長」は、長い髪をたらした年長者の姿がもと。長い・リーダー（長）の意味へつながるよ。",
      extra:"ポイント：「学年の長」「班長」みたいに“リーダー”の長もこれ！",
      q:"⑫の部首イメージに近いのは？",
      choices:["長い髪の老人（年長者）","鳥の巣（かご）","鼻の形"],
      answer:0
    },
    {
      name:"⑬ 非（あらず）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171070_0.webp",
      explain:"「非」は、左右が背き合う（反対向き）形がもと。ちがう・よくない（否定）のイメージだよ。",
      extra:"ポイント：『非常』『非行』の“非”。＝“ちがう・ダメ”の合図！",
      q:"⑬の部首イメージに近いのは？",
      choices:["反対向きに飛ぶ鳥（背き合う）","皿の赤い血","高くそびえる山"],
      answer:0
    },
    {
      name:"⑭ 面（めん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/1ba483ec9a60c1300ca555d46fff1f89.webp",
      explain:"「面」は、人の顔（おもて）を表す形がもと。顔・表面・ひろい面の意味につながるよ。",
      extra:"ポイント：「表面（ひょうめん）」の“めん”＝おもて！",
      q:"⑭の部首イメージに近いのは？",
      choices:["人の顔（おもて）","えのついた小刀","麦踏み"],
      answer:0
    },
    {
      name:"⑮ 風（かぜ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171071_0.webp",
      explain:"「風」は、虫や大きな鳥など“動きで風が起きる”イメージがもと。風・ようす・ならわしにもつながるよ。",
      extra:"ポイント：『台風』『風景』『流行（はやり）』の“ふう/かぜ”にも出る！",
      q:"⑮の部首イメージに近いのは？",
      choices:["風を起こす大きな鳥","人の顔（おもて）","酒つぼ（発酵）"],
      answer:0
    },
    {
      name:"⑯ 飛（とぶ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171072_0.webp",
      explain:"「飛」は、翼を広げて“空を飛ぶ”姿がもと。飛ぶ・はねるのイメージだよ。",
      extra:"ポイント：『飛行機』『飛び出す』みたいに動きが大きい漢字で登場！",
      q:"⑯の部首イメージに近いのは？",
      choices:["翼を広げて空を飛ぶ鳥","白骨（骨）","木を縦に割った右半分"],
      answer:0
    },
    {
      name:"⑰ 香（かおり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/28eafe705b822e8cc8a8f9eb9a5e02a0.webp",
      explain:"「香」は、穀物（キビ）などの“よいにおい”が立つイメージがもと。におい・かおりの意味だよ。",
      extra:"ポイント：「いい匂い＝香」。『香港（ほんこん）』の“香”もこれ！",
      q:"⑰の部首イメージに近いのは？",
      choices:["キビの香り（におい）","高くそびえる山","反対向きに飛ぶ鳥"],
      answer:0
    },
    {
      name:"⑱ 高（たかい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/bc08fc15a3240548c7da2993206e6764.webp",
      explain:"「高」は、高くそびえる建物や山のイメージがもと。高さ・たかい・くらしレベルにもつながるよ。",
      extra:"ポイント：「高級」「高学年」みたいに“レベルが高い”でも使うね！",
      q:"⑱の部首イメージに近いのは？",
      choices:["高くそびえる山","皿の赤い血","えのついた小刀"],
      answer:0
    },
    {
      name:"⑲ 麦（むぎ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171013_0.webp",
      explain:"「麦」は、麦（穀物）を表す形がもと。麦・穀物のイメージだよ。",
      extra:"ポイント：「麦茶」「小麦」など身近！“むぎ＝穀物”で固定しよう。",
      q:"⑲の部首イメージに近いのは？",
      choices:["麦踏み（むぎをふむ）","鳥の巣（かご）","鼻の形"],
      answer:0
    },
    {
      name:"⑳ 鼻（はな）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171036.webp",
      explain:"「鼻」は、顔の中心にある“はな”を表す形がもと。においにもつながるよ。",
      extra:"ポイント：鼻＝においの入り口！『鼻水』『鼻歌』も思い出せるね。",
      q:"⑳の部首イメージに近いのは？",
      choices:["顔の正面から見た鼻の形","高くそびえる山","ふわふわの毛"],
      answer:0
    }
  ];

  // ▼ ここから下は共通制御（さわらなくてOK）
  const elImg     = document.getElementById("bushu-lv10-img");
  const elName    = document.getElementById("bushu-lv10-name");
  const elEx      = document.getElementById("bushu-lv10-explain");
  const elExtra   = document.getElementById("bushu-lv10-extra");
  const elQ       = document.getElementById("bushu-lv10-q");
  const elChoices = document.getElementById("bushu-lv10-choices");
  const elFb      = document.getElementById("bushu-lv10-feedback");
  const elCounter = document.getElementById("bushu-lv10-counter");
  const btnNext   = document.getElementById("bushu-lv10-next");
  const btnShuffle= document.getElementById("bushu-lv10-shuffle");
  const btnRestart= document.getElementById("bushu-lv10-restart");

  let order = cards.map((_,i)=>i);
  let index = 0;
  let locked = false;

  function shuffle(array){
    for(let i=array.length-1;i>0;i--){
      const j = Math.floor(Math.random()*(i+1));
      [array[i],array[j]] = [array[j],array[i]];
    }
  }

  function render(){
    const c = cards[order[index]];
    locked = false;

    elCounter.textContent = (index+1)+" / "+cards.length;
    elImg.src = commonProblemImg;

    elName.textContent = c.name;
    elQ.textContent    = "❓ 3択クイズ： " + c.q;

    elEx.textContent    = "🔍 なりたち： " + c.explain;
    elExtra.textContent = "✨ もうひとこと： " + c.extra;
    elEx.style.display    = "none";
    elExtra.style.display = "none";

    elFb.textContent = "";
    elFb.classList.remove("ok","ng");
    elChoices.innerHTML = "";

    const idxs = [0,1,2];
    shuffle(idxs);

    idxs.forEach((choiceIndex, i)=>{
      const li  = document.createElement("li");
      const btn = document.createElement("button");

      btn.textContent = (i+1)+". "+c.choices[choiceIndex];
      btn.dataset.correct = (choiceIndex === c.answer) ? "true" : "false";

      btn.addEventListener("click",()=>{
        if(locked) return;
        locked = true;

        const buttons = elChoices.querySelectorAll("button");
        buttons.forEach(b=>b.disabled = true);

        elImg.src = c.answerImg;
        elEx.style.display    = "block";
        elExtra.style.display = "block";

        if(btn.dataset.correct === "true"){
          btn.classList.add("bushu-correct");
          elFb.textContent = "⭕ せいかい！";
          elFb.classList.add("ok");
          elFb.classList.remove("ng");
        }else{
          btn.classList.add("bushu-wrong");
          buttons.forEach(b=>{
            if(b.dataset.correct === "true") b.classList.add("bushu-correct");
          });
          elFb.textContent = "❌ ざんねん… せいかいは「"+c.choices[c.answer]+"」だよ！";
          elFb.classList.add("ng");
          elFb.classList.remove("ok");
        }
      });

      li.appendChild(btn);
      elChoices.appendChild(li);
    });
  }

  btnNext.addEventListener("click",()=>{
    index++;
    if(index >= cards.length){
      index = 0;
      shuffle(order);
    }
    render();
  });

  btnShuffle.addEventListener("click",()=>{
    shuffle(order);
    index = 0;
    render();
  });

  btnRestart.addEventListener("click",()=>{
    order = cards.map((_,i)=>i);
    index = 0;
    render();
  });

  render();

})();
</script>



<!-- ▼ 部首の位置の説明はLEVEL共通で使い回しOK ▼ -->
<div class="bushu-center-wrap">
  <p class="bushu-center-text">
    ▼ 部首の位置（へん・つくり・かんむり など）の見方
  </p>
  <img decoding="async" 
    src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/794D1E6D-74EF-4435-991A-C4C35E4774EF.jpg"
    alt="部首の位置の説明"
    class="bushu-center-img"
    loading="lazy"
  >
</div>

<style>
.bushu-center-wrap{
  text-align:center;
  margin-top:2rem;
}
.bushu-center-text{
  font-size:1rem;
  font-weight:600;
  margin-bottom:1rem;
}
.bushu-center-img{
  max-width:90%;
  height:auto;
  margin:0 auto;
  display:block;
}
</style>



<!-- ✅ 部首フラッシュ：記事下ナビ（下に入れる版） -->
<div class="tacota-bushu-bottomnav" role="navigation" aria-label="部首フラッシュ ナビ">
  <style>
    .tacota-bushu-bottomnav{
      --pink:#f472b6;         /* タコタピンク */
      --pink2:#fde7f3;        /* うすピンク */
      --line:#f7cbe3;         /* 枠線 */
      --ink:#2f3a44;
      --muted:#6f7b88;
      background:linear-gradient(180deg,#fff 0%, var(--pink2) 100%);
      border:2px solid var(--line);
      border-radius:16px;
      padding:16px;
      margin:24px 0;
      box-shadow:0 6px 16px rgba(0,0,0,.06);
    }
    .tacota-bushu-bottomnav .ttl{
      font-weight:800;
      color:var(--ink);
      margin:0 0 10px;
      display:flex; gap:8px; align-items:center;
      font-size:1.05rem;
    }
    .tacota-bushu-bottomnav .ttl .badge{
      background:var(--pink);
      color:#fff;
      border-radius:999px;
      padding:3px 10px;
      font-size:.85rem;
      line-height:1.6;
    }
    .tacota-bushu-bottomnav .desc{
      margin:0 0 12px;
      color:var(--muted);
      font-size:.95rem;
    }
    .tacota-bushu-bottomnav .grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
    }
    @media (max-width: 640px){
      .tacota-bushu-bottomnav .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    .tacota-bushu-bottomnav a.btn{
      display:flex;
      justify-content:center;
      align-items:center;
      text-decoration:none;
      padding:10px 8px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);
      font-weight:700;
      font-size:.95rem;
      transition:.15s ease;
    }
    .tacota-bushu-bottomnav a.btn:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 16px rgba(0,0,0,.08);
      border-color:var(--pink);
    }
    .tacota-bushu-bottomnav .hub{
      margin-top:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .tacota-bushu-bottomnav a.hubbtn{
      text-decoration:none;
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:10px 14px;
      border-radius:999px;
      background:var(--pink);
      color:#fff;
      font-weight:800;
      border:0;
    }
    .tacota-bushu-bottomnav a.hubbtn.sub{
      background:#fff;
      color:var(--ink);
      border:1px solid var(--line);
      font-weight:700;
    }
  </style>

  <p class="ttl"><span class="badge">タコタ</span> 部首フラッシュ｜つづきはどれにする？</p>
  <p class="desc">「まとめページ」に戻ると、初級〜上級をえらびやすいよ！</p>

  <div class="grid">
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-01/">LEVEL1</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-02/">LEVEL2</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-03/">LEVEL3</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-04/">LEVEL4</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-05/">LEVEL5</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-06/">LEVEL6</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-07/">LEVEL7</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-08/">LEVEL8</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-09/">LEVEL9</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-10/">LEVEL10</a>
  </div>

  <div class="hub">
    <!-- ここは固定ページURLに差し替えてね -->
    <a class="hubbtn" href="https://jouniorsankosodate.com/tacota-bushu-flash/">📚 LEVEL1〜10 まとめへ</a>
    <a class="hubbtn sub" href="#top">⬆ 上にもどる</a>
  </div>
</div>



<!-- 🟢 タコタとおぼえる部首フラッシュ LEVEL10（読み方・意味・なりたち） -->
<div class="bushu-flash-lv10" id="bushu-flash-lv10">
  <h2 class="bushu-title">
    タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL10
  </h2>
  <p class="bushu-sub">
    まずはタコタの「もんだい」カードを見て、３択クイズにちょうせん！<br>
    えをタップ（＝選んだら）すると、正解のイラストと「部首の意味・なりたち」が出るよ。
  </p>

  <div class="bushu-status">
    <span class="bushu-counter" id="bushu-lv10-counter">1 / 20</span>
    <button type="button" class="bushu-btn-sub" id="bushu-lv10-shuffle">🔀 シャッフルする</button>
  </div>

  <div class="bushu-card">
    <div class="bushu-img-wrap">
      <img decoding="async" id="bushu-lv10-img" src="" alt="部首カード" loading="lazy">
      <div class="bushu-img-fallback" id="bushu-lv10-fallback" style="display:none;">
        画像が表示できません。<br>
        <a id="bushu-lv10-fallback-link" href="#" target="_blank" rel="noopener">画像を開く</a>
      </div>
    </div>

    <div class="bushu-text">
      <h3 id="bushu-lv10-name"></h3>

      <div class="bushu-quiz">
        <p id="bushu-lv10-q" class="bushu-q"></p>
        <ul class="bushu-choices" id="bushu-lv10-choices"></ul>
        <p id="bushu-lv10-feedback" class="bushu-feedback"></p>
      </div>

      <p id="bushu-lv10-explain" class="bushu-explain" style="display:none;"></p>
      <p id="bushu-lv10-extra" class="bushu-extra" style="display:none;"></p>
    </div>
  </div>

  <div class="bushu-nav">
    <button type="button" class="bushu-btn-sub" id="bushu-lv10-restart">↩ はじめから</button>
    <button type="button" class="bushu-btn-main" id="bushu-lv10-next">▶ つぎのもんだいへ</button>
  </div>

  <p class="bushu-note">※「🔀 シャッフルする」をおすと、もんだいの順番が入れかわるよ。</p>
</div>

<style>
.bushu-flash-lv10{
  --card-bg:#eaf7f1;         /* ほんわか薄緑 */
  --accent:#166534;          /* 深緑アクセント（LEVEL10） */
  --border:#222;
  --text:#333;
  --muted:#666;

  max-width:720px;
  margin:2rem auto;
  padding:1.3rem;
  border-radius:18px;
  border:2px solid var(--border);
  background:#f4fff9;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  font-family:"游ゴシック体","YuGothic","ヒラギノ角ゴ ProN W3",system-ui,sans-serif;
}
.bushu-flash-lv10 .bushu-title{
  text-align:center;
  margin:0;
  font-size:1.25rem;
  font-weight:700;
}
.bushu-flash-lv10 .bushu-sub{
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  margin-top:.3rem;
}
.bushu-flash-lv10 .bushu-status{
  display:flex;
  justify-content:space-between;
  margin:.6rem 0;
  font-size:.9rem;
}
.bushu-flash-lv10 .bushu-counter{
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
}
.bushu-flash-lv10 .bushu-card{
  display:flex;
  gap:1rem;
  padding:.9rem;
  border-radius:16px;
  background:var(--card-bg);
  border:2px solid var(--border);
}
@media(max-width:640px){
  .bushu-flash-lv10 .bushu-card{
    flex-direction:column;
    align-items:center;
    padding:.8rem;
  }
}
.bushu-flash-lv10 .bushu-img-wrap{
  flex:0 0 240px;     /* ←少しだけ広げて、切れにくく */
  max-width:240px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:#fff;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}
.bushu-flash-lv10 .bushu-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;      /* ←ここが切れないポイント */
  object-position:center;
  display:block;
}
.bushu-flash-lv10 .bushu-img-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  font-size:.85rem;
  color:#444;
  background:#fff;
}
.bushu-flash-lv10 .bushu-text{
  flex:1;
  min-width:0;
}
.bushu-flash-lv10 .bushu-text h3{
  margin:.1rem 0 .4rem;
  font-size:1rem;
  font-weight:700;
}
.bushu-flash-lv10 .bushu-quiz{
  margin-top:.1rem;
  border:1px solid #cfeedd;
  background:#fff;
  border-radius:10px;
  padding:.6rem;
}
.bushu-flash-lv10 .bushu-q{
  font-weight:600;
  margin:0 0 .4rem;
  font-size:.95rem;
}
.bushu-flash-lv10 .bushu-choices{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.bushu-flash-lv10 .bushu-choices button{
  width:100%;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid #ddd;
  background:#f6fff9;
  cursor:pointer;
  font-size:.95rem;
}
.bushu-flash-lv10 .bushu-choices button:hover{opacity:.92;}
.bushu-flash-lv10 .bushu-choices button.bushu-correct{
  background:#ecfdf3 !important;
  border-color:#22c55e !important;
}
.bushu-flash-lv10 .bushu-choices button.bushu-wrong{
  background:#fee2e2 !important;
  border-color:#ef4444 !important;
}
.bushu-flash-lv10 .bushu-feedback{
  margin-top:.4rem;
  font-size:.9rem;
  font-weight:700;
}
.bushu-flash-lv10 .bushu-feedback.ok{color:#15803d;}
.bushu-flash-lv10 .bushu-feedback.ng{color:#b91c1c;}

.bushu-flash-lv10 .bushu-explain,
.bushu-flash-lv10 .bushu-extra{
  font-size:.9rem;
  margin:.45rem 0 0;
  color:var(--text);
  line-height:1.6;
}
.bushu-flash-lv10 .bushu-extra{color:var(--muted);}

.bushu-flash-lv10 .bushu-btn-main{
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:.5rem 1.1rem;
  border:2px solid #0f3d23;
  cursor:pointer;
}
.bushu-flash-lv10 .bushu-btn-sub{
  border-radius:999px;
  padding:.4rem .9rem;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
}
.bushu-flash-lv10 .bushu-nav{
  margin-top:.9rem;
  position:relative;
  height:46px;
}
.bushu-flash-lv10 #bushu-lv10-restart{
  position:absolute;
  left:0;
  top:0;
}
.bushu-flash-lv10 #bushu-lv10-next{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
}
@media(max-width:640px){
  .bushu-flash-lv10 .bushu-nav{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .bushu-flash-lv10 #bushu-lv10-restart,
  .bushu-flash-lv10 #bushu-lv10-next{
    position:static;
    transform:none;
    width:100%;
    text-align:center;
  }
}
.bushu-flash-lv10 .bushu-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.5rem;
}
</style>

<script>
(function(){

  // ✅ 共通の「もんだい」カード（LEVEL9と同じ／差し替えOK）
  const commonProblemImg =
    "https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1b65958cc1425b2a8565a1331eb494c.jpg";

  // ✅ LEVEL10（画像URL：ユーザー確定版）
  const cards = [
    {
      name:"① 歹（がつへん／かばねへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8e25f0f428ac9d75f259f3a581639499.webp",
      explain:"歹は「骨」「死」を表す形がもと。白骨が残るイメージにつながるよ。",
      extra:"ポイント：こわくしすぎず「骨がのこる」って覚えると◎",
      q:"①のイメージに一番近いのは？",
      choices:["白骨に残る肉","高い山","麦をふむ"],
      answer:0
    },
    {
      name:"② 毛（け）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/66e19c880fd87d146101d721bd7e6e51.webp",
      explain:"毛は、体毛やふわふわした毛の形がそのまま由来。",
      extra:"ポイント：もこもこ＋1本ピン！で思い出そう。",
      q:"②のイメージに一番近いのは？",
      choices:["ふわふわの毛","鳥の巣","鼻の形"],
      answer:0
    },
    {
      name:"③ 氏（うじ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d8f2af5102706f2377d214f94feb115e.webp",
      explain:"氏は「一族・名字」につながる部首。形のイメージは小さな刃物の説もあるよ。",
      extra:"ポイント：ここは覚えやすく「えのついた小刀」で固定！",
      q:"③のイメージに一番近いのは？",
      choices:["えのついた小刀","矢が地面に刺さる","お皿の赤い血"],
      answer:0
    },
    {
      name:"④ 父（ちち）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171074.webp",
      explain:"父は、道具（斧など）を持つ姿がもとになって「父・年上の男の人」へ。",
      extra:"ポイント：お父さん＝働く人、のイメージでOK！",
      q:"④のイメージに一番近いのは？",
      choices:["斧で木を割る人","鳥が飛ぶ","顔の正面の鼻"],
      answer:0
    },
    {
      name:"⑤ 片（かた）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171017_0.webp",
      explain:"片は「片方・半分」の形がもと。割った片側だけ残るイメージ。",
      extra:"ポイント：『半分だけ』を見たら片！",
      q:"⑤のイメージに一番近いのは？",
      choices:["木を縦に割った右半分","酒つぼの泡","鳥の巣（かご）"],
      answer:0
    },
    {
      name:"⑥ 至（いたる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171016_0.webp",
      explain:"至は「矢が地面に刺さって止まる＝到着」の形がもと。",
      extra:"ポイント：『ここまで来た！』が至（いたる）。",
      q:"⑥のイメージに一番近いのは？",
      choices:["矢が地面に刺さって止まる","ふわふわの毛","高い山"],
      answer:0
    },
    {
      name:"⑦ 色（いろ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171015_0.webp",
      explain:"色は「ようす・気持ち」の意味にもつながる部首。助ける・寄りそう雰囲気で覚えるよ。",
      extra:"ポイント：色＝カラーだけじゃなく『雰囲気（ようす）』も！",
      q:"⑦のイメージに一番近いのは？",
      choices:["ひざまずく人に手を差し伸べる","お皿の赤い血","鳥が空を飛ぶ"],
      answer:0
    },
    {
      name:"⑧ 血（ち）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/9ef61120464d5316b3558fb546a8dbc4.webp",
      explain:"血は、お皿（うつわ）の形＋中身で『血』を表したのが由来。",
      extra:"ポイント：こわくしすぎず“赤い液体”でOK！",
      q:"⑧のイメージに一番近いのは？",
      choices:["お皿の赤い血","木を割った右半分","大きな目で見る"],
      answer:0
    },
    {
      name:"⑨ 西（にし）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/94f2f365abe93fc257332ed670cdf5e0.webp",
      explain:"西は、目の粗いカゴ（鳥の巣みたいな形）の説があるよ。",
      extra:"ポイント：『カゴっぽい形』で西！",
      q:"⑨のイメージに一番近いのは？",
      choices:["鳥の巣（目の粗いカゴ）","矢が刺さる","鼻の形"],
      answer:0
    },
    {
      name:"⑩ 見（みる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b84565f4e91e852285dc5f6db9c82a6c.webp",
      explain:"見は『目＋足』の形がもと。“目でよく見る”が基本！",
      extra:"ポイント：じーっと見る＝見。大きな目が目印。",
      q:"⑩のイメージに一番近いのは？",
      choices:["大きな目で見る","麦踏み","酒つぼ"],
      answer:0
    },
    {
      name:"⑪ 酉（ひよみのとり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171014_0.webp",
      explain:"酉は“酒つぼ”の形がもとで、酒・発酵に関係する漢字に出るよ。",
      extra:"ポイント：ぷくぷく泡＝発酵！で覚えると一発。",
      q:"⑪のイメージに一番近いのは？",
      choices:["酒つぼ／発酵の泡","高い山","ふわふわの毛"],
      answer:0
    },
    {
      name:"⑫ 長（ながい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171069_0.webp",
      explain:"長は“長くのびる”形がもと。長い・リーダーの意味につながるよ。",
      extra:"ポイント：長い髪がなびく＝長（ながい）。",
      q:"⑫のイメージに一番近いのは？",
      choices:["長い髪の老人","鳥の巣","矢が刺さる"],
      answer:0
    },
    {
      name:"⑬ 非（あらず）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171070_0.webp",
      explain:"非は“反対・ちがう”を表す形。左右が背き合うイメージで覚えるよ。",
      extra:"ポイント：『そっちじゃない！』＝非（あらず）。",
      q:"⑬のイメージに一番近いのは？",
      choices:["左右が反対向き（背き合う）","お皿の赤い血","高い山"],
      answer:0
    },
    {
      name:"⑭ 面（めん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/1ba483ec9a60c1300ca555d46fff1f89.webp",
      explain:"面は“顔・おもて”を表す形がもと。表面（surface）の面！",
      extra:"ポイント：顔＝面。『表に出ている側』も面。",
      q:"⑭のイメージに一番近いのは？",
      choices:["人の顔","麦踏み","ふわふわの毛"],
      answer:0
    },
    {
      name:"⑮ 風（かぜ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171071_0.webp",
      explain:"風は“風・ようす”を表す部首。風を起こすイメージで覚えるよ。",
      extra:"ポイント：目に見えないけど動く＝風。",
      q:"⑮のイメージに一番近いのは？",
      choices:["風を起こす大きな鳥","矢が刺さる","鳥の巣"],
      answer:0
    },
    {
      name:"⑯ 飛（とぶ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171072_0.webp",
      explain:"飛は“翼を広げて飛ぶ”形がもと。飛ぶ・はねるのイメージ！",
      extra:"ポイント：羽をひろげた鳥＝飛（とぶ）。",
      q:"⑯のイメージに一番近いのは？",
      choices:["翼を広げて飛ぶ鳥","高い山","お皿の赤い血"],
      answer:0
    },
    {
      name:"⑰ 香（かおり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/28eafe705b822e8cc8a8f9eb9a5e02a0.webp",
      explain:"香は、穀物の“よいにおい”が広がるイメージが由来。",
      extra:"ポイント：ふわ〜っと香りの線で覚える！",
      q:"⑰のイメージに一番近いのは？",
      choices:["甘くおいしそうな香り","木を割った右半分","顔の鼻"],
      answer:0
    },
    {
      name:"⑱ 高（たかい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/bc08fc15a3240548c7da2993206e6764.webp",
      explain:"高は“高いところ”を表す形がもと。高さ・くらしレベルの意味にも。",
      extra:"ポイント：高い＝上にそびえる！でOK。",
      q:"⑱のイメージに一番近いのは？",
      choices:["高くそびえる山","酒つぼ","ふわふわの毛"],
      answer:0
    },
    {
      name:"⑲ 麦（むぎ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171013_0.webp",
      explain:"麦は“麦・穀物”を表す字。麦踏みなど、畑のイメージで覚えると強いよ。",
      extra:"ポイント：畑で麦を育てる＝麦！",
      q:"⑲のイメージに一番近いのは？",
      choices:["麦踏み（むぎふみ）","矢が刺さる","鳥が飛ぶ"],
      answer:0
    },
    {
      name:"⑳ 鼻（はな）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144171036.webp",
      explain:"鼻は“顔のまんなかの鼻”がそのまま由来。においにもつながるよ。",
      extra:"ポイント：顔の中心＝鼻！で即覚え。",
      q:"⑳のイメージに一番近いのは？",
      choices:["顔の正面から見た鼻","鳥の巣","お皿の赤い血"],
      answer:0
    }
  ];

  // ▼ 共通制御
  const elImg     = document.getElementById("bushu-lv10-img");
  const elFallback= document.getElementById("bushu-lv10-fallback");
  const elFallLink= document.getElementById("bushu-lv10-fallback-link");
  const elName    = document.getElementById("bushu-lv10-name");
  const elEx      = document.getElementById("bushu-lv10-explain");
  const elExtra   = document.getElementById("bushu-lv10-extra");
  const elQ       = document.getElementById("bushu-lv10-q");
  const elChoices = document.getElementById("bushu-lv10-choices");
  const elFb      = document.getElementById("bushu-lv10-feedback");
  const elCounter = document.getElementById("bushu-lv10-counter");
  const btnNext   = document.getElementById("bushu-lv10-next");
  const btnShuffle= document.getElementById("bushu-lv10-shuffle");
  const btnRestart= document.getElementById("bushu-lv10-restart");

  let order = cards.map((_,i)=>i);
  let index = 0;
  let locked = false;

  function shuffle(array){
    for(let i=array.length-1;i>0;i--){
      const j = Math.floor(Math.random()*(i+1));
      [array[i],array[j]] = [array[j],array[i]];
    }
  }

  function setImg(src){
    elFallback.style.display = "none";
    elImg.style.display = "block";
    elImg.src = src;

    elImg.onerror = function(){
      elImg.style.display = "none";
      elFallback.style.display = "flex";
      elFallLink.href = src;
    };
  }

  function render(){
    const c = cards[order[index]];
    locked = false;

    elCounter.textContent = (index+1)+" / "+cards.length;

    setImg(commonProblemImg);

    elName.textContent = c.name;
    elQ.textContent    = "❓ 3択クイズ： " + c.q;

    elEx.textContent    = "🔍 なりたち： " + c.explain;
    elExtra.textContent = "✨ もうひとこと： " + c.extra;
    elEx.style.display    = "none";
    elExtra.style.display = "none";

    elFb.textContent = "";
    elFb.classList.remove("ok","ng");
    elChoices.innerHTML = "";

    const idxs = [0,1,2];
    shuffle(idxs);

    idxs.forEach((choiceIndex, i)=>{
      const li  = document.createElement("li");
      const btn = document.createElement("button");

      btn.textContent = (i+1)+". "+c.choices[choiceIndex];
      btn.dataset.correct = (choiceIndex === c.answer) ? "true" : "false";

      btn.addEventListener("click",()=>{
        if(locked) return;
        locked = true;

        const buttons = elChoices.querySelectorAll("button");
        buttons.forEach(b=>b.disabled = true);

        setImg(c.answerImg);
        elEx.style.display    = "block";
        elExtra.style.display = "block";

        if(btn.dataset.correct === "true"){
          btn.classList.add("bushu-correct");
          elFb.textContent = "⭕ せいかい！";
          elFb.classList.add("ok");
          elFb.classList.remove("ng");
        }else{
          btn.classList.add("bushu-wrong");
          buttons.forEach(b=>{
            if(b.dataset.correct === "true"){
              b.classList.add("bushu-correct");
            }
          });
          elFb.textContent = "❌ ざんねん… せいかいは「"+c.choices[c.answer]+"」だよ！";
          elFb.classList.add("ng");
          elFb.classList.remove("ok");
        }
      });

      li.appendChild(btn);
      elChoices.appendChild(li);
    });
  }

  btnNext.addEventListener("click",()=>{
    index++;
    if(index >= cards.length){
      index = 0;
      shuffle(order);
    }
    render();
  });

  btnShuffle.addEventListener("click",()=>{
    shuffle(order);
    index = 0;
    render();
  });

  btnRestart.addEventListener("click",()=>{
    order = cards.map((_,i)=>i);
    index = 0;
    render();
  });

  render();

})();
</script>

<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-10/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL10</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-bushu-flash-10/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL7</title>
		<link>https://jouniorsankosodate.com/tacota-bushu-flash-07/</link>
					<comments>https://jouniorsankosodate.com/tacota-bushu-flash-07/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 18 Dec 2025 05:06:46 +0000</pubDate>
				<category><![CDATA[🐙タコタの部首レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃漢字]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃部首]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2599</guid>

					<description><![CDATA[<p>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL7 まずはタコタの「もんだい」カードを見て、３択クイズにちょうせんしてみよう！ えをタップすると、正解のイラストと「部首の意味」がわかるよ。 1 [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-07/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL7</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタとおぼえる部首フラッシュ LEVEL7（読み方・意味） -->
<div class="bushu-flash-lv7" id="bushu-flash-lv7">
  <h2 class="bushu-title">
    タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL7
  </h2>
  <p class="bushu-sub">
    まずはタコタの「もんだい」カードを見て、３択クイズにちょうせんしてみよう！<br>
    えをタップすると、正解のイラストと「部首の意味」がわかるよ。
  </p>

  <div class="bushu-status">
    <span class="bushu-counter" id="bushu-lv7-counter">1 / 20</span>
    <button type="button" class="bushu-btn-sub" id="bushu-lv7-shuffle">🔀 シャッフルする</button>
  </div>

  <div class="bushu-card">
    <div class="bushu-img-wrap">
      <img decoding="async" id="bushu-lv7-img" src="" alt="部首カード" loading="lazy">
    </div>

    <div class="bushu-text">
      <h3 id="bushu-lv7-name"></h3>

      <div class="bushu-quiz">
        <p id="bushu-lv7-q" class="bushu-q"></p>
        <ul class="bushu-choices" id="bushu-lv7-choices"></ul>
        <p id="bushu-lv7-feedback" class="bushu-feedback"></p>
      </div>

      <p id="bushu-lv7-explain" class="bushu-explain" style="display:none;"></p>
      <p id="bushu-lv7-extra" class="bushu-extra" style="display:none;"></p>
    </div>
  </div>

  <div class="bushu-nav">
    <button type="button" class="bushu-btn-sub" id="bushu-lv7-restart">↩ はじめから</button>
    <button type="button" class="bushu-btn-main" id="bushu-lv7-next">▶ つぎのもんだいへ</button>
  </div>

  <p class="bushu-note">※「🔀 シャッフルする」をおすと、もんだいの順番が入れかわるよ。</p>
</div>

<style>
.bushu-flash-lv7{
  --card-bg:#fff9e6;
  --accent:#ff8aa5;
  --border:#222;
  --text:#333;
  --muted:#666;
  max-width:720px;
  margin:2rem auto;
  padding:1.3rem;
  border-radius:18px;
  border:2px solid var(--border);
  background:#fffdf6;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  font-family:"游ゴシック体","YuGothic","ヒラギノ角ゴ ProN W3",system-ui,sans-serif;
}
.bushu-flash-lv7 .bushu-title{
  text-align:center;
  margin:0;
  font-size:1.25rem;
  font-weight:700;
}
.bushu-flash-lv7 .bushu-sub{
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  margin-top:.3rem;
}
.bushu-flash-lv7 .bushu-status{
  display:flex;
  justify-content:space-between;
  margin:.6rem 0;
  font-size:.9rem;
}
.bushu-flash-lv7 .bushu-counter{
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
}
.bushu-flash-lv7 .bushu-card{
  display:flex;
  gap:1rem;
  padding:.9rem;
  border-radius:16px;
  background:var(--card-bg);
  border:2px solid var(--border);
}
@media(max-width:640px){
  .bushu-flash-lv7 .bushu-card{
    flex-direction:column;
    align-items:center;
    padding:.8rem;
  }
}
.bushu-flash-lv7 .bushu-img-wrap{
  flex:0 0 220px;
  max-width:220px;
  aspect-ratio:1/1;
  border-radius:18px;
  background:#fff;
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.bushu-flash-lv7 .bushu-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.bushu-flash-lv7 .bushu-text h3{
  margin:.1rem 0 .4rem;
  font-size:1rem;
  font-weight:700;
}
.bushu-flash-lv7 .bushu-quiz{
  margin-top:.1rem;
  border:1px solid #e5dcc8;
  background:#fff;
  border-radius:10px;
  padding:.6rem;
}
.bushu-flash-lv7 .bushu-q{
  font-weight:600;
  margin:0 0 .4rem;
  font-size:.95rem;
}
.bushu-flash-lv7 .bushu-choices{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.bushu-flash-lv7 .bushu-choices button{
  width:100%;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fffdf8;
  cursor:pointer;
  font-size:.95rem;
}
.bushu-flash-lv7 .bushu-choices button:hover{
  opacity:.9;
}
.bushu-flash-lv7 .bushu-choices button.bushu-correct{
  background:#ecfdf3 !important;
  border-color:#22c55e !important;
}
.bushu-flash-lv7 .bushu-choices button.bushu-wrong{
  background:#fee2e2 !important;
  border-color:#ef4444 !important;
}
.bushu-flash-lv7 .bushu-feedback{
  margin-top:.4rem;
  font-size:.9rem;
  font-weight:700;
}
.bushu-flash-lv7 .bushu-feedback.ok{color:#15803d;}
.bushu-flash-lv7 .bushu-feedback.ng{color:#b91c1c;}

.bushu-flash-lv7 .bushu-explain,
.bushu-flash-lv7 .bushu-extra{
  font-size:.9rem;
  margin:.4rem 0 0;
  color:var(--text);
}
.bushu-flash-lv7 .bushu-extra{
  color:var(--muted);
}

.bushu-flash-lv7 .bushu-btn-main{
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:.5rem 1.1rem;
  border:2px solid #c53d61;
  cursor:pointer;
}
.bushu-flash-lv7 .bushu-btn-sub{
  border-radius:999px;
  padding:.4rem .9rem;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
}

.bushu-flash-lv7 .bushu-nav{
  margin-top:.9rem;
  position:relative;
  height:46px;
}
.bushu-flash-lv7 #bushu-lv7-restart{
  position:absolute;
  left:0;
  top:0;
}
.bushu-flash-lv7 #bushu-lv7-next{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
}
@media(max-width:640px){
  .bushu-flash-lv7 .bushu-nav{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .bushu-flash-lv7 #bushu-lv7-restart,
  .bushu-flash-lv7 #bushu-lv7-next{
    position:static;
    transform:none;
    width:100%;
    text-align:center;
  }
}
.bushu-flash-lv7 .bushu-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.5rem;
}
</style>

<script>
(function(){

  // 共通の「もんだい」カード
  const commonProblemImg =
    "https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1b65958cc1425b2a8565a1331eb494c.jpg";

  // ★ LEVEL7 部首カード（ここだけ差し替えればOK）
  const cards = [
    {
      name:"① 鼻（自のもとになった形）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143212552.webp",
      explain:"「自」という字は、もともと人の“鼻”を横から見た形から生まれたと言われているよ。",
      extra:"今の字では「自分・みずから」という意味で使われることが多いよ。（自・息・臭 など）",
      q:"もともと「自」の字の形になったのは、顔のどの部分？",
      choices:["鼻","目","耳"],
      answer:0
    },
    {
      name:"② 谷（たに）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/a5486bc0333bfce4a60e7cd328dc98db.webp",
      explain:"「谷」は、山と山にはさまれたV字型の“たに”を表した字だよ。",
      extra:"へこんだ場所・間の空間を表すこともあるよ。（谷・欲 など）",
      q:"「谷」はどんな地形？",
      choices:["山と山のあいだのくぼみ","海のまんなか","高い塔のてっぺん"],
      answer:0
    },
    {
      name:"③ 里（さと）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/79ebd76bef2d42b579e418a0a42f6307.webp",
      explain:"「里」は、田んぼ（田）と土（地面）が組み合わさった“村・ふるさと”のイメージだよ。",
      extra:"人が集まってくらす土地を表す漢字でよく使われるよ。（里・野・理 など）",
      q:"「里（さと）」のイメージに一番近いのは？",
      choices:["人が住む村やふるさと","大きな海","高いビルの中"],
      answer:0
    },
    {
      name:"④ 戸（と）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/e81f224f387b8b2df7a578640b6479c0.webp",
      explain:"「戸」は、家の入口の片開きの“とびら”を表した字だよ。",
      extra:"出入り口・家の中と外を分けるイメージだね。（戸・扉 など）",
      q:"「戸」は何のこと？",
      choices:["家のとびら","川の流れ","やまの形"],
      answer:0
    },
    {
      name:"⑤ 母（はは）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/23e13a0ac9f3912750cb8fd383216c73.webp",
      explain:"「母」は、ひざをついて座っている女の人の姿からできた字だよ。",
      extra:"おかあさん・そだてる人のイメージを表すね。（母・毎 など）",
      q:"⑤のイラストはどんな人の姿？",
      choices:["ひざをついて座る女の人","走っている男の子","空を飛ぶ鳥"],
      answer:0
    },
    {
      name:"⑥ 歯（は）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6bedba8837e97a20cd99989c38dfb39b.webp",
      explain:"「歯」は、物をかみくだく“は”の形からできた字だよ。",
      extra:"かたいものをかむ・かみ合わせなどの意味につながるよ。（歯・齢 など）",
      q:"「歯」は何をするところ？",
      choices:["物をかみくだく","音を聞く","においをかぐ"],
      answer:0
    },
    {
      name:"⑦ 音（おと）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143212553.jpg",
      explain:"「音」は、ものをたたいたり鳴らしたときにひびく“おと”のイメージからできた字だよ。",
      extra:"音・音楽・読みかた（音読み）など、“おと”に関係する漢字に使われるよ。（音・音楽 など）",
      q:"「音」の字は、もともとどんなイメージ？",
      choices:["ひびくおと","ながれる水","ゆれる草"],
      answer:0
    },

    {
      name:"⑧ 黒（くろ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143204355.webp",
      explain:"上の四角は“すすのつまった煙出し”、下は“燃えあがる炎”の形とされているよ。",
      extra:"黒い色・焼けこげた色のイメージを表す字だね。（黒・墨 など）",
      q:"⑧のカードで表している色は？",
      choices:["くろ","あお","きいろ"],
      answer:0
    },
    {
      name:"⑨ 舌（した）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/ba980ccd6bd2f53941cad1f922b498fd.webp",
      explain:"「舌」は、ペロッと出した人の“した”を表した字だよ。",
      extra:"あじを感じる・話すなどの意味につながるよ。（舌・話・甜 など）",
      q:"「舌」は何をするときにつかう？",
      choices:["味わう・話す","見る","聞く"],
      answer:0
    },
    {
      name:"⑩ 瓜（うり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/e66282f7d5e78febc7a0cc865d1d542e.webp",
      explain:"「瓜」は、つるからぶら下がる“うりの実”の形からできた字だよ。",
      extra:"メロン・スイカ・かぼちゃのような実のイメージだね。（瓜・孤 など）",
      q:"⑩は何の実？",
      choices:["うりのなかまの実","どんぐり","魚のたまご"],
      answer:0
    },
    {
      name:"⑪ 甘（あまい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6e6954797f31f750eec29e01be6bc888.webp",
      explain:"「甘」は、“あまい味＝おいしい（うまし）”のイメージからできた字だよ。",
      extra:"甘い味・やさしい感じを表すときに使われるよ。（甘・甘口 など）",
      q:"⑪のカードの男の子は、どんな味だと感じている？",
      choices:["あまくておいしい","からくてつらい","すっぱくてびっくり"],
      answer:0
    },
    {
      name:"⑫ 玄（げん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143204356.webp",
      explain:"「玄」は、ねじった糸を横棒からつるして“黒く染めた糸”の姿からできたと言われているよ。",
      extra:"くらい色・ふしぎ・奥深いイメージの漢字に使われるよ。（玄・玄関 など）",
      q:"⑫のカードで、黒く染められているのは何？",
      choices:["糸の束","木の枝","石ころ"],
      answer:0
    },
    {
      name:"⑬ 瓦（かわら）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/31f12d1a38478201218d2bfe11a8b25f.webp",
      explain:"「瓦」は、屋根の上にならんだ“かわら”の形からできた字だよ。",
      extra:"やきもの・屋根材のイメージを表すよ。（瓦 など）",
      q:"⑬のカードの『かわら』は、どこにしく？",
      choices:["屋根の上","机の上","川の中"],
      answer:0
    },
    {
      name:"⑭ 用（もちいる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/189351171e044b1240c1e3d46a45257b.webp",
      explain:"「用」は、取っ手のついた桶（おけ）のような容器を表したとされる字だよ。",
      extra:"道具・用事・使うことなどを表す漢字に使われるよ。（用・利用 など）",
      q:"⑭のカードにえがかれている昔の道具は？",
      choices:["おけ","うちわ","くつ"],
      answer:0
    },
    {
      name:"⑮ 疋（ひき）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/2523854e4b1cc71a66b4a575f29331ab.webp",
      explain:"「疋」は、ひざから下の“足”の形からできたと言われる字だよ。",
      extra:"足のようすや、布を数えるときの単位としても使われるよ。",
      q:"⑮のカードが表している体の部分は？",
      choices:["足","手","耳"],
      answer:0
    },
    {
      name:"⑯ 癶（はつがしら）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143204357.webp",
      explain:"「癶（はつがしら）」は、出発するときに両足をそろえて立つ人の姿を表した形だよ。",
      extra:"「発」の字の上の部分になっていて、“はじまる・出発”などの意味につながるよ。",
      q:"⑯のカードの男の子は、どんな姿？",
      choices:["まっすぐ直立して出発まえ","寝ころんでいる","イスにすわっている"],
      answer:0
    },
    {
      name:"⑰ 比（くらべる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/98d8a98b8a0bc9e1e5851254a605906e.webp",
      explain:"「比」は、二人や二つのものをならべて“くらべる”イメージの字だよ。",
      extra:"大きさ・高さ・ちがいをくらべる漢字に使われるよ。（比・皆 など）",
      q:"⑰のカードで二人は何をしている？",
      choices:["せいくらべをしている","おどっている","寝ている"],
      answer:0
    },
    {
      name:"⑱ 臣（しん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/dbaa8a9c0415d00f65da6d09d4b275b9.webp",
      explain:"「臣」は、王さまの前でひざまずき“仕える人（家来）”の姿を表した字だよ。",
      extra:"家来・部下・つかえる人のイメージをもつ漢字で使われるよ。（臣・巨 など）",
      q:"⑱のカードの人は、だれの前でひざまずいている？",
      choices:["王さま","友だち","動物園のライオン"],
      answer:0
    },
    {
      name:"⑲ 艮（こん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/ff1642cb5805ccf6b0fac559b348fdb3.webp",
      explain:"「艮」は、“目＋小刀”から、目のまわりにきざしを残すイメージだと言われているよ。",
      extra:"やめる・とどまる・きざし といった意味につながる字だよ。",
      q:"⑲のカードのキーワードになっている組み合わせは？",
      choices:["目と小刀","口と山","水と火"],
      answer:0
    },
    {
      name:"⑳ 黄（き）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8db436bae22371ed82f91ffafdd590d0.webp",
      explain:"「黄」は、黄色く燃える火のような、明るい色のイメージを表す字だよ。",
      extra:"きいろ・あかるい色の漢字に使われるよ。（黄・黄土 など）",
      q:"⑳のカードの火矢は、どんな色のイメージ？",
      choices:["黄色くてあかるい","まっ黒","まっ青"],
      answer:0
    }
  ];

  // ▼ ここから下は共通の制御処理（さわらなくてOK）

  const elImg     = document.getElementById("bushu-lv7-img");
  const elName    = document.getElementById("bushu-lv7-name");
  const elEx      = document.getElementById("bushu-lv7-explain");
  const elExtra   = document.getElementById("bushu-lv7-extra");
  const elQ       = document.getElementById("bushu-lv7-q");
  const elChoices = document.getElementById("bushu-lv7-choices");
  const elFb      = document.getElementById("bushu-lv7-feedback");
  const elCounter = document.getElementById("bushu-lv7-counter");
  const btnNext   = document.getElementById("bushu-lv7-next");
  const btnShuffle= document.getElementById("bushu-lv7-shuffle");
  const btnRestart= document.getElementById("bushu-lv7-restart");

  let order = cards.map((_,i)=>i);
  let index = 0;
  let locked = false;

  function shuffle(array){
    for(let i=array.length-1;i>0;i--){
      const j = Math.floor(Math.random()*(i+1));
      [array[i],array[j]] = [array[j],array[i]];
    }
  }

  function render(){
    const c = cards[order[index]];
    locked = false;

    elCounter.textContent = (index+1)+" / "+cards.length;
    elImg.src = commonProblemImg;

    elName.textContent = c.name;
    elQ.textContent    = "❓ 3択クイズ： " + c.q;

    elEx.textContent    = "🔍 解説： " + c.explain;
    elExtra.textContent = "✨ もうひとこと： " + c.extra;
    elEx.style.display    = "none";
    elExtra.style.display = "none";

    elFb.textContent = "";
    elFb.classList.remove("ok","ng");
    elChoices.innerHTML = "";

    const idxs = [0,1,2];
    shuffle(idxs);
    const colors = ["#fff5f5","#f0f9ff","#fefce8"];
    shuffle(colors);

    idxs.forEach((choiceIndex, i)=>{
      const li  = document.createElement("li");
      const btn = document.createElement("button");

      btn.textContent = (i+1)+". "+c.choices[choiceIndex];
      btn.dataset.correct = (choiceIndex === c.answer) ? "true" : "false";
      btn.style.background = colors[i];
      btn.style.border = "1px solid #ddd";

      btn.addEventListener("click",()=>{
        if(locked) return;
        locked = true;

        const buttons = elChoices.querySelectorAll("button");
        buttons.forEach(b=>b.disabled = true);

        elImg.src = c.answerImg;
        elEx.style.display    = "block";
        elExtra.style.display = "block";

        if(btn.dataset.correct === "true"){
          btn.classList.add("bushu-correct");
          elFb.textContent = "⭕ せいかい！";
          elFb.classList.add("ok");
          elFb.classList.remove("ng");
        }else{
          btn.classList.add("bushu-wrong");
          buttons.forEach(b=>{
            if(b.dataset.correct === "true"){
              b.classList.add("bushu-correct");
            }
          });
          elFb.textContent = "❌ ざんねん… せいかいは「"+c.choices[c.answer]+"」だよ！";
          elFb.classList.add("ng");
          elFb.classList.remove("ok");
        }
      });

      li.appendChild(btn);
      elChoices.appendChild(li);
    });
  }

  btnNext.addEventListener("click",()=>{
    index++;
    if(index >= cards.length){
      index = 0;
      shuffle(order);
    }
    render();
  });

  btnShuffle.addEventListener("click",()=>{
    shuffle(order);
    index = 0;
    render();
  });

  btnRestart.addEventListener("click",()=>{
    order = cards.map((_,i)=>i);
    index = 0;
    render();
  });

  render();

})();
</script>

<!-- ▼ 部首の位置の説明はLEVEL共通で使い回しOK ▼ -->
<div class="bushu-center-wrap">
  <p class="bushu-center-text">
    ▼ 部首の位置（へん・つくり・かんむり など）の見方
  </p>
  <img decoding="async" 
    src="https://jouniorsankosodate.com/wp-content/uploads/2025/12/794D1E6D-74EF-4435-991A-C4C35E4774EF.jpg"
    alt="部首の位置の説明"
    class="bushu-center-img"
  >
</div>

<style>
.bushu-center-wrap{
  text-align:center;
  margin-top:2rem;
}
.bushu-center-text{
  font-size:1rem;
  font-weight:600;
  margin-bottom:1rem;
}
.bushu-center-img{
  max-width:90%;
  height:auto;
  margin:0 auto;
  display:block;
}
</style>



<!-- ✅ 部首フラッシュ：記事下ナビ（下に入れる版） -->
<div class="tacota-bushu-bottomnav" role="navigation" aria-label="部首フラッシュ ナビ">
  <style>
    .tacota-bushu-bottomnav{
      --pink:#f472b6;         /* タコタピンク */
      --pink2:#fde7f3;        /* うすピンク */
      --line:#f7cbe3;         /* 枠線 */
      --ink:#2f3a44;
      --muted:#6f7b88;
      background:linear-gradient(180deg,#fff 0%, var(--pink2) 100%);
      border:2px solid var(--line);
      border-radius:16px;
      padding:16px;
      margin:24px 0;
      box-shadow:0 6px 16px rgba(0,0,0,.06);
    }
    .tacota-bushu-bottomnav .ttl{
      font-weight:800;
      color:var(--ink);
      margin:0 0 10px;
      display:flex; gap:8px; align-items:center;
      font-size:1.05rem;
    }
    .tacota-bushu-bottomnav .ttl .badge{
      background:var(--pink);
      color:#fff;
      border-radius:999px;
      padding:3px 10px;
      font-size:.85rem;
      line-height:1.6;
    }
    .tacota-bushu-bottomnav .desc{
      margin:0 0 12px;
      color:var(--muted);
      font-size:.95rem;
    }
    .tacota-bushu-bottomnav .grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:8px;
    }
    @media (max-width: 640px){
      .tacota-bushu-bottomnav .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    }
    .tacota-bushu-bottomnav a.btn{
      display:flex;
      justify-content:center;
      align-items:center;
      text-decoration:none;
      padding:10px 8px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);
      font-weight:700;
      font-size:.95rem;
      transition:.15s ease;
    }
    .tacota-bushu-bottomnav a.btn:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 16px rgba(0,0,0,.08);
      border-color:var(--pink);
    }
    .tacota-bushu-bottomnav .hub{
      margin-top:10px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .tacota-bushu-bottomnav a.hubbtn{
      text-decoration:none;
      display:inline-flex;
      gap:8px;
      align-items:center;
      padding:10px 14px;
      border-radius:999px;
      background:var(--pink);
      color:#fff;
      font-weight:800;
      border:0;
    }
    .tacota-bushu-bottomnav a.hubbtn.sub{
      background:#fff;
      color:var(--ink);
      border:1px solid var(--line);
      font-weight:700;
    }
  </style>

  <p class="ttl"><span class="badge">タコタ</span> 部首フラッシュ｜つづきはどれにする？</p>
  <p class="desc">「まとめページ」に戻ると、初級〜上級をえらびやすいよ！</p>

  <div class="grid">
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-01/">LEVEL1</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-02/">LEVEL2</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-03/">LEVEL3</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-04/">LEVEL4</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-05/">LEVEL5</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-06/">LEVEL6</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-07/">LEVEL7</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-08/">LEVEL8</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-09/">LEVEL9</a>
    <a class="btn" href="https://jouniorsankosodate.com/tacota-bushu-flash-10/">LEVEL10</a>
  </div>

  <div class="hub">
    <!-- ここは固定ページURLに差し替えてね -->
    <a class="hubbtn" href="https://jouniorsankosodate.com/tacota-bushu-flash/">📚 LEVEL1〜10 まとめへ</a>
    <a class="hubbtn sub" href="#top">⬆ 上にもどる</a>
  </div>
</div>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-07/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL7</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-bushu-flash-07/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
