<?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%88%90%e3%82%8a%e7%ab%8b%e3%81%a1/feed/" rel="self" type="application/rss+xml" />
	<link>https://jouniorsankosodate.com/tag/＃成り立ち/</link>
	<description>受験のその先へ｜子どもたちのより良い未来を育てる</description>
	<lastBuildDate>Sun, 28 Dec 2025 11:34:08 +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>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL9</title>
		<link>https://jouniorsankosodate.com/tacota-bushu-flash-09/</link>
					<comments>https://jouniorsankosodate.com/tacota-bushu-flash-09/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 25 Dec 2025 13:58:37 +0000</pubDate>
				<category><![CDATA[🐙タコタの部首レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃成り立ち]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃部首]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2662</guid>

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

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

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

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

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

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

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

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

<style>
.bushu-flash-lv9{
  --card-bg:#eafff1;
  --accent:#22c55e;
  --border:#222;
  --text:#333;
  --muted:#666;

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

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

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

  // ★ LEVEL9（確定版）
  const cards = [
    {
      name:"① 八（はち／はちがしら）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/c8e7b0a26bb0d90f42979666239b1d05.webp",
      explain:"「八」は、左右に“ひらいて分かれる”形がもと。物が分かれる・広がるイメージにつながるよ。",
      extra:"ポイント：八が入ると「分ける／広がる」感じを思い出そう。（例：分・公 など）",
      q:"①の部首イメージに一番近いのは？",
      choices:["二つに分かれる（分岐）","上からおおうフタ","氷ができる"],
      answer:0
    },
    {
      name:"② 冂（けいがまえ／どうがまえ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/68b60d70c974e5add0c33b2f93353c78.webp",
      explain:"「冂」は、外側を囲う“境界（きょうかい）のわく”の形がもと。遠く離れたところの“行き止まり・境目”のイメージにもなるよ。",
      extra:"ポイント：「外側のかこい（わく）」を意識！国境・城壁みたいに“ここまで”の線。",
      q:"②の部首イメージに近いのは？",
      choices:["城壁のある国境（境目）","小さなスプーン","足あとが続く"],
      answer:0
    },
    {
      name:"③ 冖（わかんむり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/257f7f06f06af19a22acb4597b830117.webp",
      explain:"「冖」は、上から“ふたをしておおう”形がもと。かぶせる・おおいかくすイメージだよ。",
      extra:"ポイント：箱のフタ！上にのってる形を見たら「おおう」を思い出そう。（例：写・軍 など）",
      q:"③の部首イメージに近いのは？",
      choices:["箱にフタをかぶせる","二つに分かれる","小さな点"],
      answer:0
    },
    {
      name:"④ 冫（にすい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1ad78e87952c0eeff3192f5bca5ef3e.webp",
      explain:"「冫」は“こおり（氷）”を表す形がもと。冷たい・凍るイメージにつながるよ。",
      extra:"ポイント：にすい＝氷！「冷」「凍」みたいに冷たさの漢字でよく出るよ。",
      q:"④の部首イメージに近いのは？",
      choices:["水が凍ってひび割れる","上からおおうフタ","侍の土台"],
      answer:0
    },
    {
      name:"⑤ 几（つくえ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d3270ebb2619451fbe40f558e9863297.webp",
      explain:"「几」は、脚（あし）のついた“小さな机・台”の形がもと。ちょこんと置く台のイメージだよ。",
      extra:"ポイント：ミニテーブル！机の形を思い出すと覚えやすい。",
      q:"⑤の部首イメージに近いのは？",
      choices:["小さい机・台","国境の城壁","氷"],
      answer:0
    },
    {
      name:"⑥ 凵（うけばこ／かんにょう）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/0b79dba0a8dd03b4c67233e494c71ce5.webp",
      explain:"「凵」は、へこんだ“うけざら・入れもの”の形がもと。くぼみ・受けるイメージだよ。",
      extra:"ポイント：下がくぼんだ形＝受け皿！ボールが「すっぽり」入る感じ。",
      q:"⑥の部首イメージに近いのは？",
      choices:["くぼみ・入れもの","十字の形","小さな点"],
      answer:0
    },
    {
      name:"⑦ 勹（つつみがまえ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089121.webp",
      explain:"「勹」は、体を丸めて“包む・くるむ”形がもと。包みこむイメージにつながるよ。",
      extra:"ポイント：だっこして包む！外側から守る感じを思い出そう。",
      q:"⑦の部首イメージに近いのは？",
      choices:["包む・くるむ","水が凍る","足あとが続く"],
      answer:0
    },
    {
      name:"⑧ 匕（さじ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/58ad2971411e8922bbbff15208c02948.webp",
      explain:"「匕」は、小さな“さじ（スプーン）”の形がもとと言われるよ。すくう道具のイメージ。",
      extra:"ポイント：カレー用じゃなくて「薬さじ」みたいな小ささ！",
      q:"⑧の部首は何の形？",
      choices:["スプーン（さじ）","フタ","机"],
      answer:0
    },
    {
      name:"⑨ 十（じゅう）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/1524eca3a800f5f7916f6e79a49b5dd2.webp",
      explain:"「十」は、たて線とよこ線が交わる“十字”の形がもと。数の「10」や十字のイメージだよ。",
      extra:"ポイント：算木（さんぎ）を交差させた形…と覚えるとスッと入る！",
      q:"⑨の部首イメージに近いのは？",
      choices:["十字（交差）","包む","小さな点"],
      answer:0
    },
    {
      name:"⑩ 卩（ふしづくり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/dc8cd617c00704d1d73ddc143adccc99.webp",
      explain:"「卩」は、ひざを折って“ひざまずく人”の形がもと。礼をする姿や、節目（ふし）のイメージにつながるよ。",
      extra:"ポイント：ちょこんとひざまずく形＝礼！「印」「即」などにも出てくるよ。",
      q:"⑩の部首イメージに近いのは？",
      choices:["ひざまずいて礼をする","バケツの水が凍る","国境の城壁"],
      answer:0
    },
    {
      name:"⑪ 厶（む）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/cdcd2956e8d40864fdddf811ba160291.webp",
      explain:"「厶」は、はっきりした意味を持たず“分類”に使われることが多い部首。解釈として「私（わたし）」「私有する」につながる場合もあるよ。",
      extra:"ポイント：手の中に“こっそり隠す”＝私のもの、って覚えるとイメージしやすい！",
      q:"⑪の部首イメージに近いのは？",
      choices:["こっそり持つ（私のもの）","十字の形","夕焼けの空"],
      answer:0
    },
    {
      name:"⑫ 又（また）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/7755f5ae25b920b0e3de4e188ee90f62.webp",
      explain:"「又」は“手の形”がもと。手の動き・もう一度・くり返しのイメージにつながるよ。",
      extra:"ポイント：ちょいちょい＝「もう一回！」の合図。手の動き系の字で見かけるよ。",
      q:"⑫の部首イメージに近いのは？",
      choices:["手で『おいで』する","上からおおうフタ","小さい机"],
      answer:0
    },
    {
      name:"⑬ 士（さむらい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/dae51078ee095661bb00f7741e78b50f.webp",
      explain:"「士」は、しっかりした“土台（だいざ）”の上に立つ人の形がもとと言われるよ。身分の高い人＝侍（さむらい）にもつながる。",
      extra:"ポイント：下がどっしり＝えらい人！「土」と似てるけど、横線の位置に注目すると見分けやすい。",
      q:"⑬の部首イメージに近いのは？",
      choices:["身分の高い人＋土台","氷","小さな点"],
      answer:0
    },
    {
      name:"⑭ 夂（ふゆがしら）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089122.webp",
      explain:"「夂」は、ゆっくり“あとからついて行く足どり”の形がもと。遅れて来る・後ろからのイメージだよ。",
      extra:"ポイント：足あとが後ろに続く＝あとから！「冬」と関係ある読み名だけど、イメージは“足どり”。",
      q:"⑭の部首イメージに近いのは？",
      choices:["あとからついていく足どり","包む・くるむ","十字（交差）"],
      answer:0
    },
    {
      name:"⑮ 夕（ゆうべ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/0a8508df5f5b461833140def9042ace1.webp",
      explain:"「夕」は、日がしずんで暗くなる“夕方”の姿がもと。夜のはじまりのイメージだよ。",
      extra:"ポイント：夕焼け＋三日月＝ゆうべ！時間の感じを覚えると強い。",
      q:"⑮の部首イメージに近いのは？",
      choices:["夕方・夜のはじまり","朝のひかり","真昼の太陽"],
      answer:0
    },
    {
      name:"⑯ 小（ちいさい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089136.jpg",
      explain:"「小」は、大きいものに対して“ちいさい”ことを表す形がもと。少ない・こまかいイメージにもつながるよ。",
      extra:"ポイント：こどもが小さくしゃがむ＝小さい！「少」との違いも見てみよう。",
      q:"⑯の部首イメージに近いのは？",
      choices:["小さい・少ない","大きい・多い","冷たい・凍る"],
      answer:0
    },
    {
      name:"⑰ 己（おのれ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089124.webp",
      explain:"「己」は、くるっと“まがった形”がもとで「自分（おのれ）」を表す字。形が巻いている感じがポイントだよ。",
      extra:"ポイント：糸巻きみたいに“自分の中に巻きこむ”イメージで覚えると忘れにくい！",
      q:"⑰の部首イメージに近いのは？",
      choices:["自分（おのれ）／まがった形","十字（交差）","フタ"],
      answer:0
    },
    {
      name:"⑱ 干（かん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089125.webp",
      explain:"「干」は、棒を立てた形がもとで「干す（乾かす）」「かわく」につながるよ。武器のように“棒”のイメージでも覚えられる。",
      extra:"ポイント：干＝棒＋横棒！「乾」とセットで“かわく”を思い出そう。",
      q:"⑱の部首イメージに近いのは？",
      choices:["棒（干す・かわく）","夕方","包む"],
      answer:0
    },
    {
      name:"⑲ 丿（の）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/2426c5fc5320e7bea7e7508f581d944a.jpg",
      explain:"「丿」は、漢字の“ななめの一画”を表す部首。『乃』の一画目とも言われるよ。",
      extra:"ポイント：左上から右下へ「すーっ」と書く一画！見つけたら“の”って呼ぶよ。",
      q:"⑲の部首はどんな形？",
      choices:["ななめの一画","小さな点","十字"],
      answer:0
    },
    {
      name:"⑳ 丶（てん／いってん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8db436bae22371ed82f91ffafdd590d0-1.webp",
      explain:"「丶」は“ちいさな点（しるし）”を表す部首。中心・一点のイメージにもつながるよ。",
      extra:"ポイント：ろうそくの炎みたいに「ここ！」を示す小さな点。見つけたら“てん”！",
      q:"⑳の部首イメージに近いのは？",
      choices:["ちいさな点（しるし）","小さい机","国境の城壁"],
      answer:0
    }
  ];

  // ▼ ここから下は共通制御（さわらなくてOK）
  const elImg     = document.getElementById("bushu-lv9-img");
  const elName    = document.getElementById("bushu-lv9-name");
  const elEx      = document.getElementById("bushu-lv9-explain");
  const elExtra   = document.getElementById("bushu-lv9-extra");
  const elQ       = document.getElementById("bushu-lv9-q");
  const elChoices = document.getElementById("bushu-lv9-choices");
  const elFb      = document.getElementById("bushu-lv9-feedback");
  const elCounter = document.getElementById("bushu-lv9-counter");
  const btnNext   = document.getElementById("bushu-lv9-next");
  const btnShuffle= document.getElementById("bushu-lv9-shuffle");
  const btnRestart= document.getElementById("bushu-lv9-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.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"
    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>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-09/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL9</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-bushu-flash-09/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL8</title>
		<link>https://jouniorsankosodate.com/tacota-bushu-flash-08/</link>
					<comments>https://jouniorsankosodate.com/tacota-bushu-flash-08/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Thu, 25 Dec 2025 12:32:22 +0000</pubDate>
				<category><![CDATA[🐙タコタの部首レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃成り立ち]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃部首]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2633</guid>

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

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

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

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

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

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

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

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

<style>
.bushu-flash-lv8{
  --card-bg:#eef6ff;      /* LEVEL8：淡い寒色 */
  --accent:#4f86ff;
  --border:#222;
  --text:#333;
  --muted:#666;

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

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

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

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

<script>
(function(){

  // ✅ LEVEL8 共通の「もんだい」カード画像
  // ※ここは「もんだい用の共通画像URL」に差し替えてOK
  const commonProblemImg =
    "https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1b65958cc1425b2a8565a1331eb494c.jpg";

  // ✅ LEVEL8（1〜20）答え画像＆解説
  const cards = [
    {
      name:"① 殳（るまた）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b1855cd7925ce11a5cdff4261eed9055.webp",
      explain:"「殳」は、手に持つ“武器（ほこ・こん棒）”の形からできた部首。たたく・打つ・動きを加えるイメージにつながるよ。",
      extra:"例：投・殴 など（※「たたく／動き」のイメージ）",
      q:"この部首のイメージに近いのは？",
      choices:["武器でたたく","水がながれる","草がのびる"],
      answer:0
    },
    {
      name:"② 頁（おおがい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__143286274.webp",
      explain:"「頁」は“頭や顔”を表す部首。頭部を強調した姿がもとになっているよ。",
      extra:"例：顔・題・額 など（※あたま／かお）",
      q:"この部首が表すのは？",
      choices:["あたま・かお","手","足"],
      answer:0
    },
    {
      name:"③ 行（ぎょうがまえ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8A958222-3F84-4A86-B991-3572D39FB2D4.webp",
      explain:"「行」は“道が交わる形（十字路）”がもと。行く・道・ならぶイメージにつながるよ。",
      extra:"例：街・術・衛 など（※道／行く）",
      q:"「行」のもとのイメージは？",
      choices:["十字路","魚","大きな木"],
      answer:0
    },
    {
      name:"④ 犭（けものへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/125bf04f95ebc31ce3fd8375c935edb6.webp",
      explain:"「犭」は“けもの（犬・動物）”の形がもと。動物に関係する漢字に多いよ。",
      extra:"例：猫・狼・猿 など（※けもの）",
      q:"この部首の仲間はどれ？",
      choices:["動物","金属","雨"],
      answer:0
    },
    {
      name:"⑤ 彡（さんづくり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8827a7d82c81b4bad43aa014e544792f.webp",
      explain:"「彡」は“毛・飾り・模様”のような、細い線が並ぶ形がもと。髪の毛やキラキラの表現にもつながるよ。",
      extra:"例：形・彩・彫 など（※毛／もよう）",
      q:"この部首のイメージに近いのは？",
      choices:["毛・もよう","石","火"],
      answer:0
    },
    {
      name:"⑥ 厂（がんだれ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089127.webp",
      explain:"「厂」は“がけ（崖）”の形がもと。がけの下・岩の陰などのイメージにつながるよ。",
      extra:"例：原・厄・厘 など（※がけ）",
      q:"この部首が表す地形は？",
      choices:["がけ","海","田んぼ"],
      answer:0
    },
    {
      name:"⑦ 匚（はこがまえ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/f0a31c662cb9179d7b96a4e20cfd4ef8.webp",
      explain:"「匚」は“箱のように囲う”形がもと。中をかくす・囲い込むイメージにつながるよ。",
      extra:"例：区・匿 など（※かこむ／かくす）",
      q:"この部首のイメージは？",
      choices:["かこむ","流れる","燃える"],
      answer:0
    },
    {
      name:"⑧ 角（つのへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/23ae0e14ca0bba83167da6792bf68180.webp",
      explain:"「角」は“動物のつの”の形がもと。つの・かど・すみのイメージにつながるよ。",
      extra:"例：解・触 など（※つの）",
      q:"この部首は何の形？",
      choices:["つの","はね","うろこ"],
      answer:0
    },
    {
      name:"⑨ 骨（ほね）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b187c2d0c78faa078d7f19ca588e5bb5.webp",
      explain:"「骨」は“骨・からだの中のかたい部分”の形がもと。骨格や体の内側のイメージだよ。",
      extra:"例：骸・骸骨 など（※ほね）",
      q:"この部首が表すのは？",
      choices:["ほね","花","雲"],
      answer:0
    },
    {
      name:"⑩ 革（かわ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/7acbd4f7e8e420b1915df00a0c035beb.webp",
      explain:"「革」は“なめした皮（かわ）”の形がもと。革製品など、加工した皮のイメージにつながるよ。",
      extra:"例：靴・鞄・鞍 など（※革製品）",
      q:"この部首は何に関係する？",
      choices:["なめした皮","水","木"],
      answer:0
    },
    {
      name:"⑪ 鼓（つづみ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/e4e467a7389a47f6ade6e7cc39bea85c.webp",
      explain:"「鼓」は“太鼓・つづみ”など音を出す道具のイメージ。たたいて鳴らすことにつながるよ。",
      extra:"例：鼓動（どきどき）など（※音／鳴らす）",
      q:"この部首はどんな道具？",
      choices:["太鼓・つづみ","はさみ","おさら"],
      answer:0
    },
    {
      name:"⑫ 鼠（ねずみ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__144089128.webp",
      explain:"「鼠」は“ねずみ”の形がもと。小さな動物に関係する漢字に出てくるよ。",
      extra:"例：鼬（いたち）など（※小動物）",
      q:"この部首はどの動物？",
      choices:["ねずみ","うさぎ","ねこ"],
      answer:0
    },
    {
      name:"⑬ 鹿（しか）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b8746a969e5b2ac93c40ab07b246a2db.webp",
      explain:"「鹿」は“しか”の姿がもと。森の動物のイメージにつながるよ。",
      extra:"例：麓（ふもと）などに関係する字もあるよ",
      q:"この部首はどの動物？",
      choices:["しか","とり","さかな"],
      answer:0
    },
    {
      name:"⑭ 豕（いのこ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6e0d60cc57b62eb44c6250a316dd6fc1.webp",
      explain:"「豕」は“ぶた／いのしし”の形がもと。豚や獣に関係するイメージだよ。",
      extra:"例：家（いえ）の中に豕がいる形、と言われることもあるよ",
      q:"この部首は何の動物？",
      choices:["ぶた・いのしし","うま","さる"],
      answer:0
    },
    {
      name:"⑮ 巛（さんぼんがわ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/988f348e137320dc9767bff29a78ab7f.webp",
      explain:"「巛」は“川の流れが集まる”ような形がもと。くねくねした流れのイメージだよ。",
      extra:"例：順 など（※流れ）",
      q:"この部首のイメージは？",
      choices:["川の流れ","火の粉","山の岩"],
      answer:0
    },
    {
      name:"⑯ 臼（うす）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/35e03b954a83e52d9f815f97435fc256.jpg",
      explain:"「臼」は“うす（ひく道具）”の形がもと。米や豆をひく道具のイメージだよ。",
      extra:"例：舂（つく）など（※うす）",
      q:"この部首はどんな道具？",
      choices:["うす","くし","かさ"],
      answer:0
    },
    {
      name:"⑰ 鬼（おに）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/778f0ee10a5f312c0f83f2761199c4b4.webp",
      explain:"「鬼」は“おに”の姿がもと。こわいもの・れいのイメージにつながるよ。",
      extra:"例：魂・魔 など（※こわい／れい）",
      q:"この部首はどんな存在？",
      choices:["おに","魚","花"],
      answer:0
    },
    {
      name:"⑱ 髟（かみがしら）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/c42c0c9d2ab4f223ccd62afe77af8454.webp",
      explain:"「髟」は“髪の毛”の形がもと。長い髪・髪型のイメージにつながるよ。",
      extra:"例：髪・鬘（かつら）など（※髪）",
      q:"この部首は何を表す？",
      choices:["かみの毛","つの","つめ"],
      answer:0
    },
    {
      name:"⑲ 亠（なべぶた）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/64e89aef10740881ace99ec281f09ce8.webp",
      explain:"「亠」は“ふた（上をおおうもの）”の形がもと。なべぶたのように上をおおうイメージだよ。",
      extra:"例：交・亥 など（※上からおおう）",
      q:"この部首は何のイメージ？",
      choices:["ふた","木の枝","水たまり"],
      answer:0
    },
    {
      name:"⑳ 辛（からい）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/4ac449d2c27b466ec61481b6e8bdfa95.webp",
      explain:"「辛」は“とがった針（刑具のようなもの）”の形がもとと言われるよ。からい・つらいイメージにつながるんだ。",
      extra:"例：辛い・辛抱（しんぼう）など（※つらい）",
      q:"この部首のイメージに近いのは？",
      choices:["からい・つらい","あまい","やさしい"],
      answer:0
    }
  ];

  const elImg     = document.getElementById("bushu-lv8-img");
  const elName    = document.getElementById("bushu-lv8-name");
  const elEx      = document.getElementById("bushu-lv8-explain");
  const elExtra   = document.getElementById("bushu-lv8-extra");
  const elQ       = document.getElementById("bushu-lv8-q");
  const elChoices = document.getElementById("bushu-lv8-choices");
  const elFb      = document.getElementById("bushu-lv8-feedback");
  const elCounter = document.getElementById("bushu-lv8-counter");
  const btnNext   = document.getElementById("bushu-lv8-next");
  const btnShuffle= document.getElementById("bushu-lv8-shuffle");
  const btnRestart= document.getElementById("bushu-lv8-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.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"
    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>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-08/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL8</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-bushu-flash-08/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL6</title>
		<link>https://jouniorsankosodate.com/tacota-bushu-flash-06/</link>
					<comments>https://jouniorsankosodate.com/tacota-bushu-flash-06/#respond</comments>
		
		<dc:creator><![CDATA[じゅにさん]]></dc:creator>
		<pubDate>Sun, 14 Dec 2025 01:07:06 +0000</pubDate>
				<category><![CDATA[🐙タコタの部首レッスン]]></category>
		<category><![CDATA[＃フラッシュ]]></category>
		<category><![CDATA[＃成り立ち]]></category>
		<category><![CDATA[＃無料アプリ]]></category>
		<category><![CDATA[＃部首]]></category>
		<guid isPermaLink="false">https://jouniorsankosodate.com/?p=2572</guid>

					<description><![CDATA[<p>目次 タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL6 タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL6 まずはタコタの「もんだい」カードを見て、３択クイズにち [&#8230;]</p>
<p>投稿 <a href="https://jouniorsankosodate.com/tacota-bushu-flash-06/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL6</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></description>
										<content:encoded><![CDATA[
<!-- 🐙 タコタとおぼえる部首フラッシュ LEVEL6（読み方・意味） -->
<div class="bushu-flash-lv6" id="bushu-flash-lv6">
  
  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">
    タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習 LEVEL6
  </a><ol><li><a href="#toc2" tabindex="0"></a></li></ol></li></ol>
    </div>
  </div>

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

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

  <div class="bushu-card">
    <!-- 左：イラスト（共通の「もんだい」→ 正解イラスト） -->
    <div class="bushu-img-wrap">
      <img decoding="async" id="bushu-lv6-img" src="" alt="部首カード" loading="lazy">
    </div>

    <!-- 右：名前・クイズ・正解/解説（スマホでは縦1カラム） -->
    <div class="bushu-text">
      <h3 id="bushu-lv6-name"><span id="toc2"></span></h3>

      <!-- クイズ（先に表示） -->
      <div class="bushu-quiz">
        <p id="bushu-lv6-q" class="bushu-q"></p>
        <ul class="bushu-choices" id="bushu-lv6-choices"></ul>
        <p id="bushu-lv6-feedback" class="bushu-feedback"></p>
      </div>

      <!-- 解説（正解を押したあとに下に出てくる） -->
      <p id="bushu-lv6-explain" class="bushu-explain" style="display:none;"></p>
      <p id="bushu-lv6-extra" class="bushu-extra" style="display:none;"></p>
    </div>
  </div>

  <div class="bushu-nav">
    <button type="button" class="bushu-btn-sub" id="bushu-lv6-restart">
      ↩ はじめから
    </button>

    <button type="button" class="bushu-btn-main" id="bushu-lv6-next">
      ▶ つぎのもんだいへ
    </button>
  </div>

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

<style>
/* ========== LEVEL6 全体 ========== */
.bushu-flash-lv6{
  --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-lv6 .bushu-title{
  text-align:center;
  margin:0;
  font-size:1.25rem;
  font-weight:700;
}
.bushu-flash-lv6 .bushu-sub{
  text-align:center;
  font-size:.9rem;
  color:var(--muted);
  margin-top:.3rem;
}
.bushu-flash-lv6 .bushu-status{
  display:flex;
  justify-content:space-between;
  margin:.6rem 0;
  font-size:.9rem;
}
.bushu-flash-lv6 .bushu-counter{
  padding:.15rem .6rem;
  border-radius:999px;
  border:1px solid var(--border);
}
.bushu-flash-lv6 .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-lv6 .bushu-card{
    flex-direction:column;
    align-items:center;
    padding:.8rem;
  }
}
.bushu-flash-lv6 .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-lv6 .bushu-img-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.bushu-flash-lv6 .bushu-text h3{
  margin:.1rem 0 .4rem;
  font-size:1rem;
  font-weight:700;
}
.bushu-flash-lv6 .bushu-quiz{
  margin-top:.1rem;
  border:1px solid #e5dcc8;
  background:#fff;
  border-radius:10px;
  padding:.6rem;
}
.bushu-flash-lv6 .bushu-q{
  font-weight:600;
  margin:0 0 .4rem;
  font-size:.95rem;
}
.bushu-flash-lv6 .bushu-choices{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.bushu-flash-lv6 .bushu-choices button{
  width:100%;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid #ddd;
  background:#fffdf8;
  cursor:pointer;
  font-size:.95rem;
}
.bushu-flash-lv6 .bushu-choices button:hover{
  opacity:.9;
}
.bushu-flash-lv6 .bushu-choices button.bushu-correct{
  background:#ecfdf3 !important;
  border-color:#22c55e !important;
}
.bushu-flash-lv6 .bushu-choices button.bushu-wrong{
  background:#fee2e2 !important;
  border-color:#ef4444 !important;
}
.bushu-flash-lv6 .bushu-feedback{
  margin-top:.4rem;
  font-size:.9rem;
  font-weight:700;
}
.bushu-flash-lv6 .bushu-feedback.ok{color:#15803d;}
.bushu-flash-lv6 .bushu-feedback.ng{color:#b91c1c;}

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

/* ボタンまわり */
.bushu-flash-lv6 .bushu-btn-main{
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:.5rem 1.1rem;
  border:2px solid #c53d61;
  cursor:pointer;
}
.bushu-flash-lv6 .bushu-btn-sub{
  border-radius:999px;
  padding:.4rem .9rem;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  font-size:.9rem;
}

/* ナビゲーション位置：PCは左右・スマホは縦並び */
.bushu-flash-lv6 .bushu-nav{
  margin-top:.9rem;
  position:relative;
  height:46px;
}
.bushu-flash-lv6 #bushu-lv6-restart{
  position:absolute;
  left:0;
  top:0;
}
.bushu-flash-lv6 #bushu-lv6-next{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
}
@media(max-width:640px){
  .bushu-flash-lv6 .bushu-nav{
    height:auto;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }
  .bushu-flash-lv6 #bushu-lv6-restart,
  .bushu-flash-lv6 #bushu-lv6-next{
    position:static;
    transform:none;
    width:100%;
    text-align:center;
  }
}
.bushu-flash-lv6 .bushu-note{
  font-size:.8rem;
  color:var(--muted);
  margin-top:.5rem;
}
</style>

<script>
(function(){

  /* =========================================
     ★ LEVEL6 部首データ（ここだけ差し替えればOK）
     ========================================= */

  // 共通の「もんだい」イラスト（必要なら差し替え）
  const commonProblemImg =
    "https://jouniorsankosodate.com/wp-content/uploads/2025/12/f1b65958cc1425b2a8565a1331eb494c.jpg";

  // LEVEL6：言・足・走・食 … 川 まで 20枚
  const cards = [
    {
      name:"① 言（ごんべん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6ec69fc2abcf4d92a14b6bfedb1030cc.webp",
      explain:"「言（ごんべん）」は、ことば・話すこと・言ったことに関係する部首だよ。",
      extra:"話す・伝える・約束するイメージの漢字でよく見かけるよ。（言・話・語 など）",
      q:"「言（ごんべん）」は、どんなことに関係する部首かな？",
      choices:["ことば・話すこと","山や川","食べ物"],
      answer:0
    },
    {
      name:"② 足（あしへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b62ae2c28967532a33123ab3a738c65f.webp",
      explain:"「足へん」は、足やあしもと、歩いたり動いたりすることに関係する部首だよ。",
      extra:"歩く・走る・道などの漢字によく出てくるよ。（足・路・跳 など）",
      q:"「足へん」は、おもに何を表す部首？",
      choices:["あし・歩くこと","火や熱","植物"],
      answer:0
    },
    {
      name:"③ 走（そうにょう）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/S__142917670.webp",
      explain:"「そうにょう」は、地面をけって走る人のようすからできた部首だよ。",
      extra:"走る・急ぐ・はやく動くイメージの漢字で見かけるよ。（走・起・超 など）",
      q:"「そうにょう」があらわしている動きはどれかな？",
      choices:["はしる・急ぐ","ねる","すわる"],
      answer:0
    },
    {
      name:"④ 食（しょくへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/fb9b09ff2c3348d70c576b74c06d4645.webp",
      explain:"「食べる・飲む」ことや、食べ物そのものを表す部首だよ。",
      extra:"食事・飲み物・口に入れるものの漢字でよく見かけるよ。（食・飲・飯 など）",
      q:"「食（しょくへん）」は、どんなことに関係する部首？",
      choices:["食べる・飲むこと","空を飛ぶこと","本を読むこと"],
      answer:0
    },
    {
      name:"⑤ 耳（みみへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/ca327237c4a5d4301742762fa15f584f.webp",
      explain:"「耳へん」は、耳や聞くことに関係する部首だよ。",
      extra:"聞く・ききとる・知らせを受ける意味の漢字でよく見かけるよ。（耳・聞・職 など）",
      q:"「耳へん」が一番関係しているのはどれ？",
      choices:["音を聞くこと","火をつけること","物をはこぶこと"],
      answer:0
    },
    {
      name:"⑥ 工（たくみへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/955eb7fe960302a2d8aee68e102860f1.webp",
      explain:"「工」は、差し金などの工具の形からできた字で、工作や工事をイメージする部首だよ。",
      extra:"作る・工夫する・建てることに関係する漢字で見かけるよ。（工・左・差 など）",
      q:"「工」の部首は、どんなことに関係が深いかな？",
      choices:["作業や工作","天気","食事"],
      answer:0
    },
    {
      name:"⑦ 舟（ふねへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/7d1c490fadd67f8956e366925b869e23.webp",
      explain:"「舟へん」は、丸木舟などのふねの形からできた部首だよ。",
      extra:"船・水の上を進むことに関係する漢字で見かけるよ。（舟・船・般 など）",
      q:"「舟へん」は、どんな乗り物のイメージかな？",
      choices:["水にうかぶ船","空を飛ぶひこうき","地面を走る車"],
      answer:0
    },
    {
      name:"⑧ 青（あお）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/250a4c279f14fb9c5cf934b8106fa548.webp",
      explain:"「青」は、草からとった染料でそめた“あおい色”を表す字だよ。",
      extra:"あおい色・さわやかさ・若さのイメージをもつことばに使われるよ。（青・青春 など）",
      q:"「青」の部首があらわすのは、どんな色？",
      choices:["あおい色","くろい色","きいろい色"],
      answer:0
    },
    {
      name:"⑨ 赤（あか）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/34ce8d9e324cdd797e37f19d4c43a022.webp",
      explain:"「赤」は、火と人を組み合わせた形からできた、あつい“赤い色”を表す字だよ。",
      extra:"赤い色や、熱い・あつまる といったイメージのことばで使われるよ。（赤 など）",
      q:"「赤」の部首があらわすのは、どんな色？",
      choices:["赤い色","みどり色","白い色"],
      answer:0
    },
    {
      name:"⑩ 欠（あくび）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/8f3abd116e79253a4d7cd3ab9ffaa08b.webp",
      explain:"「欠」は、口を大きくあけてあくびする人の姿からできた字だよ。",
      extra:"あくび・足りない・欠けるイメージの漢字でよく見かけるよ。（欠・次・歌 など）",
      q:"「欠（あくび）」の部首は、もともとどんな様子？",
      choices:["あくびをする人","ジャンプする人","すわって本を読む人"],
      answer:0
    },
    {
      name:"⑪ 止（とめる）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/9077ed41c07e554ae1e0cbf0f9c2d08c.webp",
      explain:"「止」は、足あとがピタッと止まった様子からできた字だよ。",
      extra:"止まる・止める・やめることに関係する漢字で見かけるよ。（止・歩 など）",
      q:"「止」の部首は、どんな動きを表す？",
      choices:["動きを止める","もっと速く走る","空を飛ぶ"],
      answer:0
    },
    {
      name:"⑫ 皮（かわ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/7fbee3cd6b353cbfbc69c236346cf7c4.webp",
      explain:"「皮」は、動物の皮や人の皮ふ・外側の“かわ”を表す部首だよ。",
      extra:"外側のかわ・表面を表すことばで使われるよ。（皮 など）",
      q:"「皮」の部首は、どんな部分を表しているかな？",
      choices:["外側のかわ・ひふ","骨","金属"],
      answer:0
    },
    {
      name:"⑬ 首（くび）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b193f5eabcf2644d17cdf78a45b263bf.jpg",
      explain:"「首」は、人の首から上の部分を表す字だよ。",
      extra:"くび・頭・一番上やリーダーを表すことばで使われるよ。（首 など）",
      q:"「首」の部首がもともと表しているのは？",
      choices:["人の首から上","足の先","手のひら"],
      answer:0
    },
    {
      name:"⑭ 立（たつ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/d44e02741bd4124ec8b5efb40f4e6d4f.webp",
      explain:"「立」は、まっすぐ立っている人の姿からできた字だよ。",
      extra:"立つ・立派・たちあがるイメージの漢字で見かけるよ。（立 など）",
      q:"「立」の部首は、どんな姿を表している？",
      choices:["まっすぐ立つ人","イスにすわる人","寝ている人"],
      answer:0
    },
    {
      name:"⑮ 文（ぶん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/0109a3c53fd22c1d5162ef6bcd8b1686.webp",
      explain:"「文」は、体や服につけた文様・もようからできた字だよ。",
      extra:"もよう・文字・文章などに関係することばで使われるよ。（文 など）",
      q:"「文」の部首は、もともと何のイメージからきている？",
      choices:["文様・もよう","山の形","川の流れ"],
      answer:0
    },
    {
      name:"⑯ 魚（うおへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/6116df3dd437b0668bece8067b5bbc2f.webp",
      explain:"「魚へん」は、魚の形からできた部首で、水の中の生き物を表すよ。",
      extra:"魚や海の生き物を表す漢字でよく見かけるよ。（魚・鮮・鯨 など）",
      q:"「魚へん」は、どんな生き物に関係する部首？",
      choices:["魚や海の生き物","虫","鳥"],
      answer:0
    },
    {
      name:"⑰ 鳥（とり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/69ac5bf354311ecf3234e5ea0dd9ca60.webp",
      explain:"「鳥」は、くちばし・羽・しっぽのある鳥の姿からできた字だよ。",
      extra:"鳥や空を飛ぶこと・鳴き声に関係する漢字で見かけるよ。（鳥・鳴 など）",
      q:"「鳥」の部首は、どんな生き物を表している？",
      choices:["鳥","魚","犬"],
      answer:0
    },
    {
      name:"⑱ 馬（うまへん）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/f113952b7ed1f3686898acb346c4012c.webp",
      explain:"「馬へん」は、たてがみとしっぽのある馬の姿からできた部首だよ。",
      extra:"馬・乗り物・力強く走るイメージの漢字で見かけるよ。（馬・駅・騒 など）",
      q:"「馬へん」は、どんな動物の形？",
      choices:["馬","ねこ","うし"],
      answer:0
    },
    {
      name:"⑲ 隹（ふるとり）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/b003c57717339a6ec477733b0d53cd61.webp",
      explain:"「隹（ふるとり）」は、しっぽの短い小さな鳥の姿からできた部首だよ。",
      extra:"小鳥・集まる・見張るイメージの漢字で見かけるよ。（集・進 など）",
      q:"「隹（ふるとり）」は、どんな鳥のイメージかな？",
      choices:["しっぽの短い小鳥","大きなわし","水の中の魚"],
      answer:0
    },
    {
      name:"⑳ 川（かわ）",
      answerImg:"https://jouniorsankosodate.com/wp-content/uploads/2025/12/1131ecb325aba096619c4c92d6c361e1.webp",
      explain:"「川」は、流れる川の形からできた字で、水の流れを表す部首だよ。",
      extra:"川・流れ・水に関係する漢字でよく見かけるよ。（川・州 など）",
      q:"「川」の部首は、もともと何の形？",
      choices:["流れる川","山のてっぺん","家の屋根"],
      answer:0
    }
  ];

  /* =========================================
     ▼ ここから下は LEVEL 共通の動き（さわらなくてOK）
     ========================================= */

  const elImg     = document.getElementById("bushu-lv6-img");
  const elName    = document.getElementById("bushu-lv6-name");
  const elEx      = document.getElementById("bushu-lv6-explain");
  const elExtra   = document.getElementById("bushu-lv6-extra");
  const elQ       = document.getElementById("bushu-lv6-q");
  const elChoices = document.getElementById("bushu-lv6-choices");
  const elFb      = document.getElementById("bushu-lv6-feedback");
  const elCounter = document.getElementById("bushu-lv6-counter");
  const btnNext   = document.getElementById("bushu-lv6-next");
  const btnShuffle= document.getElementById("bushu-lv6-shuffle");
  const btnRestart= document.getElementById("bushu-lv6-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 choiceIndex = [0,1,2];
    shuffle(choiceIndex);

    const colors = ["#fff5f5","#f0f9ff","#fefce8"];
    shuffle(colors);

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

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

      btn.style.background = colors[idx];
      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>



<!-- ✅ 部首フラッシュ：記事下ナビ（下に入れる版） -->
<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-06/">タコタとおぼえる部首フラッシュ｜読み方・意味がわかるイラスト学習LEVEL6</a> は <a href="https://jouniorsankosodate.com">じゅにさん子育てブログ</a> に最初に表示されました。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://jouniorsankosodate.com/tacota-bushu-flash-06/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
