diff --git a/.nvmrc b/.nvmrc
index f10fc7d8f..dc49ba9bb 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v12.3.1
+v10.16.3
\ No newline at end of file
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 79177e938..8a89252fc 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -6,6 +6,7 @@ import { colors, fontSizes, ns, radii, spaces } from 'src/lib/theme'
 import { H3 } from 'src/components/ContentTags'
 import { CardAction } from 'src/components/CardWrapper'
 import CardContent, { CardContentProps } from 'src/components/CardContent'
+import locale from 'src/lib/locale'
 
 interface CardColorContextProps {
   color: CardProps['color']
@@ -42,6 +43,7 @@ export interface CardProps {
     content: React.ReactNode
     color?: CardProps['color']
   }
+  t?: boolean
 }
 
 export interface CardState {
@@ -86,7 +88,8 @@ const Card = ({
   slideCount,
   isLast,
   footer,
-  header
+  header,
+  t
 }: CardProps) => (
   <CardColorContext.Provider value={{ color }}>
     <div
@@ -162,11 +165,18 @@ const Card = ({
         >
           {title && (
             <H3
-              css={css`
-                text-align: center;
-                margin-left: ${spaces('-0.25')};
-                margin-right: ${spaces('-0.25')};
-              `}
+              css={[
+                css`
+                  text-align: center;
+                  margin-left: ${spaces('-0.25')};
+                  margin-right: ${spaces('-0.25')};
+                `,
+                !t &&
+                  locale === 'en' &&
+                  css`
+                    opacity: 0.1;
+                  `
+              ]}
             >
               {title}
             </H3>
diff --git a/src/components/ContentTags/List.tsx b/src/components/ContentTags/List.tsx
index f24708f5a..92f74bf0d 100644
--- a/src/components/ContentTags/List.tsx
+++ b/src/components/ContentTags/List.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
 const commonListCss = css`
   padding: 0;
@@ -26,9 +27,10 @@ const commonListItemCss = css`
 type DefaultUlProps = JSX.IntrinsicElements['ul']
 interface UlProps extends DefaultUlProps {
   size?: 'md' | 'lg'
+  t?: boolean
 }
 
-export const Ul = ({ size = 'md', ...props }: UlProps) => (
+export const Ul = ({ t, size = 'md', ...props }: UlProps) => (
   <ul
     {...props}
     css={[
@@ -36,6 +38,11 @@ export const Ul = ({ size = 'md', ...props }: UlProps) => (
       size === 'lg' &&
         css`
           margin: ${spaces(1.75)} 0;
+        `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
         `
     ]}
   />
@@ -44,9 +51,10 @@ export const Ul = ({ size = 'md', ...props }: UlProps) => (
 type DefaultOlProps = JSX.IntrinsicElements['ol']
 interface OlProps extends DefaultOlProps {
   size?: 'md' | 'lg'
+  t?: boolean
 }
 
-export const Ol = ({ size, ...props }: OlProps) => (
+export const Ol = ({ t, size, ...props }: OlProps) => (
   <ol
     {...props}
     css={[
@@ -57,7 +65,12 @@ export const Ol = ({ size, ...props }: OlProps) => (
         `,
       css`
         counter-reset: text;
-      `
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
     ]}
   />
 )
diff --git a/src/components/ContentTags/P.tsx b/src/components/ContentTags/P.tsx
index aafa2480f..124be4c36 100644
--- a/src/components/ContentTags/P.tsx
+++ b/src/components/ContentTags/P.tsx
@@ -1,6 +1,25 @@
-import styled from '@emotion/styled'
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
 import { spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-export const P = styled.p`
-  margin: 0 0 ${spaces(1)};
-`
+type DefaultPProps = JSX.IntrinsicElements['p']
+interface PProps extends DefaultPProps {
+  t?: boolean
+}
+
+export const P = ({ t, ...props }: PProps) => (
+  <p
+    {...props}
+    css={[
+      css`
+        margin: 0 0 ${spaces(1)};
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
+  />
+)
diff --git a/src/components/EmojiSeparator.tsx b/src/components/EmojiSeparator.tsx
index 286ded358..df640073c 100644
--- a/src/components/EmojiSeparator.tsx
+++ b/src/components/EmojiSeparator.tsx
@@ -5,6 +5,7 @@ import Emoji from 'src/components/Emoji'
 import { colors, fontSizes, ns, spaces, maxWidths } from 'src/lib/theme'
 import { VariableNames } from 'src/types/VariableNames'
 import letterEmojiMapping from 'src/lib/letterEmojiMapping'
+import locale from 'src/lib/locale'
 
 interface EmojiSeparatorProps {
   emojis: string[]
@@ -17,6 +18,7 @@ interface EmojiSeparatorProps {
   description?: React.ReactNode
   noBottomMargin: boolean
   noTopMargin: boolean
+  t?: boolean
 }
 
 const fontSize = (size: EmojiSeparatorProps['size']) =>
@@ -56,7 +58,8 @@ const EmojiSeparator = ({
   cssOverrides,
   description,
   noBottomMargin,
-  noTopMargin
+  noTopMargin,
+  t
 }: EmojiSeparatorProps) => (
   <Component
     css={[
@@ -106,13 +109,20 @@ const EmojiSeparator = ({
       </span>
       {description && (
         <div
-          css={css`
-            font-size: ${fontSizes(0.85)};
-            color: ${colors('grey700')};
-            padding-bottom: ${spaces(0.5)};
-            max-width: ${maxWidths('xs')};
-            margin: 0 auto;
-          `}
+          css={[
+            css`
+              font-size: ${fontSizes(0.85)};
+              color: ${colors('grey700')};
+              padding-bottom: ${spaces(0.5)};
+              max-width: ${maxWidths('xs')};
+              margin: 0 auto;
+            `,
+            !t &&
+              locale === 'en' &&
+              css`
+                opacity: 0.1;
+              `
+          ]}
         >
           {description}
         </div>
diff --git a/src/components/ExpressionRunnerCaptionOnly.tsx b/src/components/ExpressionRunnerCaptionOnly.tsx
index fa61d605d..1851fa295 100644
--- a/src/components/ExpressionRunnerCaptionOnly.tsx
+++ b/src/components/ExpressionRunnerCaptionOnly.tsx
@@ -1,14 +1,27 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionOnly = (props: JSX.IntrinsicElements['div']) => (
+const ExpressionRunnerCaptionOnly = ({
+  t,
+  ...props
+}: JSX.IntrinsicElements['div'] & {
+  t?: boolean
+}) => (
   <div
-    css={css`
-      text-align: center;
-      color: ${colors('indigo500')};
-      margin: ${spaces(2.25)} 0 ${spaces(2.5)};
-    `}
+    css={[
+      css`
+        text-align: center;
+        color: ${colors('indigo500')};
+        margin: ${spaces(2.25)} 0 ${spaces(2.5)};
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
     {...props}
   />
 )
diff --git a/src/components/ExpressionRunnerCaptionWrapper.tsx b/src/components/ExpressionRunnerCaptionWrapper.tsx
index d5b2753d2..3c90f0c71 100644
--- a/src/components/ExpressionRunnerCaptionWrapper.tsx
+++ b/src/components/ExpressionRunnerCaptionWrapper.tsx
@@ -1,17 +1,26 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import { colors, fontSizes, spaces } from 'src/lib/theme'
+import locale from 'src/lib/locale'
 
-const ExpressionRunnerCaptionWrapper = (
-  props: JSX.IntrinsicElements['div']
-) => (
+const ExpressionRunnerCaptionWrapper = ({
+  t,
+  ...props
+}: JSX.IntrinsicElements['div'] & { t?: boolean }) => (
   <div
-    css={css`
-      text-align: center;
-      font-size: ${fontSizes(0.85)};
-      color: ${colors('indigo500')};
-      margin: ${spaces('-0.75')} -2px ${spaces(0.5)} -2px;
-    `}
+    css={[
+      css`
+        text-align: center;
+        font-size: ${fontSizes(0.85)};
+        color: ${colors('indigo500')};
+        margin: ${spaces('-0.75')} -2px ${spaces(0.5)} -2px;
+      `,
+      !t &&
+        locale === 'en' &&
+        css`
+          opacity: 0.1;
+        `
+    ]}
     {...props}
   />
 )
diff --git a/src/components/H.tsx b/src/components/H.tsx
index d2974f0ee..20895fe4c 100644
--- a/src/components/H.tsx
+++ b/src/components/H.tsx
@@ -215,7 +215,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
   if (args.name === 'newUser') {
     if (locale === 'en') {
       return (
-        <P>
+        <P t>
           <InlineHeader>Hello!</InlineHeader> This is{' '}
           <Em>page {episodeNumber + 1}</Em> of the online course called “
           <InternalLink href={'/'}>{lessonTitle}</InternalLink>
@@ -393,7 +393,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Play <Emoji>▶️</Emoji>
+            Run <Emoji>▶️</Emoji>
           </Strong>
         </>
       )
@@ -412,7 +412,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Fast Forward <Emoji>⏩</Emoji>
+            Play <Emoji>⏩</Emoji>
           </Strong>
         </>
       )
@@ -431,7 +431,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       return (
         <>
           <Strong highlightType={highlightType}>
-            Fast Forwarding… <Emoji>⏩</Emoji>
+            Playing… <Emoji>⏩</Emoji>
           </Strong>
         </>
       )
diff --git a/src/contents/1.en.tsx b/src/contents/1.en.tsx
index 5f4ca258b..e5f809d4f 100644
--- a/src/contents/1.en.tsx
+++ b/src/contents/1.en.tsx
@@ -1,4 +1,607 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  Em,
+  InlineHeader,
+  Ul,
+  UlLi,
+  Hr
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import Emoji from 'src/components/Emoji'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiNumber from 'src/components/EmojiNumber'
+import NextLessonButton from 'src/components/NextLessonButton'
+import * as R from 'src/components/Runners'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>この話はフィクションです</>,
+        content: (
+          <>
+            <P>
+              本稿は<Em>ゆるい物語調</Em>
+              で話を進めていきます。ちなみに、この話はフィクションです。
+              <Emoji>😉</Emoji>
+            </P>
+            <P>
+              まずは、この物語に登場する「
+              <Strong>計算箱</Strong>」の話をしましょう。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>これが計算箱のアイコンです！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>ラムダ村の計算箱</>,
+        content: (
+          <>
+            <P>
+              むかしむかし、「<Strong>ラムダ村</Strong>
+              」という小さな山奥の村があり、村人が仲良く暮らしていました。
+            </P>
+            <EmojiSeparator
+              emojis={['🌲', '🙂', '🙂', '🌲']}
+              description={<>ラムダ村の村人たち</>}
+            />
+            <P>
+              ラムダ村には、代々伝わる「<Strong>計算箱</Strong>
+              」という道具がありました。<InlineHeader>計算箱</InlineHeader>
+              は、その名の通り<Em>算数の計算をしてくれる</Em>
+              魔法の道具です。<Em>現代の電卓のようなもの</Em>
+              だと思ってください。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>✨</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>✨</Emoji>
+              ]}
+              description={
+                <>
+                  計算ができる魔法の道具「<Strong>計算箱</Strong>」
+                </>
+              }
+            />
+            <P>この計算箱がどんなものか、説明しましょう！</P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader> 「ラムダ村」は、
+                <Em>上から読んでも下から読んでも「ラムダ村」</Em>です。
+                なぜ「ラムダ」と名付けたかは最後に説明します！
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>計算箱の例</>,
+        content: (
+          <>
+            <P>
+              こちらをご覧ください。これが、ラムダ村の村人が使っていた「
+              <Strong>計算箱</Strong>」のひとつです。
+            </P>
+            <R.Lizi>
+              計算箱 <CustomEmoji type="mathBox" />
+            </R.Lizi>
+            <Ul>
+              <UlLi>
+                上には、数字の <EmojiNumber number={1} /> が入っています。
+              </UlLi>
+              <UlLi>
+                下には、1を足す印 <CustomEmoji type="plusOne" />{' '}
+                が入っています。
+              </UlLi>
+            </Ul>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>1️⃣</Emoji>,
+                <CustomEmoji type="plusOne" />
+              ]}
+            />
+            <P>では次に、この計算箱はどのように使うかを説明しましょう！</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'play' }} /> ボタン
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それぞれの計算箱には
+              <Strong>
+                <H args={{ name: 'play' }} /> ボタン
+              </Strong>
+              がついており、それを押すと計算が実行されます。試しに、下の計算箱で
+              <Strong>
+                <H args={{ name: 'pressPlay' }} />
+              </Strong>
+            </P>
+            <R.Mcug />
+            <P>
+              <Strong>
+                結果は <EmojiNumber number={2} /> になりました
+              </Strong>
+              。つまり、
+              <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={1} /> が計算できたということです。
+            </P>
+            <Hr />
+            <P>
+              他の計算箱も見てみましょう！たとえばこちらをご覧になり、
+              <Strong>
+                <H args={{ name: 'pressPlay' }} />
+              </Strong>
+            </P>
+            <R.Aovj />
+            <P>
+              こちらは <EmojiNumber number={4} /> になり、すなわち{' '}
+              <EmojiNumber number={3} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={1} /> が計算できました！<Emoji>🙂</Emoji>
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>1を足す機能</>,
+        content: (
+          <>
+            <P>ここまでをまとめると、下の計算箱のように、</P>
+            <R.Rviy />
+            <Ul>
+              <UlLi>
+                <Em>
+                  上に何らかの数字 <CustomEmoji type="blankNumber" />{' '}
+                  が入っていて、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  下に <CustomEmoji type="plusOne" /> が入っている場合、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <H args={{ name: 'play' }} /> すると結果は{' '}
+                  <CustomEmoji type="blankNumber" /> <Emoji>➕</Emoji>{' '}
+                  <EmojiNumber number={1} /> になる
+                </Em>
+              </UlLi>
+            </Ul>
+            <P>ということです。</P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="blankNumber" />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+            />
+            <P>
+              これが、計算箱に備わっている機能のひとつ、「
+              <Strong>1を足す機能</Strong>
+              」です。この機能を使えば、
+              <Em>
+                何らかの数字に <EmojiNumber number={1} />{' '}
+                を足す計算を行うことができる
+              </Em>
+              のです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>✨</Emoji>,
+                <CustomEmoji type="plusOne" />,
+                <Emoji>✨</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱の<Strong>1を足す機能:</Strong>
+                  <br />
+                  何らかの数字に <EmojiNumber number={1} /> を足す
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>1を引く機能</>,
+        content: (
+          <>
+            <P>
+              計算箱は「1を足す」だけではなく、「<Strong>1を引く</Strong>
+              」計算をすることもできます。こちらの計算箱を
+              <H args={{ name: 'play' }} />
+              してみてください:
+            </P>
+            <R.Xmqp />
+            <P>
+              結果は <EmojiNumber number={2} /> になりました。すなわち{' '}
+              <EmojiNumber number={3} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={1} /> が計算できたということです！
+              <Emoji>🙂</Emoji>
+            </P>
+            <Hr />
+            <P>
+              このように、
+              <Em>
+                何らかの数字 <CustomEmoji type="blankNumber" /> の下に{' '}
+                <CustomEmoji type="minusOne" /> が入っていると、
+                <CustomEmoji type="blankNumber" /> <Emoji>➖</Emoji>{' '}
+                <EmojiNumber number={1} /> を計算することができる
+              </Em>
+              のです。
+            </P>
+            <R.Ditw>
+              <CustomEmoji type="blankNumber" /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる
+            </R.Ditw>
+            <P>
+              これが、計算箱に備わっているふたつめの機能、「
+              <Strong>1を引く機能</Strong>
+              」です。この機能を使えば、何らかの数字から{' '}
+              <EmojiNumber number={1} /> を引く計算を行うことができるのです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>✨</Emoji>,
+                <CustomEmoji type="minusOne" />,
+                <Emoji>✨</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱の<Strong>1を引く機能:</Strong>
+                  <br />
+                  何らかの数字から <EmojiNumber number={1} /> を引く
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            使えるのは <CustomEmoji type="plusOne" /> と{' '}
+            <CustomEmoji type="minusOne" /> だけ
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ここが重要なポイントなのですが、計算に使うことができるのは{' '}
+              <Strong>
+                <CustomEmoji type="plusOne" /> と{' '}
+                <CustomEmoji type="minusOne" /> だけです
+              </Strong>
+              。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="plusOne" /> と{' '}
+                  <CustomEmoji type="minusOne" /> しか使えない
+                </>
+              }
+            />
+            <P>
+              それでは質問です。 <CustomEmoji type="plusOne" /> と{' '}
+              <CustomEmoji type="minusOne" /> しか使えないのであれば、たとえば{' '}
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={2} />{' '}
+              といった計算はどのように行えばいいのでしょうか？<Emoji>🤔</Emoji>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={2} />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={2} />
+              ]}
+              description={<>これを計算したいときはどうすればいい？</>}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="plusOne" /> を2回使う
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              正解を教えましょう。
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={2} /> を計算したい場合、{' '}
+              <Strong>
+                <CustomEmoji type="plusOne" /> を2回
+              </Strong>
+              使えばいいのです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={2} />,
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="plusOne" />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="plusOne" /> を2回使う
+                </>
+              }
+            />
+            <P>
+              こちらに <CustomEmoji type="plusOne" />{' '}
+              を2回使った計算箱を用意したので、実際に試してみましょう。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Jiqb />
+            <P>
+              結果は <EmojiNumber number={4} /> になり、すなわち{' '}
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={2} />
+              が計算できました！<Emoji>🙂</Emoji>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="plusOne" /> も <CustomEmoji type="minusOne" />{' '}
+            も何回でも使える
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ちなみに、
+              <Strong>
+                <CustomEmoji type="plusOne" /> も{' '}
+                <CustomEmoji type="minusOne" />{' '}
+                も、どちらも何回でも使うことができます
+              </Strong>
+              。<Emoji>😉</Emoji>
+            </P>
+            <EmojiSeparator
+              noBottomMargin
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="plusOne" />
+              ]}
+            />
+            <EmojiSeparator
+              noTopMargin
+              nodes={[
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="plusOne" /> も{' '}
+                  <CustomEmoji type="minusOne" /> も何回でも使える
+                </>
+              }
+            />
+            <P>
+              たとえば、下の計算箱は、
+              <Strong>
+                <CustomEmoji type="plusOne" /> を3回
+              </Strong>
+              使うことで、
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算してくれます。
+            </P>
+            <R.Eagi>
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算
+            </R.Eagi>
+            <P>
+              一方、下の計算箱は、
+              <Strong>
+                <CustomEmoji type="minusOne" /> を4回
+              </Strong>
+              使うことで、
+              <EmojiNumber number={5} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={4} /> を計算してくれます。
+            </P>
+            <R.Yjur>
+              <EmojiNumber number={5} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={4} /> を計算
+            </R.Yjur>
+          </>
+        )
+      },
+      {
+        title: <>どんな大きな数字の足し算でも引き算でも可能</>,
+        content: (
+          <>
+            <P>
+              つまり、
+              <CustomEmoji type="plusOne" /> や <CustomEmoji type="minusOne" />{' '}
+              を何度も使うことで、
+              <Em>どんな大きな数字の足し算でも引き算でも可能なのです</Em>。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="horizontalDotDotDot" />,
+                <CustomEmoji type="plusOne" />
+              ]}
+              noBottomMargin
+            />
+            <EmojiSeparator
+              noTopMargin
+              nodes={[
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="horizontalDotDotDotRed" />,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="plusOne" /> も{' '}
+                  <CustomEmoji type="minusOne" /> も何度も使えば、
+                  <br />
+                  どんな大きな数字でも足し算・引き算できる
+                </>
+              }
+            />
+            <P>
+              たとえば、
+              <EmojiNumber number={10} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={10} />{' '}
+              を計算したかったら、どうすればいいでしょうか？
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={10} />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={10} />
+              ]}
+            />
+            <P>
+              答えを言うと、
+              <Strong>
+                <EmojiNumber number={10} /> の下に{' '}
+                <CustomEmoji type="plusOne" />{' '}
+                を10回配置した計算箱を実行すればいい
+              </Strong>
+              のです。
+            </P>
+            <R.Amoq>
+              <CustomEmoji type="plusOne" /> を10回配置
+            </R.Amoq>
+            <P>
+              このようにすれば、
+              <Em>計算箱はどんな大きな数字の足し算でも引き算でもできます</Em>。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>ラムダ村の村人は計算がとても苦手</>,
+        content: (
+          <>
+            <P>
+              まとめると、
+              <Strong>計算箱は足し算や引き算を行ってくれる魔法の道具</Strong>
+              というわけです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>➕</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>➖</Emoji>
+              ]}
+              description={<>計算箱は足し算や引き算ができる</>}
+            />
+            <P>
+              そして、ラムダ村の村人は<Strong>計算がとても苦手でした</Strong>。
+              だから、たとえば「
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} />
+              」のような単純な足し算をするのにも、村人たちは計算箱に頼りきっていました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🙂</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🙂</Emoji>
+              ]}
+              description={
+                <>
+                  俺ら計算が苦手だから、
+                  <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+                  <EmojiNumber number={3} /> といった
+                  <br />
+                  単純な足し算も、計算箱がないとできない！
+                </>
+              }
+            />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader>{' '}
+                <Em>
+                  残念ながら、計算箱は「<Strong>掛け算</Strong>{' '}
+                  <Emoji>✖️</Emoji>
+                  」や「<Strong>割り算</Strong> <Emoji>➗</Emoji>
+                  」を行うことはできませんでした。
+                </Em>
+              </P>
+              <EmojiSeparator
+                emojis={['✖️', '😭', '➗']}
+                description={<>掛け算や割り算は、計算箱ではできない</>}
+              />
+              <P>
+                しかし、計算が大の苦手だった村人たちにとって、足し算や引き算ができるだけでも大いにありがたいことでした。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>3つめの計算箱の機能</>,
+        content: (
+          <>
+            <P>
+              <Em>
+                実は計算箱には、今回紹介した「
+                <InlineHeader>1を足す機能</InlineHeader>{' '}
+                <CustomEmoji type="plusOne" />
+                」や「
+                <InlineHeader>1を引く機能</InlineHeader>{' '}
+                <CustomEmoji type="minusOne" />
+                」以外にも、
+                <Strong>さらにもうひとつ</Strong>
+                の機能があります。
+              </Em>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <Emoji>❓</Emoji>
+              ]}
+              description={<>3つめの機能がある</>}
+            />
+            <P>次のページでは、計算箱の3つめの機能について紹介していきます！</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/10.en.tsx b/src/contents/10.en.tsx
index 5f4ca258b..f7119bdb7 100644
--- a/src/contents/10.en.tsx
+++ b/src/contents/10.en.tsx
@@ -1,4 +1,1396 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Em, Strong, Ul, UlLi, Hr } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import EmojiWithText from 'src/components/EmojiWithText'
+import Emoji from 'src/components/Emoji'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import TwoColGrid from 'src/components/TwoColGrid'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>返してもらった計算箱は…</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>では、計算箱を返してやろう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rviy>返してもらった計算箱</R.Rviy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>あれ…これだけか？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        これは「<Strong>1を足す機能</Strong>{' '}
+                        <CustomEmoji type="plusOne" />
+                        」がある計算箱だけど…
+                      </P>
+                      <P>
+                        「<Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」がある計算箱や、「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>」がある計算箱はどこにいったんだ？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Ditw>
+                    <Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+                  </R.Ditw>
+                </>
+              }
+              right={
+                <>
+                  <R.Bwnp>
+                    <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  </R.Bwnp>
+                  <ExpressionRunnerSeparator blank />
+                  <R.Ewfr></R.Ewfr>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>それらは、まだ返すわけにはいかないな。</Strong>
+                      </P>
+                      <P>
+                        <Em>
+                          いまお前たちに返せるのは、「
+                          <Strong>1を足す機能</Strong>{' '}
+                          <CustomEmoji type="plusOne" />
+                          」がある計算箱だけだ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'scared',
+                  children: (
+                    <>
+                      <P>な、なんだってー！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        話が違うじゃないか！さっきの問題を解いたら、計算箱を返してくれると言っただろう？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        計算箱を返すとは言ったが…
+                        <Strong>
+                          計算箱のすべての機能を返すとは言っていないからな！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>そ、そんなー！嘘つきじゃないか！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>まあ、わたしは悪魔だからな。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>どうすればいい？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、どうしたらすべての機能を返してもらえるんだ？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そうだな…先ほどの問題ではお前たちに、
+                        <Em>
+                          計算箱の「
+                          <Strong>1を足す機能</Strong>{' '}
+                          <CustomEmoji type="plusOne" />
+                          」を弁当箱で再現してもらった
+                        </Em>
+                        よな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Lizi>
+              <EmojiNumber number={1} /> <CustomEmoji type="plusOne" />{' '}
+              の計算箱を…
+            </R.Lizi>
+            <ExpressionRunnerSeparator />
+            <R.Plde>弁当箱で再現した</R.Plde>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        だから、
+                        <Em>
+                          「<Strong>1を引く機能</Strong>{' '}
+                          <CustomEmoji type="minusOne" />
+                          」や「
+                          <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」を返してほしかったら、
+                          <Strong>
+                            それらを同じように弁当箱で再現してみることだな！
+                          </Strong>
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Ditw>
+                    <Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+                  </R.Ditw>
+                  <ExpressionRunnerSeparator />
+                  <EmojiSeparator
+                    emojis={['❓', '🍱', '❓']}
+                    description={<>弁当箱で再現</>}
+                  />
+                </>
+              }
+              right={
+                <>
+                  <R.Bwnp>
+                    <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  </R.Bwnp>
+                  <ExpressionRunnerSeparator blank />
+                  <R.Ewfr></R.Ewfr>
+                  <ExpressionRunnerSeparator />
+                  <EmojiSeparator
+                    emojis={['❓', '🍱', '❓']}
+                    description={<>弁当箱で再現</>}
+                  />
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'scared',
+                  children: (
+                    <>
+                      <P>えー！</P>
+                      <P>
+                        「<Strong>1を足す機能</Strong>{' '}
+                        <CustomEmoji type="plusOne" />
+                        」を再現するのにも苦戦したのに、「
+                        <Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」や「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を再現するなんて、できっこないよ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>だったら諦めることだな。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        で、でも…「
+                        <Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」や「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」がないと、
+                        <Em>
+                          <Strong>引き算や、大きな数の足し算・引き算</Strong>
+                          ができないよ！
+                        </Em>
+                      </P>
+                      <P>俺らは計算箱がないと何もできないんだ！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>頑張って弁当箱で再現するしかないのか…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'minusOneEffect' }} />
+            がある弁当箱のヒント
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        もちろん、ヒント無しでやれとは言わん。前回同様、ヒントを出してやろうじゃないか。
+                      </P>
+                      <P>ミニオン、ヒントを説明したまえ！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>わかりました。こちらの弁当箱をご覧ください。</P>
+                      <P>
+                        前回と同じく、
+                        <Em>
+                          それぞれの <CustomEmoji type="questionFoodGrey" />{' '}
+                          には何らかの料理が入ります。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Pbop>
+              それぞれの <CustomEmoji type="questionFoodGrey" /> には
+              <br />
+              何らかの料理が入る
+            </R.Pbop>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なんか、めちゃくちゃ複雑な弁当箱だな…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そして、
+                        <Strong>
+                          それぞれの <CustomEmoji type="questionFoodGrey" />{' '}
+                          に、ある法則に基づいて料理を入れると、
+                          <H args={{ name: 'minusOneEffect' }} />
+                          がある弁当箱になります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Skoo>
+              それぞれの <CustomEmoji type="questionFoodGrey" /> に、
+              <br />
+              <Strong>ある法則に基づいて</Strong>料理を入れると、
+              <br />
+              <H args={{ name: 'minusOneEffect' }} />
+              がある弁当箱になる
+            </R.Skoo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なに、
+                        <H args={{ name: 'minusOneEffect' }} />
+                        だって？
+                      </P>
+                      <P>
+                        前回の
+                        <H args={{ name: 'plusOneEffect' }} />
+                        の真逆なのかな？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        その通りです。上の
+                        <H args={{ name: 'minusOneEffect' }} />
+                        がある弁当箱を、
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            ある数字 <CustomEmoji type="blankNumber" />{' '}
+                            に変換できる弁当箱と合体させ、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            <H args={{ name: 'runAndConvertToMathbox' }} />
+                            すると、
+                          </Em>
+                        </UlLi>
+                      </Ul>
+                      <P>
+                        <Em>
+                          結果は <CustomEmoji type="blankNumber" />{' '}
+                          <Emoji>➖</Emoji> <EmojiNumber number={1} /> になる
+                        </Em>
+                        のです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xqjd>
+              <CustomEmoji type="blankNumber" /> に変換できる弁当箱と、
+              <br />
+              <H args={{ name: 'minusOneEffect' }} />
+              がある弁当箱を合体させ…
+            </R.Xqjd>
+            <ExpressionRunnerSeparator />
+            <R.Gvxz>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果は <CustomEmoji type="blankNumber" />{' '}
+              <Emoji>➖</Emoji> <EmojiNumber number={1} /> になる
+            </R.Gvxz>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        つまりこれを使えば、計算箱の「
+                        <Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」を再現できるというわけだな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ditw>
+              計算箱の「<Strong>1を引く機能</Strong>{' '}
+              <CustomEmoji type="minusOne" />
+              」は…
+            </R.Ditw>
+            <ExpressionRunnerSeparator />
+            <R.Xqjd>
+              <H args={{ name: 'minusOneEffect' }} />
+              がある弁当箱を
+              <br />
+              使えば、再現できる
+            </R.Xqjd>
+          </>
+        )
+      },
+      {
+        title: <>サヤちゃんが考えた弁当箱</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        しかし…こんな複雑な弁当箱の{' '}
+                        <CustomEmoji type="questionFoodGrey" />{' '}
+                        を正しい法則で埋めるなんて…何日かかってもできなさそうだ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Pbop>
+              それぞれの <CustomEmoji type="questionFoodGrey" /> には
+              <br />
+              何らかの料理が入る
+            </R.Pbop>
+            <P>
+              村人たちが困っていると、またサヤちゃんが何かひらめいたようです。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>ねえねえ、サヤも試しにやってみたんだけど…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>え…サヤちゃん、まさか答えが分かったというのかい？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>とりあえずこれを見てみて！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cldb>
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱
+            </R.Cldb>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        ふむふむ…まさか今回も一発で正解なんてことはありえないと思うけど、とりあえず試してみるか。
+                      </P>
+                      <P>
+                        前回もやったように、
+                        <Em>
+                          <EmojiNumber number={1} />{' '}
+                          に変換できる弁当箱と合体させてみよう。
+                        </Em>
+                      </P>
+                      <R.Dqdv>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'g',
+                            number: 1
+                          }}
+                        />
+                      </R.Dqdv>
+                      <P>
+                        今回は
+                        <H args={{ name: 'minusOneEffect' }} />
+                        があるかどうかを確かめたいわけだから、
+                        <EmojiNumber number={1} /> <Emoji>➖</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できないといけない。
+                      </P>
+                      <EmojiSeparator
+                        nodes={[
+                          <EmojiNumber number={1} />,
+                          <Emoji>➖</Emoji>,
+                          <EmojiNumber number={1} />
+                        ]}
+                      />
+                      <P>
+                        つまり、
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        した時に、
+                        <Em>
+                          結果が <EmojiNumber number={0} />{' '}
+                          になれば成功というわけだ。
+                        </Em>
+                      </P>
+                      <EmojiSeparator
+                        nodes={[
+                          <Emoji>🍱</Emoji>,
+                          <Emoji>▶️</Emoji>,
+                          <CustomEmoji type="singleArrow" />,
+                          <EmojiNumber number={0} />
+                        ]}
+                        description={
+                          <>
+                            結果が <EmojiNumber number={0} /> になればOK
+                          </>
+                        }
+                      />
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ylav>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Ylav>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={0} size="mdlg" /> になれば
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、
+                        <H args={{ name: 'play' }} />
+                        してみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'play' }} /> してみると…
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それでは、<Emoji>👧🏻</Emoji>{' '}
+              サヤちゃんの弁当箱を実行してみましょう！
+            </P>
+            <P>
+              途中まで早送りしてみますね。
+              <H
+                args={{
+                  name: 'pressFastForward'
+                }}
+              />
+            </P>
+            <R.Zwut></R.Zwut>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'relieved',
+                  children: (
+                    <>
+                      <P>複雑すぎて、目で追うのがしんどい…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Em>すべてを目で追う必要はないですよ！</Em>
+                        なんとなく、「へー、こんなふうに進んでいくんだ」と思っていただければ大丈夫です。
+                      </P>
+                      <P>
+                        また、「
+                        <Strong>
+                          <H args={{ name: 'skipToTheStoppingPoint' }} /> →
+                        </Strong>
+                        」を押して、飛ばしていただいても結構です。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        それより見てみて！
+                        <Strong>
+                          途中で{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          が同じ <EmojiWithText letter="f" /> になったよ！
+                        </Strong>
+                      </P>
+                      <P>
+                        前回と同じように
+                        <Em>
+                          特別ルールで、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          が別の料理に変わる
+                        </Em>
+                        んだよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              特別ルールを実行するには、
+              <Em>
+                <H args={{ name: 'next' }} /> を押してみてください！
+              </Em>
+            </P>
+            <R.Xusi></R.Xusi>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね！結果が狂わないように、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        の <EmojiWithText letter="f" /> を{' '}
+                        <EmojiWithText letter="a" /> に変えました。
+                      </P>
+                      <P>
+                        では、最後まで
+                        <H args={{ name: 'fastForward' }} />
+                        してみてください！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Lipt />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        最終的に残った以下の弁当箱は、
+                        <EmojiNumber number={0} /> に変換できる弁当箱です！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zzhq>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'b',
+                  number: 0
+                }}
+              />
+            </R.Zzhq>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>ということは、サヤちゃんの弁当箱は…</P>
+                      <P>
+                        <Em>
+                          <EmojiNumber number={1} />{' '}
+                          に変換できる弁当箱と合体させ、
+                          <H args={{ name: 'runAndConvertToMathbox' }} />
+                          すると、結果が <EmojiNumber number={0} /> になる
+                        </Em>
+                        ということですね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ylav>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Ylav>
+            <ExpressionRunnerSeparator />
+            <R.Jwah>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果が <EmojiNumber number={0} /> になる
+            </R.Jwah>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <EmojiNumber number={1} /> <Emoji>➖</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できたので、
+                        <Strong>成功です！</Strong> <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やったー！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>す、すごい…！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} /> <Emoji>➖</Emoji>{' '}
+            <EmojiNumber number={1} /> はできる？
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ぐぬぬ…しかし、
+                        <EmojiNumber number={1} /> <Emoji>➖</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できたからといって、
+                        <Em>
+                          その弁当箱に
+                          <H args={{ name: 'minusOneEffect' }} />
+                          があるとはまだ言い切れない
+                        </Em>
+                        ぞ。
+                      </P>
+                      <P>
+                        たとえば、
+                        <Strong>
+                          <EmojiNumber number={2} /> <Emoji>➖</Emoji>{' '}
+                          <EmojiNumber number={1} /> は計算できるのかな？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={2} />,
+                <Emoji>➖</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={<>これも計算できる？</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、
+                        <Em>
+                          <EmojiNumber number={2} />{' '}
+                          に変換できる弁当箱と合体させてみる
+                        </Em>
+                        ね！
+                      </P>
+                      <R.Mzys>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'g',
+                            number: 2
+                          }}
+                        />
+                      </R.Mzys>
+                      <P>
+                        合体したものを
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        して、
+                        <Em>
+                          結果が <EmojiNumber number={1} /> になればいい
+                        </Em>
+                        んだよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zwvj>
+              <EmojiNumber number={2} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Zwvj>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={1} size="mdlg" /> になれば
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        まずは実行してみるね。
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          今回は、<Em>最後まで止まらずに早送りするね！</Em>
+                        </UlLi>
+                        <UlLi>
+                          複雑なので、<Em>目で追わなくても大丈夫だよ！</Em>
+                        </UlLi>
+                        <UlLi>
+                          ちょっと時間がかかるので、待てない方は下の「
+                          <Strong>
+                            <H args={{ name: 'skipToTheEnd' }} /> →
+                          </Strong>
+                          」を押してね！
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ifiq />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        最終的に残った以下の弁当箱は、
+                        <EmojiNumber number={1} /> に変換できる弁当箱です！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Joaq>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 1, letter: 'b' }}
+              />
+            </R.Joaq>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <EmojiNumber number={2} /> <Emoji>➖</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できたので、
+                        <Strong>またしても成功です！</Strong> <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>わーい、わーい！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ぐぬぬ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'minusOneEffect' }} />
+            がある法則
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>まさか、こうも簡単に正解されるとは思わなかったが…</P>
+                      <P>
+                        <Strong>
+                          サヤちゃんが考えた弁当箱は、
+                          <H args={{ name: 'minusOneEffect' }} />
+                          がある弁当箱だ！
+                        </Strong>{' '}
+                        <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rdae>
+              <Emoji>👧🏻</Emoji> サヤちゃんが考えた弁当箱には
+              <br />
+              <H args={{ name: 'minusOneEffect' }} />
+              がある
+            </R.Rdae>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やった！ということは、正解だね！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ちなみに、サヤちゃんが考えた弁当箱以外にも、
+                        <Strong>
+                          以下の法則に当てはまる弁当箱であれば、 どれでも
+                          <H args={{ name: 'minusOneEffect' }} />
+                          があるぞ。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cbmn>
+              この法則に当てはまる弁当箱であれば、
+              <br />
+              <H args={{ name: 'minusOneEffect' }} />
+              がある
+            </R.Cbmn>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかにサヤちゃんの弁当箱は、上の法則に当てはまっている…
+                      </P>
+                      <P>
+                        よくこんなの分かったなあ。サヤちゃんは天才なのかもしれない！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そんなことないよ！でも、これで「
+                        <Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」を再現できたね！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            「<Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+            」も再現できた！
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              今回学んだことを一言でまとめると、
+              <Strong>
+                計算箱の「1を引く機能 <CustomEmoji type="minusOne" />
+                」も、弁当箱で「再現」できる
+              </Strong>
+              、ということです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="minusOnePink" />
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>1を引く機能</Strong>{' '}
+                  <CustomEmoji type="minusOne" />
+                  」は、
+                  <br />
+                  弁当箱で「<Strong>再現</Strong>」することができる
+                </>
+              }
+            />
+            <P>
+              たとえば、以下のような <EmojiNumber number={3} />{' '}
+              <Emoji>➖</Emoji> <EmojiNumber number={1} />{' '}
+              を計算する計算箱をご覧ください。
+            </P>
+            <R.Xmqp>
+              <EmojiNumber number={3} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる
+            </R.Xmqp>
+            <P>
+              これを弁当箱で再現するには、
+              <Em>
+                <EmojiNumber number={3} /> に変換できる弁当箱と、
+                <H args={{ name: 'minusOneEffect' }} />
+                がある弁当箱を合体すればいい
+              </Em>
+              のです。
+            </P>
+            <R.Fhkl>
+              <EmojiNumber number={3} /> に変換できる弁当箱と
+              <br />
+              <H args={{ name: 'minusOneEffect' }} />
+              がある弁当箱を
+              <br />
+              合体すれば、
+              <EmojiNumber number={3} /> <CustomEmoji type="minusOne" />{' '}
+              の計算箱を再現できる
+            </R.Fhkl>
+            <P>
+              上の
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              ボタンを押すと、答えが <EmojiNumber number={2} />{' '}
+              になるのを確認できます。
+            </P>
+            <Hr />
+            <P>
+              まとめると、
+              <Em>
+                計算箱の「<Strong>1を引く機能</Strong>{' '}
+                <CustomEmoji type="minusOne" />
+                」も、弁当箱で再現することができる
+              </Em>
+              のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="minusOnePink" />
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>1を引く機能</Strong>{' '}
+                  <CustomEmoji type="minusOne" />
+                  」も、
+                  <br />
+                  弁当箱で「<Strong>再現</Strong>」することができる
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        今回の「<Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」を再現する問題も、超難問です。だから、サヤちゃんのように答えを思いつけなくても大丈夫です。
+                      </P>
+                      <P>
+                        前回話した通り、
+                        <Em>
+                          答えを思いつけなくても、答えを見て、「なるほど、そういうことだったのか」と理解できれば、コンピュータサイエンスを学ぶ素養は十分すぎるほどあります。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>中級はここまで！</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>
+                        どうだ、「<Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」も、弁当箱で再現したぞ！(やったのは俺らじゃなくて{' '}
+                        <Emoji>👧🏻</Emoji> サヤちゃんだけど…)
+                      </P>
+                      <P>
+                        約束通り、「<Strong>1を引く機能</Strong>{' '}
+                        <CustomEmoji type="minusOne" />
+                        」がある計算箱も返してもらう！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ぐぬぬ…では、返してやろう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>
+                        やったー！<Emoji>🎉</Emoji> <Emoji>🎉</Emoji>{' '}
+                        <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ditw>
+              「<Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+              」も返してもらった！
+            </R.Ditw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        しかし、
+                        <Em>
+                          「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」がある計算箱は、まだ返すわけにはいかないな。返してほしかったら、これらも弁当箱で再現してみるんだな！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Bwnp>
+                    <CustomEmoji type="plusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Bwnp>
+                </>
+              }
+              right={
+                <>
+                  <R.Ewfr>
+                    <CustomEmoji type="minusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Ewfr>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        難しそう…しかし、こっちには <Emoji>👧🏻</Emoji>{' '}
+                        サヤちゃんがいる！彼女ならなんとかしてくれるはずだ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>ちなみに、中級編はここまでだ。</Em>
+                        決着は、次からはじまる上級編でつけよう！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>よーし、望むところだ！上級編へ進もう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/11.en.tsx b/src/contents/11.en.tsx
index 5f4ca258b..a170ee8da 100644
--- a/src/contents/11.en.tsx
+++ b/src/contents/11.en.tsx
@@ -1,4 +1,984 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  Hr,
+  Em,
+  Ul,
+  UlLi,
+  InlineHeader
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import Emoji from 'src/components/Emoji'
+import TwoColGrid from 'src/components/TwoColGrid'
+import InlineBorder from 'src/components/InlineBorder'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
+import YesNoButtons from 'src/components/YesNoButtons'
+import { TwoPlusFour, Conclusion } from 'src/contents/2.jp'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>上級編へようこそ！</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <Emoji>🤗</Emoji>,
+                <CustomEmoji type="minusOne" />
+              ]}
+            />
+            <P>
+              中級編では、<Emoji>😈</Emoji> 悪魔から計算箱の「
+              <Strong>1を足す機能</Strong> <CustomEmoji type="plusOne" />
+              」と「<Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+              」を返してもらいました。どちらも、弁当箱で再現することができたのです。
+            </P>
+            <R.Rviy>
+              「<Strong>1を足す機能</Strong> <CustomEmoji type="plusOne" />」
+            </R.Rviy>
+            <ExpressionRunnerSeparator />
+            <R.Eweo>弁当箱で再現</R.Eweo>
+            <Hr />
+            <R.Ditw>
+              <Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+            </R.Ditw>
+            <ExpressionRunnerSeparator />
+            <R.Bgko>弁当箱で再現</R.Bgko>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+            」の復習
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              一方、「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」は、まだ返してもらっていません。これを弁当箱で再現できないと返してもらえないのです。
+            </P>
+            <TwoColGrid
+              noTopNegativeMargin
+              noBottomNegativeMargin
+              left={
+                <>
+                  <R.Bwnp>
+                    <CustomEmoji type="plusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Bwnp>
+                </>
+              }
+              right={
+                <>
+                  <R.Ewfr>
+                    <CustomEmoji type="minusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Ewfr>
+                </>
+              }
+            />
+            <P>
+              「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」について忘れてしまった方も多いと思うので、ここで復習をしましょう。
+            </P>
+            <P>
+              まず、こちらの計算箱をご覧になり、
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <TwoPlusFour />
+          </>
+        )
+      },
+      {
+        title: <>大きな数の足し算や引き算に役立つ</>,
+        content: (
+          <>
+            <P>
+              こちらも復習になりますが、ラムダ村の村人たちにとって、計算箱の「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」は、
+              <Strong>
+                大きな数の足し算や引き算をするときに欠かせない機能
+              </Strong>
+              でした。
+            </P>
+            <EmojiSeparator
+              nodes={[<Emoji>✨</Emoji>, <Emoji>🔁</Emoji>, <Emoji>✨</Emoji>]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」は、大きな数の
+                  <br />
+                  足し算・引き算に欠かせない
+                </>
+              }
+            />
+            <P>
+              たとえば、
+              <EmojiNumber number={10} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={10} />{' '}
+              を計算したい場合、繰り返しの機能を使わないと、
+              <CustomEmoji type="plusOne" /> を10回配置する必要があります。
+            </P>
+            <R.Amoq>
+              <CustomEmoji type="plusOne" /> を10回配置
+            </R.Amoq>
+            <P>
+              <Strong>
+                しかし初級その2でもやった通り、
+                <CustomEmoji type="plusOne" /> の数が増えると、
+                <CustomEmoji type="plusOne" />{' '}
+                の数を間違えてしまう可能性があります。
+              </Strong>
+              そうすると、正しい計算ができません。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>❌</Emoji>,
+                <CustomEmoji type="plusOne" />,
+                <Emoji>❌</Emoji>
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="plusOne" /> の数を間違えやすい
+                </>
+              }
+            />
+            <P>
+              一方、繰り返しの機能を使えば、
+              <EmojiNumber number={10} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={10} />{' '}
+              といった計算も、以下のようにシンプルになります。
+              <CustomEmoji type="plusOne" /> の数を間違えることもありません。
+            </P>
+            <R.Jehv>
+              <CustomEmoji type="plusOne" /> を <EmojiNumber number={10} />{' '}
+              回繰り返す
+            </R.Jehv>
+            <Conclusion />
+          </>
+        )
+      },
+      {
+        title: <>どうやって再現する？</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」を、
+                  <br />
+                  弁当箱でどう「<Strong>再現</Strong>」する？
+                </>
+              }
+            />
+            <P>
+              ラムダ村の村人たちは、計算箱の「<Strong>繰り返しの機能</Strong>{' '}
+              <Emoji>🔁</Emoji>」を <Emoji>😈</Emoji>{' '}
+              悪魔から返してもらうべく、弁当箱で繰り返しの機能を再現しようと頑張っていました。しかし…
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        うーん、
+                        <Em>
+                          どんなに考えても、計算箱の「
+                          <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」を弁当箱で再現することができない…
+                        </Em>
+                      </P>
+                      <P>サヤちゃん、何か思いついた？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>サヤも、さっぱり分からないなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>サヤちゃんでも分からないなんて…もうお手上げだ！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              すると、悩んでいる村人たちのもとに、悪魔の助手の <Emoji>🐶</Emoji>{' '}
+              ミニオンがやってきました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        みなさん、なかなかお困りのようですね。よければ、
+                        <Strong>ヒントを出しましょうか？</Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>おお、ミニオン！お願いだ、ヒントを教えてくれ！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        分かりました、ではまず、計算箱の「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」について教えましょう。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」だって？何だそりゃ？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>条件分岐の機能</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>まず、こちらの計算箱をご覧ください。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」がある計算箱
+            </R.Rhoa>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なんだこれは？</P>
+                      <Ul>
+                        <UlLi>
+                          左側に <InlineBorder type="falseCase" />{' '}
+                          <InlineBorder type="condition" />{' '}
+                          <InlineBorder type="trueCase" />{' '}
+                          という3種類の印があり、
+                        </UlLi>
+                        <UlLi>
+                          それぞれ <CustomEmoji type="blankNumberPink" />{' '}
+                          <CustomEmoji type="blankNumberGrey" />{' '}
+                          <CustomEmoji type="blankNumberPurple" />{' '}
+                          が入っている。
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          それぞれの <CustomEmoji type="blankNumberPink" />{' '}
+                          <CustomEmoji type="blankNumberGrey" />{' '}
+                          <CustomEmoji type="blankNumberPurple" />{' '}
+                          には数字を入れることができます。
+                        </Strong>
+                        同じ数字を入れても構いませんし、違う数字を入れても構いません。
+                      </P>
+                      <P>
+                        具体例で説明したほうが分かりやすいと思うので、
+                        <Strong>
+                          <CustomEmoji type="blankNumberPink" />{' '}
+                          <CustomEmoji type="blankNumberGrey" />{' '}
+                          <CustomEmoji type="blankNumberPurple" />{' '}
+                          に何か適当な数字を入れてみてください！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        分かった。とりあえず、{' '}
+                        <Strong>
+                          上から順に <EmojiNumber number={1} />{' '}
+                          <EmojiNumber number={2} /> <EmojiNumber number={3} />{' '}
+                          を入れてみたよ。
+                        </Strong>
+                      </P>
+                      <P>
+                        これで、
+                        <H args={{ name: 'play' }} />
+                        を押すとどうなるのかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Iatt>
+              <EmojiNumber number={1} /> <EmojiNumber number={2} />{' '}
+              <EmojiNumber number={3} /> を入れてみた
+            </R.Iatt>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <EmojiNumber number={1} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>では、どうしてこうなったか説明しますね！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            真ん中が <EmojiNumber number={0} /> かどうか
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」はまず、
+                        <Strong>
+                          <H
+                            args={{
+                              name: 'conditionSectionName',
+                              type: 'condition'
+                            }}
+                          />{' '}
+                          に入っている数字が <EmojiNumber number={0} /> かどうか
+                        </Strong>
+                        チェックします。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vozu />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <H
+                          args={{
+                            name: 'conditionSectionName',
+                            type: 'condition'
+                          }}
+                        />{' '}
+                        に入っている数字は <EmojiNumber number={2} /> なので、{' '}
+                        <Strong>
+                          <EmojiNumber number={0} /> ではないよ。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね。このように真ん中が{' '}
+                        <EmojiNumber number={0} /> ではない場合、
+                        <Strong>
+                          <H
+                            args={{
+                              name: 'conditionSectionName',
+                              type: 'falseCase'
+                            }}
+                          />{' '}
+                          に入っている数字が最終的に残るのです。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rjfy />
+            <ExpressionRunnerSeparator />
+            <R.Rnug>
+              <InlineBorder type="falseCase" /> に入っていた{' '}
+              <EmojiNumber number={1} /> が残る
+            </R.Rnug>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、だから <EmojiNumber number={1} /> が残るのか！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、もうひとつ例を紹介します。こちらは、
+                        <H args={{ name: 'yesNoQuiz' }} />{' '}
+                        にしてみましょう。こちらの計算箱をご覧ください。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Plbv />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <InlineHeader>質問:</InlineHeader> これを
+                        <H args={{ name: 'play' }} />{' '}
+                        すると、最終的に以下のようになるでしょうか？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Kizi />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <H
+                          args={{
+                            name: 'theAnswerIs',
+                            isYes: false,
+                            sentence: true
+                          }}
+                        />
+                        残るのは <EmojiNumber number={4} /> ではなく、
+                        <EmojiNumber number={5} /> になります。
+                        <H args={{ name: 'pressPlay' }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Kmyl />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>どうしてこうなったか説明しましょう。</P>
+                      <P>
+                        こちらも、真ん中の数字が <EmojiNumber number={0} />{' '}
+                        かどうかチェックします。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qcmh />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        今回は真ん中が <EmojiNumber number={0} />{' '}
+                        ですね。この場合は前回と逆で、
+                        <Strong>
+                          <H
+                            args={{
+                              name: 'conditionSectionName',
+                              type: 'trueCase'
+                            }}
+                          />{' '}
+                          に入っている数字が最終的に残ります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Guhy />
+            <ExpressionRunnerSeparator />
+            <R.Seie>
+              <InlineBorder type="trueCase" /> に入っていた{' '}
+              <EmojiNumber number={5} /> が残る
+            </R.Seie>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              まとめると、この「
+              <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+              」の法則は以下の通りです。
+            </P>
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」がある計算箱
+            </R.Rhoa>
+            <P>
+              <Em>
+                まず、
+                <H
+                  args={{ name: 'conditionSectionName', type: 'condition' }}
+                />{' '}
+                の中にある <CustomEmoji type="blankNumberGrey" /> が{' '}
+                <EmojiNumber number={0} /> かどうかチェックします。
+              </Em>
+            </P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  もし <EmojiNumber number={0} /> なら、{' '}
+                  <H
+                    args={{ name: 'conditionSectionName', type: 'trueCase' }}
+                  />{' '}
+                  の中にある <CustomEmoji type="blankNumberPurple" />{' '}
+                  が残ります。
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  もし <EmojiNumber number={0} /> でなければ、
+                  <H
+                    args={{ name: 'conditionSectionName', type: 'falseCase' }}
+                  />{' '}
+                  の中にある <CustomEmoji type="blankNumberPink" /> が残ります。
+                </Em>
+              </UlLi>
+            </Ul>
+            <EmojiSeparator emojis={['🔢', '↕️', '0️⃣']} />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、「
+                        <Em>
+                          真ん中が <EmojiNumber number={0} /> かどうか？
+                        </Em>
+                        」という「
+                        <Strong>条件</Strong>」によって上下に「
+                        <Strong>分岐</Strong>」するから、「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」なのか。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能と関連がある</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」は、
+                        <Strong>
+                          実は計算箱にもともと備わっていた隠れ機能
+                        </Strong>
+                        なんです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['✨', '↕️', '✨']}
+              description={<>計算箱に備わっていた隠れ機能</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        へー、そんなこと、ラムダ村の俺らは誰も知らなかったぞ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうなんです。「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」は
+                        <Em>
+                          あまり役に立たないので、いつしか忘れ去られてしまった
+                        </Em>
+                        のです。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかに、「
+                        <Em>
+                          真ん中が <EmojiNumber number={0} /> かどうか？
+                        </Em>
+                        」をチェックできても、何の役にも立たなさそうだけど…
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        しかし、この「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」は、
+                        <Em>
+                          実は「
+                          <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」と関連がある
+                        </Em>
+                        のです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>↕️</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                  」は、
+                  <br />「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」と関連がある
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>え、そうなの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        はい。ここが重要なのですが…村人のみなさんは「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を弁当箱で再現できずに苦戦していましたよね。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>うん、どうしていいか全然分からない…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        実は、まず「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」を弁当箱で再現することができれば、「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を弁当箱で再現できてしまうんです！
+                      </P>
+                      <P>その理由は、また後に説明しますが…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>↕️</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                  」を
+                  <br />
+                  弁当箱で再現できれば…
+                </>
+              }
+            />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」も
+                  <br />
+                  弁当箱で再現できる！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なんと！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        だからまずは、「<Strong>条件分岐の機能</Strong>{' '}
+                        <Emoji>↕️</Emoji>
+                        」を弁当箱で再現してみてください！
+                      </P>
+                      <P>
+                        これが解ければ、「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>
+                        」を弁当箱で再現するのに一歩近づきますよ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を…
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  <Strong>弁当箱で再現できたら…</Strong>
+                </>
+              }
+            />
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を
+              <br />
+              再現するのに一歩近づく！
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>そうか。よーし、やってみよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              というわけで、次のページでは、「<Strong>条件分岐の機能</Strong>{' '}
+              <Emoji>↕️</Emoji>」を弁当箱で再現してみます。次に進みましょう！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/12.en.tsx b/src/contents/12.en.tsx
index 5f4ca258b..7d7a3cbbe 100644
--- a/src/contents/12.en.tsx
+++ b/src/contents/12.en.tsx
@@ -1,4 +1,1009 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Strong, Em, Ul, UlLi } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import TwoColGrid from 'src/components/TwoColGrid'
+import Emoji from 'src/components/Emoji'
+import InlineBorder from 'src/components/InlineBorder'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        type: 'summary',
+        title: <>本格的に上級向けになります</>,
+        content: (
+          <>
+            <P>
+              <Strong>このページから、本格的に上級向けになります。</Strong>
+              前のページに比べて、読むのに時間がかかるかもしれません。
+            </P>
+            <EmojiSeparator
+              emojis={['🤔', '🤔', '🤔']}
+              description={<>本格的に上級向けになります！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>条件分岐の再現</>,
+        content: (
+          <>
+            <P>
+              村人たちは与えられたアドバイスをもとに、「
+              <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+              」を弁当箱で再現しようとしていました。
+            </P>
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を…
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  <Strong>弁当箱で再現できる？</Strong>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        復習すると、上の計算箱は、
+                        <Strong>
+                          もし <InlineBorder type="condition" /> に{' '}
+                          <EmojiNumber number={0} /> を入れたら下の{' '}
+                          <CustomEmoji type="blankNumberPurple" /> が残り…
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dqwh>
+              <InlineBorder type="condition" /> に <EmojiNumber number={0} />{' '}
+              を入れた場合…
+            </R.Dqwh>
+            <ExpressionRunnerSeparator />
+            <R.Vwvb>
+              <InlineBorder type="trueCase" /> に入っている{' '}
+              <CustomEmoji type="blankNumberPurple" /> が残る
+            </R.Vwvb>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        そして、
+                        <Strong>
+                          もし <InlineBorder type="condition" /> に{' '}
+                          <EmojiNumber number={0} /> 以外の数字を入れたら、上の{' '}
+                          <CustomEmoji type="blankNumberPink" />{' '}
+                          が残るんだよな。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Glbk>
+              <InlineBorder type="condition" /> に <EmojiNumber number={0} />{' '}
+              以外の数字を入れた場合…
+            </R.Glbk>
+            <ExpressionRunnerSeparator />
+            <R.Rtza>
+              <InlineBorder type="falseCase" /> に入っている{' '}
+              <CustomEmoji type="blankNumberPink" /> が残る
+            </R.Rtza>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        これを弁当箱で再現するには、どうすればいいんだろう…？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>サヤちゃんの案</>,
+        content: (
+          <>
+            <P>するといつものように、サヤちゃんが何かひらめいたようです。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>サヤもちょっと考えてみた！これを見てくれる？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を…
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <R.Sdta>
+              <Emoji>👧🏻</Emoji> 弁当箱で再現してみた！
+            </R.Sdta>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        なんと！じゃあ、これが本当に再現できてるか、確かめてみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>再現できてるか確かめよう</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          まず、サヤの弁当箱の一番下の「
+                          <Strong>
+                            <CustomEmoji type="blankNumberGrey" />{' '}
+                            に変換できる弁当箱
+                          </Strong>
+                          」のところに…
+                        </Em>
+                      </P>
+                      <R.Hhjq>
+                        一番下の{' '}
+                        <Strong>
+                          <CustomEmoji type="blankNumberGrey" />{' '}
+                          に変換できる弁当箱
+                        </Strong>
+                        に…
+                      </R.Hhjq>
+                      <P>
+                        <Em>
+                          <Strong>
+                            こちらの <EmojiNumber number={0} />{' '}
+                            に変換できる弁当箱
+                          </Strong>
+                          を入れてみるね。
+                        </Em>
+                      </P>
+                      <R.Elyq>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'f',
+                            number: 0
+                          }}
+                        />
+                      </R.Elyq>
+                      <P>
+                        入れてみると次のようになるよ。
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nmrp>
+              「
+              <Strong>
+                <CustomEmoji type="blankNumberGrey" /> に変換できる弁当箱
+              </Strong>
+              」のところに、
+              <br />
+              <Strong>
+                <EmojiNumber number={0} /> に変換できる弁当箱
+              </Strong>
+              を入れてみた
+              <br />(<Strong>一番下の黄色の部分</Strong>)
+            </R.Nmrp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <CustomEmoji type="blankNumberPurple" />{' '}
+                        に変換できる弁当箱が残った！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        うん、これって「<Strong>条件分岐の機能</Strong>{' '}
+                        <Emoji>↕️</Emoji>」を使ったときと同じだよね？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を使った場合:
+            </P>
+            <R.Dqwh>
+              <InlineBorder type="condition" /> に <EmojiNumber number={0} />{' '}
+              を入れた場合…
+            </R.Dqwh>
+            <ExpressionRunnerSeparator />
+            <R.Vwvb>
+              <InlineBorder type="trueCase" /> に入っている{' '}
+              <CustomEmoji type="blankNumberPurple" /> が残る
+            </R.Vwvb>
+            <P>
+              <Emoji>👧🏻</Emoji> サヤの弁当箱を使った場合:
+            </P>
+            <R.Ycpk>
+              一番下に <EmojiNumber number={0} /> に変換できる
+              <br />
+              弁当箱を入れた場合…
+            </R.Ycpk>
+            <ExpressionRunnerSeparator />
+            <R.Bndi>
+              <CustomEmoji type="blankNumberPurple" /> が残る
+            </R.Bndi>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかに、
+                        <Strong>
+                          両方とも <EmojiNumber number={0} /> を入れると{' '}
+                          <CustomEmoji type="blankNumberPurple" /> が残る
+                        </Strong>
+                        ね！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={0} /> 以外の数字を入れた場合
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、次は{' '}
+                        <Strong>
+                          <EmojiNumber number={1} /> に変換できる弁当箱を{' '}
+                          <CustomEmoji type="blankNumberGrey" /> に入れてみる
+                        </Strong>
+                        ね！
+                      </P>
+                      <R.Ooya>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'f',
+                            number: 1
+                          }}
+                        />
+                      </R.Ooya>
+                      <P>
+                        入れてみると次のようになるよ。
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Gpat>
+              「
+              <Strong>
+                <CustomEmoji type="blankNumberGrey" /> に変換できる弁当箱
+              </Strong>
+              」のところに、
+              <br />
+              <Strong>
+                <EmojiNumber number={1} /> に変換できる弁当箱
+              </Strong>
+              を入れてみた
+              <br />(<Strong>一番下の黄色の部分</Strong>)
+            </R.Gpat>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        おお、今度は先ほどと逆に、{' '}
+                        <CustomEmoji type="blankNumberPink" />{' '}
+                        に変換できる弁当箱が残った！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        これも、「<Strong>条件分岐の機能</Strong>{' '}
+                        <Emoji>↕️</Emoji>」を使ったときと同じだよね？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を使った場合:
+            </P>
+            <R.Glbk>
+              <InlineBorder type="condition" /> に <EmojiNumber number={1} />{' '}
+              を入れた場合…
+            </R.Glbk>
+            <ExpressionRunnerSeparator />
+            <R.Rtza>
+              <InlineBorder type="falseCase" /> に入っている{' '}
+              <CustomEmoji type="blankNumberPink" /> が残る
+            </R.Rtza>
+            <P>
+              <Emoji>👧🏻</Emoji> サヤの弁当箱を使った場合:
+            </P>
+            <R.Psyv>
+              一番下に <EmojiNumber number={1} /> に変換できる
+              <br />
+              弁当箱を入れた場合…
+            </R.Psyv>
+            <ExpressionRunnerSeparator />
+            <R.Kiiq>
+              <CustomEmoji type="blankNumberPink" /> が残る
+            </R.Kiiq>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかに、
+                        <Strong>
+                          両方とも <EmojiNumber number={1} /> を入れると{' '}
+                          <CustomEmoji type="blankNumberPink" /> が残る
+                        </Strong>
+                        ね！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>やっぱりサヤちゃんが正解？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        とういうことは、やっぱりサヤちゃんの弁当箱が、「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」の再現としては正解なのかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」を…
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <R.Sdta>
+              <Emoji>👧🏻</Emoji> サヤちゃんが弁当箱で再現してみた！
+              <br />
+              <Strong>果たして、これが正解なのか？</Strong>
+            </R.Sdta>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>念のため、最終チェックをしたほうがいいかも！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>最終チェックだって？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="blankNumberPink" />{' '}
+            <CustomEmoji type="blankNumberGrey" />{' '}
+            <CustomEmoji type="blankNumberPurple" /> 全てを埋める
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>いちおう最終チェックとして、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <CustomEmoji type="blankNumberPink" />{' '}
+                            <CustomEmoji type="blankNumberGrey" />{' '}
+                            <CustomEmoji type="blankNumberPurple" />{' '}
+                            の全てを埋めてみて、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            それをサヤの弁当箱でも再現できるかやってみるよ！
+                          </Em>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>ん？どういうこと？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>たとえば、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            条件分岐の機能がある計算箱の{' '}
+                            <CustomEmoji type="blankNumberPink" />{' '}
+                            <CustomEmoji type="blankNumberGrey" />{' '}
+                            <CustomEmoji type="blankNumberPurple" /> に、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            それぞれ <EmojiNumber number={1} />{' '}
+                            <EmojiNumber number={2} />{' '}
+                            <EmojiNumber number={3} /> を入れた場合…
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          最終的に <EmojiNumber number={1} /> が残るよね。
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              <CustomEmoji type="blankNumberPink" />{' '}
+              <CustomEmoji type="blankNumberGrey" />{' '}
+              <CustomEmoji type="blankNumberPurple" /> の部分に、
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <R.Zdpf>
+              <EmojiNumber number={1} /> <EmojiNumber number={2} />{' '}
+              <EmojiNumber number={3} /> を入れた場合、
+              <br />
+              <InlineBorder type="condition" /> が <EmojiNumber number={0} />{' '}
+              ではないので…
+            </R.Zdpf>
+            <ExpressionRunnerSeparator />
+            <R.Rnug>
+              <InlineBorder type="falseCase" /> に入っていた{' '}
+              <EmojiNumber number={1} /> が残る
+            </R.Rnug>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <Em>
+                          サヤの弁当箱の <CustomEmoji type="blankNumberPink" />{' '}
+                          <CustomEmoji type="blankNumberGrey" />{' '}
+                          <CustomEmoji type="blankNumberPurple" /> にも{' '}
+                          <EmojiNumber number={1} /> <EmojiNumber number={2} />{' '}
+                          <EmojiNumber number={3} /> を入れてみるよ。
+                        </Em>
+                      </P>
+                      <P>
+                        これを
+                        <H args={{ name: 'play' }} /> したとき、
+                        <Em>
+                          先ほど同じく結果が <EmojiNumber number={1} /> になれば
+                          <Strong>成功</Strong> <Emoji>🎉</Emoji>{' '}
+                          というわけだよね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Sdta>
+              <Emoji>👧🏻</Emoji> サヤの弁当箱の…
+            </R.Sdta>
+            <ExpressionRunnerSeparator />
+            <R.Jbqw>
+              <CustomEmoji type="blankNumberPink" /> (一番上)に{' '}
+              <EmojiNumber number={1} /> を、
+              <br />
+              <CustomEmoji type="blankNumberGrey" /> (一番下)に{' '}
+              <EmojiNumber number={2} /> を、
+              <br />
+              <CustomEmoji type="blankNumberPurple" /> (上から二番目)に{' '}
+              <EmojiNumber number={3} /> を入れてみた
+            </R.Jbqw>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <Em>
+                <EmojiNumber number={1} /> に変換できる弁当箱
+                <br />
+                になれば<Strong>成功</Strong> <Emoji>🎉</Emoji>
+              </Em>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど。これを実行して計算箱に変換したときに{' '}
+                        <EmojiNumber number={1} /> になれば…
+                      </P>
+                      <P>
+                        サヤちゃんの弁当箱が条件分岐の弁当箱を再現できていると見て間違いないな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>では確かめてみよう！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <EmojiNumber number={1} /> <EmojiNumber number={2} />{' '}
+                        <EmojiNumber number={3} />{' '}
+                        にそれぞれ変換できる弁当箱を入れてみたよ。(黄色の部分)
+                      </P>
+                      <P>
+                        というわけで、
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          複雑なので、<Em>目で追わなくても大丈夫だよ！</Em>
+                        </UlLi>
+                        <UlLi>
+                          ちょっと時間がかかるので、待てない方は下の「
+                          <Strong>
+                            <H args={{ name: 'skipToTheEnd' }} /> →
+                          </Strong>
+                          」を押してね！
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Svbd>
+              黄色の部分は、上から順に
+              <br />
+              <EmojiNumber number={1} /> に変換できる弁当箱、
+              <br />
+              <EmojiNumber number={3} /> に変換できる弁当箱、
+              <br />
+              <EmojiNumber number={2} /> に変換できる弁当箱。
+            </R.Svbd>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        最終的に残ったこちらの弁当箱は、
+                        <EmojiNumber number={1} /> に変換できる弁当箱だね。
+                      </P>
+                      <R.Oclg>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'h',
+                            number: 1
+                          }}
+                        />
+                      </R.Oclg>
+                      <P>
+                        だから、
+                        <EmojiNumber number={1} /> が残ったので、
+                        <Strong>成功</Strong> <Emoji>🎉</Emoji> です！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>やったー、さすがサヤちゃん！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>お見事！サヤちゃん、正解です！</P>
+                      <P>
+                        サヤちゃんの弁当箱は、「<Strong>条件分岐の機能</Strong>{' '}
+                        <Emoji>↕️</Emoji>」を再現しています！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rhoa>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>」は…
+            </R.Rhoa>
+            <ExpressionRunnerSeparator />
+            <R.Sdta>
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱で
+              <br />
+              再現できている！
+            </R.Sdta>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やったー！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ちなみに、
+                        <Em>
+                          以下のような <Emoji>🅰️</Emoji> <Emoji>🅱️</Emoji>{' '}
+                          <CustomEmoji type="C" /> <CustomEmoji type="D" />{' '}
+                          <CustomEmoji type="E" />{' '}
+                          の法則に沿っていれば、それぞれに何の料理が入っていても、条件分岐の機能を再現することができます。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fton>
+              以下の法則に当てはまる弁当箱で
+              <br />
+              あれば、条件分岐の機能を再現できる
+            </R.Fton>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        まとめると、
+                        <Em>
+                          計算箱の「<Strong>条件分岐の機能</Strong>{' '}
+                          <Emoji>↕️</Emoji>
+                          」も、弁当箱で再現することができる
+                        </Em>
+                        のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>↕️</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>↕️</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                  」も、
+                  <br />
+                  弁当箱で「<Strong>再現</Strong>」することができる
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能は？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、条件分岐の機能を再現できたのはいいとして…</P>
+                      <P>
+                        俺らがやりたいのは、「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を弁当箱で再現することなんだけど…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Bwnp>
+                    <CustomEmoji type="plusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Bwnp>
+                </>
+              }
+              right={
+                <>
+                  <R.Ewfr>
+                    <CustomEmoji type="minusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Ewfr>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね。しかし、上級その1でぼくが言ったことを思い出して下さい。
+                      </P>
+                      <P>
+                        「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」は、「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」と<Strong>関連がある</Strong>のです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>↕️</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」は、
+                  <br />「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                  」と関連がある
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        だから、先ほど「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」を弁当箱で再現したことによって、
+                      </P>
+                      <P>
+                        みなさんは「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>
+                        」を弁当箱で再現するのに大きく近づいたのです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>↕️</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>↕️</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                  」を
+                  <br />
+                  弁当箱で再現したことにより…
+                </>
+              }
+            />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」を
+                  <br />
+                  弁当箱で再現するのに大きく近づいた！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん…そう言われても、どういうことやらさっぱり…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <Strong>次のページでまたヒントを出しましょう！</Strong>
+                      </P>
+                      <P>というわけで、先に進んでみてください。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/13.en.tsx b/src/contents/13.en.tsx
index 5f4ca258b..0c9e4b62d 100644
--- a/src/contents/13.en.tsx
+++ b/src/contents/13.en.tsx
@@ -1,4 +1,1286 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  Em,
+  Ul,
+  UlLi,
+  InlineHeader
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import Emoji from 'src/components/Emoji'
+import EmojiNumber from 'src/components/EmojiNumber'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import TwoColGrid from 'src/components/TwoColGrid'
+import InlineBorder from 'src/components/InlineBorder'
+import * as R from 'src/components/Runners'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        type: 'summary',
+        title: <>難易度が上がります</>,
+        content: (
+          <>
+            <P>
+              <Strong>このページからまた難易度がアップします。</Strong>
+              ただ、
+              <Em>
+                内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。
+              </Em>
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🤗', '✨']}
+              description={<>完全に理解する必要はありません！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>とても複雑な弁当箱</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、これから「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>
+                        」を弁当箱で再現するのに役立つヒントを出していきますね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Bwnp>
+                    <CustomEmoji type="plusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Bwnp>
+                </>
+              }
+              right={
+                <>
+                  <R.Ewfr>
+                    <CustomEmoji type="minusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Ewfr>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>まずは、こちらの弁当箱をご覧ください。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bnyo>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              するとどうなる？
+            </R.Bnyo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'tired',
+                  children: (
+                    <>
+                      <P>めちゃくちゃ複雑な弁当箱だなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ここで質問です。
+                        <Strong>
+                          上の弁当箱を、
+                          <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                          すると、どんな結果になるでしょう？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        <Em>そんなの、すぐ答えられるわけないだろう！</Em>
+                        こんな複雑な弁当箱、
+                        <H args={{ name: 'play' }} /> するのもひと苦労だよ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        サヤはすぐ分かったよ！
+                        <H args={{ name: 'runAndConvertToMathbox' }} /> すると、
+                        <Strong>
+                          結果は <EmojiNumber number={4} /> になる
+                        </Strong>
+                        んじゃない？
+                      </P>
+                      <R.Kizi>
+                        <Emoji>👧🏻</Emoji> 結果は <EmojiNumber number={4} />{' '}
+                        になると思う！
+                      </R.Kizi>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          まさにその通り！サヤちゃん、正解です！
+                          <Emoji>🎉</Emoji>
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へ？なんでそんな早く正解が分かるの…？</P>
+                      <P>
+                        <Em>
+                          サヤちゃん、まさか一瞬で頭の中で
+                          <H args={{ name: 'play' }} /> したのかい？
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ううん、そんなことはしていないよ。じゃあ、どうやって解いたかを教えてあげるね！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>計算箱に置き換える・その1</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        まず、
+                        <Em>
+                          一番上の部分と、右の真ん中の部分に注目してみて！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dpaw>
+              一番上の部分と、
+              <br />
+              右の真ん中の部分に注目
+            </R.Dpaw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        あ、
+                        <Em>
+                          一番上の部分をよく見ると、これは{' '}
+                          <EmojiNumber number={3} /> に変換できる弁当箱だ！
+                        </Em>
+                      </P>
+                      <R.Ayrl>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'l',
+                            number: 3
+                          }}
+                        />
+                      </R.Ayrl>
+                      <P>
+                        さらに、
+                        <Em>
+                          右の真ん中の部分をよく見ると、これは{' '}
+                          <EmojiNumber number={2} /> に変換できる弁当箱だ！
+                        </Em>
+                      </P>
+                      <R.Vhte>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'g',
+                            number: 2
+                          }}
+                        />
+                      </R.Vhte>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そう！だから、とりあえずこれらを
+                        <Strong>
+                          <EmojiNumber number={3} /> と{' '}
+                          <EmojiNumber number={2} /> に置き換えてみる
+                        </Strong>
+                        ね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Wgby>
+              それぞれ <EmojiNumber number={3} /> と <EmojiNumber number={2} />{' '}
+              に置き換えてみる
+            </R.Wgby>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なるほど…！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>計算箱に置き換える・その2</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>次に、この右の黄色の部分に注目してみて！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Poha>右の部分に注目</R.Poha>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        これはもしかして…
+                        <Em>
+                          中級その3でやった、
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱かな？
+                        </Em>
+                      </P>
+                      <R.Vcqp>
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱
+                      </R.Vcqp>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        その通り！だから、この部分をいったん{' '}
+                        <Strong>
+                          <CustomEmoji type="plusOne" /> に置き換える
+                        </Strong>
+                        ね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cpdy>
+              <CustomEmoji type="plusOne" /> に置き換えてみる
+            </R.Cpdy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど、だいぶシンプルになってきたぞ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>計算箱に置き換える・その3</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>最後に、右下の全ての部分に注目してみて！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Lxgj>右下の全ての部分に注目</R.Lxgj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        そういればこれは、前回やった「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」に変換できる弁当箱と同じだ！
+                      </P>
+                      <R.Vlhb>
+                        「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」に
+                        <br />
+                        変換できる弁当箱
+                      </R.Vlhb>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そう！だから、右下の部分を「
+                        <Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」に置き換えるんだ。
+                      </P>
+                      <R.Ruou>
+                        「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+                        」に置き換える
+                      </R.Ruou>
+                      <P>
+                        以下のように置き換えてみるよ。
+                        <Strong>
+                          複雑なので、↓の置き換え方は読み飛ばしても大丈夫！
+                        </Strong>
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          上にある <EmojiForLetter letter="f" />{' '}
+                          <CustomEmoji type="plusOne" /> は{' '}
+                          <InlineBorder type="falseCase" /> の部分へ
+                        </UlLi>
+                        <UlLi>
+                          その下にある <EmojiNumber number={2} /> は{' '}
+                          <InlineBorder type="trueCase" /> の部分へ
+                        </UlLi>
+                        <UlLi>
+                          一番下の <EmojiForLetter letter="f" /> は{' '}
+                          <InlineBorder type="condition" /> の部分へ
+                        </UlLi>
+                      </Ul>
+                      <P>置き換えるとこうなります！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Awbq>
+              「<Strong>条件分岐の機能</Strong> <Emoji>↕️</Emoji>
+              」<br />
+              の部分を置き換えた後
+            </R.Awbq>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なんと、超シンプルになった！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>あとは実行するだけ</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        あとは、これを
+                        <H args={{ name: 'play' }} />{' '}
+                        するだけだよ。というわけで、
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Gmzn />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ここまできたら、後は簡単だよね。
+                        <Strong>
+                          <InlineBorder type="condition" /> が{' '}
+                          <EmojiNumber number={3} /> だから、
+                          <InlineBorder type="falseCase" /> に入っている{' '}
+                          <EmojiNumber number={3} />{' '}
+                          <CustomEmoji type="plusOne" /> が残る
+                        </Strong>
+                        んだ。
+                      </P>
+                      <P>
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Uiwl />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ほらね、サヤがさっき言ったように、
+                        <Strong>
+                          最後に <EmojiNumber number={4} /> が残った
+                        </Strong>
+                        でしょう？
+                      </P>
+                      <R.Kizi>
+                        <Emoji>👧🏻</Emoji> 結果は <EmojiNumber number={4} />{' '}
+                        になった！
+                      </R.Kizi>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>たしかに…！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>そのまま実行していたら？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        しかし…
+                        <Em>サヤちゃんがとった手法はズルなんじゃないか？</Em>
+                      </P>
+                      <P>
+                        サヤちゃんは、もともとの弁当箱を、それぞれの要素に対応する計算箱に置き換えてから実行したけど…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bnyo>サヤちゃんは、もともとの弁当箱を…</R.Bnyo>
+            <ExpressionRunnerSeparator />
+            <R.Ghwe>
+              それぞれの要素に対応する計算箱に
+              <br />
+              置き換えてから実行していた
+            </R.Ghwe>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          もともとの弁当箱を、そのまま
+                          <H args={{ name: 'play' }} />{' '}
+                          しても、同じ結果になっていたのかな？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bnyo>
+              <Emoji>🍱</Emoji> もともとの弁当箱を、
+              <br />
+              そのまま
+              <H args={{ name: 'play' }} /> しても、サヤちゃんの
+              <br />
+              手法と同じ結果になっていたか？
+            </R.Bnyo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>では、確かめてみましょう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>そのまま実行してみる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、もともとの弁当箱を
+                        <H args={{ name: 'fastForward' }} />
+                        してみましょう！
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          ステップが非常に多いので、
+                          <Strong>3倍速で早送りします！</Strong>{' '}
+                          <Emoji>⏩</Emoji> <Emoji>⏩</Emoji> <Emoji>⏩</Emoji>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            早送り中は、目に優しくなるように弁当箱を半透明にしています。
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          待てない方は、「
+                          <Strong>
+                            <H args={{ name: 'skipToTheEnd' }} /> →
+                          </Strong>
+                          」を押して下さい！
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ynoy></R.Ynoy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        最後に残った以下の弁当箱は、
+                        <Strong>
+                          <EmojiNumber number={4} /> に変換できる弁当箱
+                        </Strong>
+                        ですね。
+                      </P>
+                      <R.Gmgs>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'j',
+                            number: 4
+                          }}
+                        />
+                      </R.Gmgs>
+                      <P>
+                        つまり、
+                        <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                        すると、結果は <EmojiNumber number={4} /> になるのです。
+                      </P>
+                      <R.Kizi></R.Kizi>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          サヤちゃんのやり方でやったときと、結果が同じになった！
+                        </Strong>
+                      </P>
+                      <P>
+                        ということは、サヤちゃんのやり方は間違ってなかったのか…
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>そういうことですね！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>ここまでの振り返り</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>ここで一旦立ち止まって振り返ってみましょう。</P>
+                      <P>
+                        さきほどサヤちゃんがやったのは、「
+                        <Strong>
+                          弁当箱の一部分を、同じ効果がある計算箱と置き換える
+                        </Strong>
+                        」という手法でした。図で説明すると、以下のような感じですね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ykqf>
+              <Emoji>🍱</Emoji> 弁当箱の一部分を…
+            </R.Ykqf>
+            <ExpressionRunnerSeparator />
+            <R.Ifpo>
+              同じ効果がある <CustomEmoji type="mathBox" /> 計算箱と置き換える
+            </R.Ifpo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        重要なのは、
+                        <Em>
+                          このように弁当箱の一部分を計算箱と置き換えても、
+                          <Strong>実行したら結果は同じになる</Strong>
+                        </Em>
+                        ということです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>弁当箱の一部分を計算箱と置き換えても…</>}
+            />
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <Strong>
+                実行したら
+                <br />
+                結果は同じになる！
+              </Strong>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかに先ほどの場合は、
+                        <Em>
+                          サヤちゃんの手法を使っても、そのまま実行しても、どちらも結果は{' '}
+                          <EmojiNumber number={4} /> になった
+                        </Em>
+                        な。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        はい。
+                        <Em>
+                          複雑な弁当箱は、それぞれの部分をシンプルな計算箱に置き換えると分かりやすくなります。
+                        </Em>
+                      </P>
+                      <P>
+                        <Strong>
+                          結果は変わらないのだから、積極的に置き換えていくべき
+                        </Strong>
+                        ということですね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bnyo>
+              <Emoji>🍱</Emoji> 複雑な弁当箱は…
+            </R.Bnyo>
+            <ExpressionRunnerSeparator />
+            <R.Ghwe>
+              それぞれの部分を
+              <br />
+              <CustomEmoji type="mathBox" /> シンプルな計算箱に置き換えると
+              <br />
+              分かりやすくなる
+            </R.Ghwe>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <Strong>
+                ちなみに、どちらの場合も
+                <br />
+                実行結果は <EmojiNumber number={4} /> になる
+              </Strong>
+            </ExpressionRunnerCaptionOnly>
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能との関係</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        でもさあ…質問なんだけど、
+                        <Em>
+                          この話って、「
+                          <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」と何の関係があるの？
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              noBottomNegativeMargin
+              left={
+                <>
+                  <R.Bwnp>
+                    <CustomEmoji type="plusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Bwnp>
+                </>
+              }
+              right={
+                <>
+                  <R.Ewfr>
+                    <CustomEmoji type="minusOne" /> を{' '}
+                    <CustomEmoji type="blankNumber" /> 回<br />
+                    繰り返す
+                  </R.Ewfr>
+                </>
+              }
+            />
+            <P>すると、サヤちゃんが何かに気づいたようです。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          ねえねえ、もしかしたらサヤ、「
+                          <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                          」を弁当箱で再現できたかもしれない！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['🔁', '👧🏻', '🔁']}
+              description={<>繰り返しの機能を再現できたかも！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>え！サヤちゃん、本当かい？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>うん、それでは説明するね！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>先ほどの弁当箱にいろいろ追加してみる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>こちらが、先ほどの弁当箱だけど…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ghwe>先ほどの弁当箱</R.Ghwe>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱に、以下のように
+                        <Strong>いろいろ追加してみた</Strong>の。
+                        <Em>黄色の部分が追加した部分</Em>だよ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cefx>
+              <Strong>黄色が追加した部分</Strong>
+            </R.Cefx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>ふむふむ…何やら複雑になったなあ。</P>
+                      <P>で、これがどうしたっていうの？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>実行してみると</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、この弁当箱を
+                        <H args={{ name: 'play' }} /> してみて！
+                      </P>
+                      <P>
+                        (
+                        <Em>
+                          次のページで早送りして詳細に解説するけど、今回は早送りは省略します！
+                        </Em>
+                        )
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Htir></R.Htir>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        結果は <EmojiNumber number={5} /> になったよ。
+                      </P>
+                      <P>
+                        早送りしてないから、なぜ <EmojiNumber number={5} />{' '}
+                        になったかは分からないけど…
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        うん、早送りは次のページでやるから、今はとりあえず「
+                        <Em>
+                          なるほど、結果は <EmojiNumber number={5} /> になるんだ
+                        </Em>
+                        」と受け入れてほしい！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        そうか、次のページでまた詳しく説明してくれるんだね。了解だよ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>足し算ができる？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        それよりも重要なのは、
+                        <Em>
+                          この <EmojiNumber number={5} /> って、
+                          <Strong>
+                            実行前の弁当箱に入っていた、
+                            <EmojiNumber number={2} /> と{' '}
+                            <EmojiNumber number={3} /> を足した数
+                          </Strong>
+                          だよね？
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Peiy>
+              実行前の弁当箱に入っていた、
+              <br />
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} /> を足すと{' '}
+              <EmojiNumber number={5} /> になる
+            </R.Peiy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>確かにそうだな…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ということは、この弁当箱は <EmojiNumber number={2} />{' '}
+                        <Emoji>➕</Emoji> <EmojiNumber number={3} />{' '}
+                        を計算しているんじゃないかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Peiy>
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算している？
+            </R.Peiy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        つまり…<Strong>足し算ができる</Strong>ってこと？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>補足:</InlineHeader> 「
+                <Em>
+                  この弁当箱、本当に実行すると <EmojiNumber number={5} />{' '}
+                  になるの？
+                </Em>
+                」と疑われているかもしれませんが、ご安心ください！
+                <Em>
+                  次のページでなぜ実行すると <EmojiNumber number={5} />{' '}
+                  になるのかを詳細に説明します
+                </Em>
+                ので、とりあえず読み進めてみてください！
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>繰り返しを再現できた？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>待てよ、そういえば…</P>
+                      <P>
+                        以下のように計算箱の「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を使っても、
+                        <Em>
+                          <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={3} /> を計算できる
+                        </Em>
+                        よね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qycx>
+              計算箱の「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を使うと
+              <br />
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算できる
+            </R.Qycx>
+            <ExpressionRunnerSeparator />
+            <R.Jwce></R.Jwce>
+            <ExpressionRunnerSeparator />
+            <R.Seie></R.Seie>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        ということは…サヤちゃんの弁当箱は、上の「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を再現できているのか…？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qycx>
+              この「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を使った計算箱は…
+            </R.Qycx>
+            <ExpressionRunnerSeparator />
+            <R.Peiy>
+              以下の弁当箱で再現できている？<Emoji>🤔</Emoji>
+            </R.Peiy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        もしそうなら…「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>
+                        」を弁当箱で再現できた、ということになるぞ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」を
+                  <br />
+                  弁当箱で再現できたかも？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、本当に再現できたのかどうか、次のページで確かめてみるね！先に進むよ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>補足:</InlineHeader>{' '}
+                <Em>もし上に書いてあることが腑に落ちなくてもご心配なく！</Em>
+                次のページで詳細に解説します。
+              </P>
+            </>
+          )
+        }
+      }
+    ]}
+  />
+)
diff --git a/src/contents/14.en.tsx b/src/contents/14.en.tsx
index 5f4ca258b..3fed71da7 100644
--- a/src/contents/14.en.tsx
+++ b/src/contents/14.en.tsx
@@ -1,4 +1,1448 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Strong, Em, Ul, UlLi } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import Emoji from 'src/components/Emoji'
+import EmojiNumber from 'src/components/EmojiNumber'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import InlineBorder from 'src/components/InlineBorder'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import TwoColGrid from 'src/components/TwoColGrid'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        type: 'summary',
+        title: <>最も複雑な弁当箱が登場</>,
+        content: (
+          <>
+            <P>
+              <Strong>今回は、今までで最も複雑な弁当箱が登場します。</Strong>
+            </P>
+            <EmojiSeparator
+              emojis={['⚠️', '🍱', '⚠️']}
+              description={<>最も複雑な弁当箱が登場します</>}
+            />
+            <P>
+              しかしいつも通り、
+              <Em>
+                内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。
+              </Em>
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🤗', '✨']}
+              description={<>完全に理解する必要はありません！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <P>前回では…</P>
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              前回は、
+              <Em>
+                計算箱の「
+                <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                」を、サヤちゃんが考えた弁当箱で再現できるかも？
+              </Em>
+              というところで終わりました。
+            </P>
+            <R.Qycx>
+              この「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を使った計算箱は…
+            </R.Qycx>
+            <ExpressionRunnerSeparator />
+            <R.Peiy>
+              以下の弁当箱で再現できている？<Emoji>🤔</Emoji>
+            </R.Peiy>
+            <P>
+              サヤちゃんの弁当箱は、前回
+              <Em>
+                <H args={{ name: 'play' }} /> してみると{' '}
+                <EmojiNumber number={5} /> になりました。
+              </Em>
+            </P>
+            <P>
+              つまり、「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を使った場合と同じように、
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算できているかのように見えます。
+            </P>
+            <R.Kjba>実行すると…</R.Kjba>
+            <ExpressionRunnerSeparator />
+            <R.Seie>
+              <EmojiNumber number={5} /> になる。ということは
+              <br /> <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算できている？
+            </R.Seie>
+            <P>
+              今回は、本当にこの弁当箱が「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を再現できたのか検証していきましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>途中で何が起きているのか？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        今回は、前回サヤが考えた弁当箱を
+                        <H args={{ name: 'fastForward' }} /> して、
+                        <Strong>
+                          途中、弁当箱がどう変化するかを確認してみる
+                        </Strong>
+                        よ。
+                      </P>
+                      <P>
+                        そうすることで、
+                        <Em>
+                          どいうった経緯で最終的に <EmojiNumber number={5} />{' '}
+                          になるのか
+                        </Em>
+                        を知ることができるからね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Kjba>
+              前回の弁当箱は、
+              <H args={{ name: 'fastForward' }} /> すると…
+            </R.Kjba>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  <Strong>途中、弁当箱がどう変化した後…</Strong>
+                </>
+              }
+            />
+            <ExpressionRunnerSeparator />
+            <R.Seie>
+              最終的に <EmojiNumber number={5} /> になるのか？
+            </R.Seie>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、
+                        <Em>
+                          早送りをすることで、途中で何が起きているか確かめてみようってことだね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>それじゃあ、早送りしてみよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>早送りしてみる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        というわけで、
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            弁当箱の中身がたくさんあるので、スペースの都合上、ひとつひとつの料理を小さく表示しているよ。
+                          </Em>
+                          見にくくてごめん！
+                        </UlLi>
+                        <UlLi>
+                          説明のために、何度も止めながらやっていくよ。
+                        </UlLi>
+                        <UlLi>
+                          複雑なので、<Em>目で追わなくても大丈夫だよ！</Em>
+                        </UlLi>
+                        <UlLi>
+                          ちょっと時間がかかるので、待てない方は下の「
+                          <Strong>
+                            <H args={{ name: 'skipToTheStoppingPoint' }} /> →
+                          </Strong>
+                          」を押してね！
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ovua></R.Ovua>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'tired',
+                  children: (
+                    <>
+                      <P>めちゃくちゃ複雑だなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        でもちょっと立ち止まって考えてみて。まず、この
+                        <Em>真ん中の黄色で示した部分</Em>に注目してくれる？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bras>
+              真ん中の<Strong>黄色の部分</Strong>に注目
+            </R.Bras>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        上の黄色の部分が複雑なので、
+                        <Em>
+                          <Strong>分かりやすくするために、</Strong>そこだけを{' '}
+                          <Emoji>🍱</Emoji>{' '}
+                          のアイコンに置き換えて省略してみると、下のようになる
+                        </Em>
+                        よ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Yyfi>
+              先ほどの弁当箱の<Strong>黄色の部分</Strong>を<br />
+              <Emoji>🍱</Emoji> と置き換えて省略した
+            </R.Yyfi>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>この時点で、</P>
+                      <Ul>
+                        <UlLi>
+                          <Strong>
+                            <InlineBorder type="condition" /> には{' '}
+                            <EmojiNumber number={3} /> が入っている
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                      <P>…ということを覚えておいてね。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Amjx>
+              <Strong>
+                <InlineBorder type="condition" /> には{' '}
+                <EmojiNumber number={3} /> が入っている
+              </Strong>
+            </R.Amjx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>ん？なんでそれを覚えておく必要があるんだい？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>後で大事になってくるからだよ。</P>
+                      <P>
+                        では続きを見てみよう。
+                        <Strong>
+                          <InlineBorder type="condition" /> には{' '}
+                          <EmojiNumber number={3} /> が入っているので、
+                          <InlineBorder type="falseCase" /> のほうが残ります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Avsl></R.Avsl>
+            <ExpressionRunnerSeparator />
+            <R.Fkqu></R.Fkqu>
+            <ExpressionRunnerSeparator />
+            <R.Wjwu></R.Wjwu>
+          </>
+        )
+      },
+      {
+        title: <>2周目は…</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、<Emoji>🍱</Emoji> を省略する前の状態(
+                        <Em>黄色の部分</Em>)に戻すね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ngxc>
+              <Emoji>🍱</Emoji> の部分を…
+            </R.Ngxc>
+            <ExpressionRunnerSeparator />
+            <R.Fkvy>省略前の状態に戻す</R.Fkvy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、続きを見てみよう！
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dwmc></R.Dwmc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        あれ…この黄色の部分は、前回省略したのとまったく同じだ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Tfsi>
+              <Em>
+                黄色の部分は、前回省略したのと
+                <br />
+                まったく同じ
+              </Em>
+            </R.Tfsi>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そう、この部分が<Strong>繰り返される</Strong>んだよね。
+                        <Emoji>🔁</Emoji>
+                      </P>
+                      <P>
+                        では、また
+                        <Strong>
+                          黄色の部分を <Emoji>🍱</Emoji>{' '}
+                          のアイコンで省略してみた
+                        </Strong>
+                        よ。前回と何が違うかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fkat>
+              <Strong>
+                黄色の部分を <Emoji>🍱</Emoji> で省略してみた
+              </Strong>
+            </R.Fkat>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>前回と比べてみると、下の黄色の部分が違うね！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Amjx>
+                    <Strong>前回と比べると…</Strong>
+                  </R.Amjx>
+                </>
+              }
+              right={
+                <>
+                  <R.Qgau>
+                    <Strong>黄色の部分が違う</Strong>
+                  </R.Qgau>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>そう。特に注目すべきなのは以下の二点だよ。</P>
+                      <Ul>
+                        <UlLi>
+                          先ほど <InlineBorder type="condition" /> には{' '}
+                          <EmojiNumber number={3} /> が入っていたが、
+                          <Strong>
+                            今回は <EmojiNumber number={2} /> が入っている
+                          </Strong>
+                        </UlLi>
+                        <UlLi>
+                          <Strong>
+                            一番下に <CustomEmoji type="plusOne" />{' '}
+                            が追加されている
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        ふむふむ…
+                        <Em>
+                          <InlineBorder type="condition" /> に入っていた数字は、
+                          <EmojiNumber number={3} /> から{' '}
+                          <EmojiNumber number={2} /> に「
+                          <Strong>1減った</Strong>」というわけか。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={3} />,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiNumber number={2} />
+              ]}
+              description={
+                <>
+                  <InlineBorder type="condition" /> が1減った
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        じゃあもしかしたら、
+                        <Strong>
+                          このまま続けたら、次は{' '}
+                          <InlineBorder type="condition" /> の数字が{' '}
+                          <EmojiNumber number={1} /> になる
+                        </Strong>
+                        のかも…？
+                      </P>
+                      <P>続けて確かめてみるか。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>3周目は…</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        再度、<Emoji>🍱</Emoji> を省略する前の状態に戻したよ。
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Uwyn></R.Uwyn>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          また真ん中の部分が前回と同じなので、<Emoji>🍱</Emoji>{' '}
+                          のアイコンで省略してみる
+                        </Em>
+                        ね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jjet>黄色の部分は前回と同じなので…</R.Jjet>
+            <ExpressionRunnerSeparator />
+            <R.Cyyp>
+              また <Emoji>🍱</Emoji> で省略してみた
+            </R.Cyyp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>では、前回とまた比べてみよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Kosw>
+                    <Strong>前回と比べると…</Strong>
+                  </R.Kosw>
+                </>
+              }
+              right={
+                <>
+                  <R.Ysxf>
+                    <Strong>黄色の部分が違う</Strong>
+                  </R.Ysxf>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>特に注目すべきなのは…</P>
+                      <Ul>
+                        <UlLi>
+                          先ほど <InlineBorder type="condition" /> には{' '}
+                          <EmojiNumber number={2} /> が入っていたが、
+                          <Strong>
+                            今回は <EmojiNumber number={1} /> が入っている
+                          </Strong>
+                        </UlLi>
+                        <UlLi>
+                          <Strong>
+                            またしても、一番下に <CustomEmoji type="plusOne" />{' '}
+                            が追加されている
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なんとなく、パターンが見えてきたかも…</P>
+                      <P>
+                        特に、
+                        <Em>
+                          <InlineBorder type="condition" /> に入っていた数字は、
+                          <EmojiNumber number={3} /> から{' '}
+                          <EmojiNumber number={2} /> に、
+                          <EmojiNumber number={2} /> から{' '}
+                          <EmojiNumber number={1} /> にと、
+                          <Strong>1ずつ減っている</Strong>よね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={3} />,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiNumber number={2} />,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiNumber number={1} />
+              ]}
+              description={
+                <>
+                  <InlineBorder type="condition" /> が1ずつ減っている
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        ということは、次は{' '}
+                        <Em>
+                          <InlineBorder type="condition" /> が{' '}
+                          <EmojiNumber number={0} /> になるのかな？
+                        </Em>
+                      </P>
+                      <P>
+                        そして、
+                        <Strong>
+                          <InlineBorder type="condition" /> が{' '}
+                          <EmojiNumber number={0} /> になると、
+                          <InlineBorder type="falseCase" /> ではなく{' '}
+                          <InlineBorder type="trueCase" />{' '}
+                          が残るようになるから、繰り返しがストップされる
+                        </Strong>
+                        のかも？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        では、確かめてみよう！<Strong>次が最後だよ！</Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>4周目。これが最後！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>これが最後</Strong>だよ！<Emoji>🍱</Emoji>{' '}
+                        を省略する前の状態に戻したので、
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Snlf></R.Snlf>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          例によって、真ん中の部分が前回と同じなので、
+                          <Emoji>🍱</Emoji> のアイコンで省略してみる
+                        </Em>
+                        ね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Gngw>黄色の部分は前回と同じなので…</R.Gngw>
+            <ExpressionRunnerSeparator />
+            <R.Toem>
+              また <Emoji>🍱</Emoji> で省略してみた
+            </R.Toem>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>では、前回とまた比べてみよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Mibj>
+                    <Strong>前回と比べると…</Strong>
+                  </R.Mibj>
+                </>
+              }
+              right={
+                <>
+                  <R.Kdgv>
+                    <Strong>黄色の部分が違う</Strong>
+                  </R.Kdgv>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <InlineBorder type="condition" /> が{' '}
+                          <EmojiNumber number={0} /> になった！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そう！
+                        <Em>
+                          だから、
+                          <InlineBorder type="trueCase" /> に入っている{' '}
+                          <EmojiNumber number={2} /> が残ることになるね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Afoh></R.Afoh>
+            <ExpressionRunnerSeparator />
+            <R.Msrk>
+              <InlineBorder type="trueCase" /> に入っている{' '}
+              <EmojiNumber number={2} /> が残る
+            </R.Msrk>
+            <ExpressionRunnerSeparator />
+            <R.Jwce></R.Jwce>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        あとは、単純に <EmojiNumber number={2} />{' '}
+                        <CustomEmoji type="plusOne" />{' '}
+                        <CustomEmoji type="plusOne" />{' '}
+                        <CustomEmoji type="plusOne" /> を計算するだけなので…
+                      </P>
+                      <P>
+                        <Strong>
+                          結果は <EmojiNumber number={5} /> になります！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jwce></R.Jwce>
+            <ExpressionRunnerSeparator />
+            <R.Seie>
+              最終結果は <EmojiNumber number={5} />
+            </R.Seie>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>では、ここまでを振り返ってみよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>ここまでの振り返り</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        まず、
+                        <Em>
+                          もともとの弁当箱には数字の <EmojiNumber number={3} />{' '}
+                          と <EmojiNumber number={2} /> が入っていた
+                        </Em>
+                        よね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Peiy>
+              数字の <EmojiNumber number={3} /> と <EmojiNumber number={2} />{' '}
+              が入っていた
+            </R.Peiy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そして
+                        <Em>
+                          <H args={{ name: 'fastForward' }} />{' '}
+                          していくと、終了直前に以下のようになった
+                        </Em>
+                        よね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jwce>終了直前に以下のようになった</R.Jwce>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        これは…
+                        <CustomEmoji type="plusOne" /> を{' '}
+                        <EmojiNumber number={3} />{' '}
+                        回繰り返すから、以下のように「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を使った計算箱とまったく同じだ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qycx>これと全く同じ！</R.Qycx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そう。つまり上の「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を使った計算箱は、今回早送りした弁当箱で再現できるということなんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qycx>
+              この「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」を使った
+              <br />
+              計算箱は…
+            </R.Qycx>
+            <ExpressionRunnerSeparator />
+            <R.Peiy>
+              この弁当箱で「<Strong>再現</Strong>」できる！
+            </R.Peiy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なるほど！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        他にもたとえば、以下のように、
+                        <EmojiNumber number={4} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={6} /> を計算できる計算箱でも…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Owpg>
+              <EmojiNumber number={4} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={6} /> を計算できる計算箱も…
+            </R.Owpg>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>同じように弁当箱で再現することができるよ。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hafp>この弁当箱で再現できる</R.Hafp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        上の弁当箱も早送りすると、先ほどと同じように、終了直前に以下のようになる。だから、繰り返しの機能と同じことができるんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Sskt>
+              先ほどと同じように、
+              <br />
+              早送りが終わる直前に
+              <br />
+              以下のようになり…
+            </R.Sskt>
+            <ExpressionRunnerSeparator />
+            <R.Mbje>
+              <EmojiNumber number={4} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={6} /> を計算できる
+            </R.Mbje>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        まとめると、「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を使って、<Emoji>🅰️</Emoji> <Emoji>➕</Emoji>{' '}
+                        <Emoji>🅱️</Emoji> を計算できる計算箱は…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nmbt>
+              「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>」を使って、
+              <br />
+              <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji>{' '}
+              を計算できる計算箱は…
+            </R.Nmbt>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>次のように弁当箱で再現することができるんだ。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bxuv>
+              この弁当箱で「<Strong>再現</Strong>」できる！
+            </R.Bxuv>
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能を再現できた！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        サヤちゃん、正解です！見事、「
+                        <Strong>繰り返しの機能</Strong>
+                        」を弁当箱で再現しましたね！<Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やったー！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🔁</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」を
+                  <br />
+                  弁当箱で再現できた！<Emoji>🎉</Emoji>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ちなみにですが…下のように、
+                        <Strong>
+                          <CustomEmoji type="minusOne" />{' '}
+                          を繰り返す計算箱は、どうやって弁当箱で再現すればいいか
+                        </Strong>
+                        分かりますか？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jaqs>これはどうやって弁当箱で再現する？</R.Jaqs>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        おそらく、先ほどの弁当箱で右上にあった{' '}
+                        <CustomEmoji type="plusOne" /> を{' '}
+                        <CustomEmoji type="minusOne" />{' '}
+                        に変えるだけでいいんじゃないかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zkon>
+              <Strong>
+                先ほどの弁当箱で右上にあった
+                <br />
+                <CustomEmoji type="plusOne" /> を{' '}
+                <CustomEmoji type="minusOne" /> に変えるだけ(黄色の部分)
+              </Strong>
+            </R.Zkon>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        サヤちゃん、<Strong>その通りです！</Strong>これで、
+                        <CustomEmoji type="minusOne" />{' '}
+                        を繰り返す計算箱を再現できます。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へー、そんなに簡単なんだ！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>魔法のYコンビネータ</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        しかし…弁当箱を使って、計算箱の「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を再現できるのはすごいなあ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>そうですね。ここでひとつ説明したいことがあります。</P>
+                      <P>
+                        さきほど登場した、
+                        <Em>
+                          <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji>{' '}
+                          を計算できる弁当箱の、
+                          <Strong>
+                            下半分に使われていた部分にご注目ください
+                          </Strong>
+                        </Em>
+                        。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xhul>
+              <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji>{' '}
+              を計算できる弁当箱の
+              <br />
+              下半分(黄色)の部分に注目
+            </R.Xhul>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>この下半分の部分がどうかしたの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この下半分の部分は、<Emoji>🅰️</Emoji> <Emoji>➕</Emoji>{' '}
+                        <Emoji>🅱️</Emoji> を計算できる弁当箱だけでなく、
+                        <Emoji>🅰️</Emoji> <Emoji>➖</Emoji> <Emoji>🅱️</Emoji>{' '}
+                        を計算できる弁当箱にも使われていましたよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Anzh>
+              <Emoji>🅰️</Emoji> <Emoji>➖</Emoji> <Emoji>🅱️</Emoji>{' '}
+              を計算できる弁当箱も
+              <br />
+              下半分は同じだった
+            </R.Anzh>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>確かにそうだけど…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        実は、今回登場した弁当箱において、必ず下半分に使われていたこちらの弁当箱が、「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」の再現を可能にしていたのです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xjzx>
+              今回登場した弁当箱において、
+              <br />
+              <Strong>下半分の部分に使われていた</Strong>
+              <br />
+              こちらの弁当箱が、
+              <br />「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」の再現を
+              <br />
+              可能にしていた
+            </R.Xjzx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なんと！これが、繰り返しを可能にしていたのかあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね。ちなみに、この弁当箱には、
+                        <Strong>特殊な呼び名</Strong>があるんですよ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へー、そうなんだ。何ていう呼び名なの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        「<Strong>Yコンビネータ</Strong>
+                        」です。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xjzx>
+              この弁当箱の名は「<Strong>Yコンビネータ</Strong>」
+            </R.Xjzx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        「<Strong>Yコンビネータ</Strong>」かあ。変な名前だね。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ちなみに、以下のような法則に当てはまる弁当箱は、どれも「
+                        <Strong>Yコンビネータ</Strong>」と呼べるんですよ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rjho>
+              この法則に当てはまる弁当箱は全部
+              <br />「<Strong>Yコンビネータ</Strong>」
+            </R.Rjho>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        そうなんだ。でもすごいね。
+                        <Strong>
+                          こんなシンプルな、
+                          <Emoji>🅰️</Emoji> と <Emoji>🅱️</Emoji>{' '}
+                          の二種類の料理しかない弁当箱が、繰り返しを可能にするなんて…
+                        </Strong>
+                      </P>
+                      <P>
+                        <Strong>まるで、魔法みたい！</Strong>
+                        <Emoji size="mdlg">🧙‍♀️</Emoji>{' '}
+                        <Emoji size="mdlg">✨</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        確かに…まさに、「<Strong>魔法のYコンビネータ</Strong>
+                        」だね！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['✨', '🧙‍♀️', '✨']}
+              description={
+                <>
+                  <Strong>魔法のYコンビネータ</Strong>
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能を返してもらえる？</>,
+        content: (
+          <>
+            <P>
+              「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」をみごと弁当箱で再現した村人たちは、悪魔のもとに行きました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>
+                        どうだ、「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>」を弁当箱で再現したぞ！
+                      </P>
+                      <P>
+                        約束通り、「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」は返してもらう！これで、計算箱のすべての機能をお前から取り返せるぞ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>うぐぐ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              村人たちの命運やいかに？次の<Strong>上級最後のページ</Strong>
+              で確かめてみましょう！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/15.en.tsx b/src/contents/15.en.tsx
index 5f4ca258b..3b254f22e 100644
--- a/src/contents/15.en.tsx
+++ b/src/contents/15.en.tsx
@@ -1,4 +1,1275 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  InlineHeader,
+  Strong,
+  Em,
+  Ul,
+  UlLi
+} from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import Emoji from 'src/components/Emoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiNumber from 'src/components/EmojiNumber'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import TwoColGrid from 'src/components/TwoColGrid'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>勝利！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では約束通り、「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>」を返してやろう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['🔁', '😈', '🔁']}
+              description={<>繰り返しの機能を返してもらった！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>
+                        やった！これで、
+                        <Em>計算箱のすべての機能を返してもらった</Em>
+                        ぞ！悪魔に勝った！
+                        <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={<>計算箱のすべての機能を返してもらった！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        これで、以前と同じように、計算箱を使って日々の計算を行うことができる！
+                      </P>
+                      <P>
+                        難しい足し算や引き算でも、計算箱があればへっちゃらだ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Nmbt>
+                    <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji> を計算
+                  </R.Nmbt>
+                </>
+              }
+              right={
+                <>
+                  <R.Jaqs>
+                    <Emoji>🅰️</Emoji> <Emoji>➖</Emoji> <Emoji>🅱️</Emoji> を計算
+                  </R.Jaqs>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        それについてなんだが…
+                        <Strong>
+                          ちょっと伝えたいことがある。聞いてもらえるか？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>ん…なんだ？まだ何か言いたいことがあるのか？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>この弁当箱は…？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>まず、こちらの弁当箱を見てみな。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hvfb />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なんだ、この弁当箱は？</P>
+                      <P>
+                        <Em>
+                          上のほうに、
+                          <CustomEmoji type="blankNumberGreen" /> と{' '}
+                          <CustomEmoji type="blankNumberBrown" />{' '}
+                          を入れる部分があるけれど…
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        とりあえず、
+                        <CustomEmoji type="blankNumberGreen" /> と{' '}
+                        <CustomEmoji type="blankNumberBrown" />{' '}
+                        に適当な数字を当てはめてみな！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        分かった。じゃあ、こちらの{' '}
+                        <Strong>
+                          <EmojiNumber number={2} /> に変換できる弁当箱
+                        </Strong>
+                        と…
+                      </P>
+                      <R.Wopl>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'e',
+                            number: 2
+                          }}
+                        />
+                      </R.Wopl>
+                      <P>
+                        こちらの{' '}
+                        <Strong>
+                          <EmojiNumber number={3} /> に変換できる弁当箱
+                        </Strong>
+                        を…
+                      </P>
+                      <R.Dmrz>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'g',
+                            number: 3
+                          }}
+                        />
+                      </R.Dmrz>
+                      <P>
+                        <CustomEmoji type="blankNumberGreen" /> と{' '}
+                        <CustomEmoji type="blankNumberBrown" />{' '}
+                        の部分に入れてみよう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hvfb>
+              <CustomEmoji type="blankNumberGreen" /> と{' '}
+              <CustomEmoji type="blankNumberBrown" /> の部分に…
+            </R.Hvfb>
+            <ExpressionRunnerSeparator />
+            <R.Tpyg>
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+              に変換できる
+              <br />
+              弁当箱を入れてみた
+            </R.Tpyg>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では、これを
+                        <H args={{ name: 'play' }} />{' '}
+                        するとどうなるか確かめてみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>早送りしてみると…</>,
+        content: (
+          <>
+            <P>
+              では、
+              <H args={{ name: 'pressFastForward', skipColon: true }} />。
+            </P>
+            <Ul>
+              <UlLi>
+                複雑なので、<Em>目で追わなくても大丈夫です！</Em>
+              </UlLi>
+              <UlLi>
+                ちょっと時間がかかるので、待てない方は下の「
+                <Strong>
+                  <H args={{ name: 'skipToTheEnd' }} /> →
+                </Strong>
+                」を押してください！
+              </UlLi>
+            </Ul>
+            <R.Ugvz></R.Ugvz>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        結果は…
+                        <Em>
+                          <EmojiNumber number={5} />{' '}
+                          に変換できる弁当箱になった！
+                        </Em>
+                      </P>
+                      <R.Xkcm>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'c',
+                            number: 5
+                          }}
+                        />
+                      </R.Xkcm>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>足し算ができる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <Strong>
+                          もともと <CustomEmoji type="blankNumberGreen" /> と{' '}
+                          <CustomEmoji type="blankNumberBrown" />{' '}
+                          に入れた数字は何だった
+                        </Strong>
+                        かな？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          もともと入れたのは <EmojiNumber number={2} /> と{' '}
+                          <EmojiNumber number={3} /> だった。そして、結果は{' '}
+                          <EmojiNumber number={5} /> になった…
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Mlnt>
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+              を入れると…
+            </R.Mlnt>
+            <ExpressionRunnerSeparator />
+            <R.Ryqp>
+              <EmojiNumber number={5} /> に変換できる弁当箱に
+            </R.Ryqp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        ということはもしかして…<Strong>足し算を計算した</Strong>
+                        のか？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>その通りだ！先ほどの弁当箱は、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <CustomEmoji type="blankNumberGreen" /> と{' '}
+                            <CustomEmoji type="blankNumberBrown" />{' '}
+                            に数字を入れ、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                          すると…
+                        </UlLi>
+                        <UlLi>
+                          <Strong>
+                            結果は <CustomEmoji type="blankNumberGreen" />{' '}
+                            <Emoji>➕</Emoji>{' '}
+                            <CustomEmoji type="blankNumberBrown" /> になるんだ。
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hvfb>
+              <CustomEmoji type="blankNumberGreen" /> と{' '}
+              <CustomEmoji type="blankNumberBrown" /> に数字を入れ、
+              <br />
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると…
+            </R.Hvfb>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="blankNumberGreen" />,
+                <Emoji>➕</Emoji>,
+                <CustomEmoji type="blankNumberBrown" />
+              ]}
+              description={
+                <>
+                  結果は <CustomEmoji type="blankNumberGreen" />{' '}
+                  <Emoji>➕</Emoji> <CustomEmoji type="blankNumberBrown" />{' '}
+                  になる
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        つまり、<Strong>足し算ができる弁当箱</Strong>
+                        というわけだな。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なんてこった…</P>
+                      <P>
+                        前回、俺らは <Emoji>🅰️</Emoji> <Emoji>➕</Emoji>{' '}
+                        <Emoji>🅱️</Emoji> を計算するのに、以下のように「
+                        <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を再現できる弁当箱を使っていたが…
+                      </P>
+                      <R.Bxuv>
+                        <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji>{' '}
+                        を計算
+                      </R.Bxuv>
+                      <P>
+                        こんな複雑なことをしなくても、弁当箱で足し算をすることができるというわけか。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>まさに、その通りだ！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>もうひとつの弁当箱</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では、こちらの弁当箱は何ができる弁当箱か分かるかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vqyl></R.Vqyl>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>先ほどの弁当箱と似ているけど、微妙に違うなあ…</P>
+                      <P>
+                        前回同様、
+                        <Strong>
+                          <EmojiNumber number={2} /> と{' '}
+                          <EmojiNumber number={3} /> に変換できる弁当箱を{' '}
+                          <CustomEmoji type="blankNumberGreen" /> と{' '}
+                          <CustomEmoji type="blankNumberBrown" /> に入れて、
+                          <H args={{ name: 'fastForward' }} /> してみよう。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ちなみに、今回はかなり時間がかかるので、待てない場合は「
+                        <Strong>
+                          <H args={{ name: 'skipToTheEnd' }} /> →
+                        </Strong>
+                        」を押してもいいぞ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Wzqv>
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+              に変換できる
+              <br />
+              弁当箱を入れてみた
+            </R.Wzqv>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        結果は…
+                        <Em>
+                          <EmojiNumber number={6} />{' '}
+                          に変換できる弁当箱になった！
+                        </Em>
+                      </P>
+                      <R.Edzu>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'c',
+                            number: 6
+                          }}
+                        />
+                      </R.Edzu>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>掛け算ができる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        今回は、もともと <CustomEmoji type="blankNumberGreen" />{' '}
+                        と <CustomEmoji type="blankNumberBrown" /> に入れたのは{' '}
+                        <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+                        だった。そして、結果は <EmojiNumber number={6} />{' '}
+                        になった…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nvdn>
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+              を入れると…
+            </R.Nvdn>
+            <ExpressionRunnerSeparator />
+            <R.Uhqo>
+              <EmojiNumber number={6} /> に変換できる弁当箱に
+            </R.Uhqo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        これはもしかして…<Strong>掛け算を計算できる</Strong>
+                        のか？
+                      </P>
+                      <EmojiSeparator
+                        emojis={['✨', '✖️', '✨']}
+                        description={<>掛け算ができる？</>}
+                      />
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>その通りだ！先ほどの弁当箱は、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <CustomEmoji type="blankNumberGreen" /> と{' '}
+                            <CustomEmoji type="blankNumberBrown" />{' '}
+                            に数字を入れ、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                          すると…
+                        </UlLi>
+                        <UlLi>
+                          <Strong>
+                            結果は <CustomEmoji type="blankNumberGreen" />{' '}
+                            <Emoji>✖️</Emoji>{' '}
+                            <CustomEmoji type="blankNumberBrown" /> になるんだ。
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vqyl>
+              <CustomEmoji type="blankNumberGreen" /> と{' '}
+              <CustomEmoji type="blankNumberBrown" /> に数字を入れ、
+              <br />
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると…
+            </R.Vqyl>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="blankNumberGreen" />,
+                <Emoji>✖️</Emoji>,
+                <CustomEmoji type="blankNumberBrown" />
+              ]}
+              description={
+                <>
+                  結果は <CustomEmoji type="blankNumberGreen" />{' '}
+                  <Emoji>✖️</Emoji> <CustomEmoji type="blankNumberBrown" />{' '}
+                  になる
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        つまり、<Strong>掛け算ができる弁当箱</Strong>
+                        というわけだな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['🍱', '✖️', '🍱']}
+              description={<>掛け算ができる弁当箱が存在した！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>四則演算ができる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        すごい…！
+                        <Strong>
+                          計算箱では掛け算ができなかったけど、弁当箱を使えば掛け算ができるのか！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そうだ。ちなみに今回は紹介する時間がないが、
+                        <Strong>ふたつの数字の引き算や割り算</Strong>
+                        も弁当箱で行うことができるぞ。
+                      </P>
+                      <P>
+                        つまり、
+                        <Em>弁当箱は四則演算の全てを行うことができる</Em>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['➕', '✖️', '🍱', '➖', '➗']}
+              description={<>弁当箱は四則演算の全てができる</>}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>ここからは、雰囲気で読み進めてみてください</>,
+        content: (
+          <>
+            <P>
+              ここから先は非常に複雑なので、雰囲気で読み進めてください！内容を完全に理解する必要はありません。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🤗', '✨']}
+              description={<>完全に理解する必要はありません！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>Yコンビネータと組み合わせると</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        また、前回「<Strong>繰り返しの機能</Strong>{' '}
+                        <Emoji>🔁</Emoji>」を再現するのに使った「
+                        <Strong>Yコンビネータ</Strong>
+                        」の弁当箱と組み合わせることで、さらに複雑な計算をすることもできる。
+                      </P>
+                      <R.Xjzx>
+                        前回「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                        」を
+                        <br />
+                        再現するのに使った「<Strong>Yコンビネータ</Strong>」
+                      </R.Xjzx>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>どういうこと？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        たとえば、「<Strong>階乗</Strong>
+                        」という計算がある。これは「
+                        <Strong>
+                          ある数からはじめて、1を引いていき、
+                          <EmojiNumber number={1} />{' '}
+                          になるまで繰り返し掛け算をする
+                        </Strong>
+                        」という計算だ。
+                      </P>
+                      <P>
+                        たとえば、「
+                        <EmojiNumber number={3} />{' '}
+                        の階乗」は、以下のようになる。実際に計算すると{' '}
+                        <EmojiNumber number={6} /> になるぞ。
+                      </P>
+                      <EmojiSeparator
+                        size="sm"
+                        nodes={[
+                          <EmojiNumber number={3} />,
+                          <Emoji>✖️</Emoji>,
+                          <EmojiNumber number={2} />,
+                          <Emoji>✖️</Emoji>,
+                          <EmojiNumber number={1} />
+                        ]}
+                        description={
+                          <>
+                            <EmojiNumber number={3} /> の階乗。
+                            <br />
+                            実際に計算すると <EmojiNumber number={6} /> になる
+                          </>
+                        }
+                      />
+                      <P>
+                        同じように、「
+                        <EmojiNumber number={4} />{' '}
+                        の階乗」は、以下のようになる。実際に計算すると{' '}
+                        <EmojiNumber number={24} /> になるぞ。
+                      </P>
+                      <EmojiSeparator
+                        size="sm"
+                        nodes={[
+                          <EmojiNumber number={4} />,
+                          <Emoji>✖️</Emoji>,
+                          <EmojiNumber number={3} />,
+                          <Emoji>✖️</Emoji>,
+                          <EmojiNumber number={2} />,
+                          <Emoji>✖️</Emoji>,
+                          <EmojiNumber number={1} />
+                        ]}
+                        description={
+                          <>
+                            <EmojiNumber number={4} /> の階乗。
+                            <br />
+                            実際に計算すると <EmojiNumber number={24} /> になる
+                          </>
+                        }
+                      />
+                      <P>
+                        <Strong>階段</Strong>
+                        みたいに1ずつ数字が減っていくから「階」乗、と覚えておけばいい。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>ふむふむ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        この「<Strong>階乗</Strong>」は、先ほどの
+                        <Strong>掛け算ができる弁当箱</Strong>と、
+                        <Strong>Yコンビネータ</Strong>
+                        の弁当箱を組み合わせて計算することができるんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vqyl>
+              <CustomEmoji type="blankNumberGreen" /> と{' '}
+              <CustomEmoji type="blankNumberBrown" /> の<br />
+              掛け算を計算できる弁当箱と…
+            </R.Vqyl>
+            <R.Xjzx>
+              「<Strong>Yコンビネータ</Strong>」の
+              <br />
+              弁当箱を組み合わせることで…
+            </R.Xjzx>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              nodes={[
+                <EmojiNumber number={4} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={3} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={2} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={<>階乗を計算することができる！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へー、そうなの！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>掛け算の省略表記</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        まず、
+                        <Strong>
+                          掛け算を計算できる弁当箱を、以下のように{' '}
+                          <Emoji>✖️</Emoji>印で省略してみる。
+                        </Strong>
+                        こうしたほうがひと目で見て分かりやすいからな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vqyl>掛け算を計算できる弁当箱を…</R.Vqyl>
+            <ExpressionRunnerSeparator />
+            <R.Jtxf>
+              <Emoji>✖️</Emoji>印で省略してみる
+            </R.Jtxf>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <Emoji>✖️</Emoji>
+                        印を使うことで、見た目がシンプルになった！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>階乗の計算</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>それでは、階乗を計算する弁当箱をお見せしよう。</P>
+                      <P>
+                        こちらの弁当箱は、<Em>黄色の部分</Em>に、
+                        <Em>
+                          先ほど紹介した掛け算の弁当箱(
+                          <Emoji>✖️</Emoji>
+                          印)と、Yコンビネータの弁当箱が入っている
+                        </Em>
+                        。
+                      </P>
+                      <P>
+                        この弁当箱を実行すると、
+                        <Strong>
+                          <EmojiNumber number={3} /> の階乗、すなわち{' '}
+                          <EmojiNumber number={3} /> <Emoji>✖️</Emoji>{' '}
+                          <EmojiNumber number={2} /> <Emoji>✖️</Emoji>{' '}
+                          <EmojiNumber number={1} /> を計算してくれる
+                        </Strong>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qaoa>
+              <Strong>掛け算ができる弁当箱</Strong>(<Emoji>✖️</Emoji>印)と
+              <br />
+              <Strong>Yコンビネータ</Strong>
+              の弁当箱を使うことで…
+            </R.Qaoa>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <EmojiNumber number={3} /> の階乗、すなわち
+              <br />
+              <EmojiNumber number={3} /> <Emoji>✖️</Emoji>{' '}
+              <EmojiNumber number={2} /> <Emoji>✖️</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる！
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へー、すごい！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          前のページで登場した弁当箱と、右上の部分が微妙に違う
+                        </Em>
+                        のが分かるかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Spki>
+                    <InlineHeader>
+                      前回の弁当箱
+                      <br />(<Emoji>🅰️</Emoji>
+                      <Emoji>➕</Emoji>
+                      <Emoji>🅱️</Emoji> を計算)
+                      <br />
+                      の右上部分:
+                    </InlineHeader>
+                  </R.Spki>
+                </>
+              }
+              right={
+                <>
+                  <R.Ddrg>
+                    <InlineHeader>
+                      今回の弁当箱
+                      <br />
+                      (階乗を計算)
+                      <br />
+                      の右上部分:
+                    </InlineHeader>
+                  </R.Ddrg>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>完全には理解できなくていいが…</P>
+                      <P>
+                        この
+                        <Em>
+                          右上部分の違いが、前回のように足し算を計算するか、今回のように階乗を計算するかの違いを生んでいる
+                        </Em>
+                        んだな。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そして、先ほどの弁当箱の
+                        <Strong>
+                          一番上の <EmojiNumber number={3} />{' '}
+                          を他の数字に変えれば、その数字の階乗を計算できるというわけだ。
+                        </Strong>
+                      </P>
+                      <P>
+                        たとえば <EmojiNumber number={4} /> に変えると、
+                        <EmojiNumber number={4} /> の階乗を計算できる。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rwuw>
+              上の数字を <EmojiNumber number={4} /> に変えると…
+            </R.Rwuw>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <EmojiNumber number={4} /> の階乗、すなわち
+              <br />
+              <EmojiNumber number={4} /> <Emoji>✖️</Emoji>{' '}
+              <EmojiNumber number={3} /> <Emoji>✖️</Emoji>{' '}
+              <EmojiNumber number={2} /> <Emoji>✖️</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる！
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>へー、すごいなあ。完璧には理解できていないけど…</P>
+                      <Ul>
+                        <UlLi>
+                          「<Strong>階乗</Strong>」は、「
+                          <Em>
+                            <EmojiNumber number={1} /> になるまで掛け算を『
+                            <Strong>繰り返す</Strong>』
+                          </Em>
+                          」ということだから、
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            「繰り返す」のを可能にする「
+                            <Strong>Yコンビネータ</Strong>
+                            」の弁当箱が必要
+                          </Em>
+                          というわけかな…？
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        その通りだ！上の弁当箱を完璧に理解するには、やはり早送りしてみないといけないが、今回は時間の都合上省略する。
+                      </P>
+                      <P>それでもわたしが伝えたかったのは、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <Strong>Yコンビネータ</Strong>
+                            の弁当箱は、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            掛け算を計算できる弁当箱と組み合わせることによって、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>階乗のように複雑な計算を行うこともできる</Em>
+                        </UlLi>
+                      </Ul>
+                      <P>ということだ。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xjzx>
+              <Strong>Yコンビネータ</Strong>の弁当箱は…
+            </R.Xjzx>
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              emojis={['🍱', '✖️', '🍱']}
+              description={
+                <>
+                  掛け算を計算できる弁当箱と
+                  <br />
+                  組み合わせることによって…
+                </>
+              }
+            />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="sm"
+              nodes={[
+                <EmojiNumber number={4} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={3} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={2} />,
+                <Emoji>✖️</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={
+                <>
+                  <Strong>階乗</Strong>のような複雑な計算もできる！
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>弁当箱にできない計算はあるの？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        以上をまとめると…
+                        <Strong>
+                          弁当箱は、計算箱よりもっと複雑な計算ができるということだ
+                        </Strong>
+                        。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" size="sm" />,
+                <Emoji size="semilg">🍱</Emoji>,
+                <CustomEmoji type="mathBox" size="sm" />
+              ]}
+              description={<>弁当箱は、計算箱以上にパワフル！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ逆に質問するけど…
+                        <Strong>弁当箱にできない計算はあるのかい？</Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>いい質問だな。それは、次のページで説明しよう！</P>
+                      <P>
+                        <Strong>次が最後のページ、エピローグだ！</Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>長かった…やっと終わるのか！じゃあ、先に進もう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/16.en.tsx b/src/contents/16.en.tsx
index 5f4ca258b..42a3efe04 100644
--- a/src/contents/16.en.tsx
+++ b/src/contents/16.en.tsx
@@ -1,4 +1,1211 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  InlineHeader,
+  Em,
+  ExternalLink,
+  Img,
+  CenteredCode,
+  Pre,
+  Code,
+  Ol,
+  OlLi,
+  Hr
+} from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiNumber from 'src/components/EmojiNumber'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import H from 'src/components/H'
+import Emoji from 'src/components/Emoji'
+import CustomEmoji from 'src/components/CustomEmoji'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import * as R from 'src/components/Runners'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import CardContent from 'src/components/CardContent'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>これが最後のページです！</>,
+        content: (
+          <>
+            <P>
+              これが最後のページです。ここまで読んでくださり、ありがとうございました！
+            </P>
+            <EmojiSeparator
+              emojis={['🎉', '🤗', '🎉']}
+              description={<>お疲れ様でした！</>}
+            />
+            <P>
+              さて、前回の最後に、ラムダ村の村人は次のような質問をしました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>弁当箱にできない計算はあるのかな？</Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              この質問に答えるためには、「
+              <Strong>そもそも弁当箱というアイデアはどこから来たのか</Strong>
+              」という質問にまず答える必要があります。
+            </P>
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  そもそも、弁当箱というアイデアは
+                  <br />
+                  どこから来たのか？
+                </>
+              }
+            />
+            <P>
+              そのためには、
+              <Strong>ラムダ村の世界ではなく、現実世界の歴史</Strong>
+              を学ばないといけません。
+            </P>
+            <EmojiSeparator
+              emojis={['📜', '🧐', '📚']}
+              description={<>現実世界の歴史を学ばないといけない</>}
+            />
+            <P>
+              というわけで、これから現実世界の歴史の話をします。ラムダ村の話からはいったん離れますが、このページの最後で戻ってきます。
+            </P>
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader>{' '}
+                これからコンピュータやコンピュータサイエンスの歴史について語りますが、
+                <Em>
+                  簡潔さを優先するために、正確性をあえて犠牲にしたり、ほとんどの出来事を省いたりしています
+                </Em>
+                。
+              </P>
+              <P>
+                コンピュータ史に詳しい方のなかには、怒り心頭に発する方が出てくるかもしれません。雑な歴史の紹介であることをお許しください。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>そもそもコンピュータとは何か</>,
+        content: (
+          <>
+            <P>
+              この記事のタイトルは「
+              <InlineHeader>
+                <Em>コンピュータ</Em>サイエンスと魔法のYコンビネータ
+              </InlineHeader>
+              」ですが、はじめに、「
+              <Strong>そもそもコンピュータとは何か</Strong>
+              」という質問について考えてみましょう。
+            </P>
+            <EmojiSeparator
+              emojis={['🤔', '💻', '❓']}
+              description={<>そもそもコンピュータとは何か？</>}
+            />
+            <P>
+              「コンピュータ」というとパソコンやタブレット、スマホ、ロボットを思い浮かべる方が多いかもしれません。
+            </P>
+            <EmojiSeparator emojis={['💻', '📱', '🤖']} />
+            <P>
+              しかし、コンピュータは本質的には「<Strong>計算機</Strong>
+              」なのです。
+            </P>
+            <EmojiSeparator
+              emojis={['➕', '✖️', '💻', '➖', '➗']}
+              description={
+                <>
+                  コンピュータは本質的には「<Strong>計算機</Strong>」
+                </>
+              }
+            />
+            <P>
+              コンピュータを使えば情報を瞬時に検索できたり、美しいCGを描いたりすることができます。最近はAIを使って顔認証や会話ができるようになりました。
+            </P>
+            <P>
+              <Em>
+                こういった便利な機能は、
+                コンピュータが大量の計算を瞬時に行えるからこそ実現されているのです。
+              </Em>
+            </P>
+            <P>
+              たとえば、検索エンジンは膨大な数のデータをランク付けするために計算を行います。AIが顔認証をするときは、センサーが取り込んだ顔のデータを数値化し、それをもとに複雑な計算を行って本人かどうかを確かめているのです。
+            </P>
+            <EmojiSeparator
+              emojis={['🔢', '🔢', '💻', '🔢', '🔢']}
+              description={<>コンピュータは、大量の計算を行える計算機</>}
+            />
+            <P>
+              だから、コンピュータは「<Strong>計算機</Strong>」なのですね。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>計算機の歴史</>,
+        content: (
+          <>
+            <P>
+              コンピュータは計算機であるからこそ、
+              <Strong>コンピュータの歴史はすなわち、計算機の歴史</Strong>
+              なのです。
+            </P>
+            <P>
+              歴史を振り返ると、たとえば昔の日本では、中国から伝わった
+              <InlineHeader>そろばん</InlineHeader> <Emoji>🧮</Emoji>{' '}
+              が計算機の主役でしたね。
+            </P>
+            <EmojiSeparator
+              emojis={['🧮', '🏯', '🧮']}
+              description={
+                <>
+                  昔の日本で「計算機」といえば
+                  <br />
+                  そろばんだった
+                </>
+              }
+            />
+            <P>
+              一方、海の向こうのアメリカでは、1890年に「
+              <InlineHeader>タビュレーティングマシン</InlineHeader>
+              」という計算機が台頭しました。
+            </P>
+            <P>
+              <Img
+                src="/static/images/Hollerith_census_machine_at_the_Computer_History_Museum.jpg"
+                alt="Hollerith_census_machine_at_the_Computer_History_Museum"
+                size="medium"
+                caption={
+                  <>
+                    シリコンバレーのコンピュータ歴史博物館に展示されているタビュレーティングマシン(
+                    <ExternalLink href="https://commons.wikimedia.org/wiki/File:Hollerith_census_machine_at_the_Computer_History_Museum.jpg">
+                      撮影: Anton Chiang, CC BY 2.0
+                    </ExternalLink>
+                    )
+                  </>
+                }
+              />
+            </P>
+            <P>
+              <Em>
+                タビュレーティングマシンは、アメリカの国勢調査、すなわち国全体のアンケート調査を集計するために使われた計算機でした。
+              </Em>
+              マークシートのような紙に空いた穴を読み取って計算することで、大量のデータをすばやく集計できたのです。
+              <Em>現代のエクセルのようなもの</Em>ですね。
+            </P>
+            <EmojiSeparator
+              emojis={['📈', '📊', '📉']}
+              description={
+                <>
+                  アメリカでは「タビュレーティングマシン」
+                  <br />
+                  という計算機が国勢調査で使われた
+                </>
+              }
+            />
+            <P>
+              ちなみに、
+              <Em>
+                この計算機の発明者であるホレリスは、IBMの前身となる会社を創業しました。
+              </Em>
+              IBMはさらに強力な計算機を開発し続け、1960年代に世界一のコンピュータ企業になったのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>計算機「科学」のはじまり</>,
+        content: (
+          <>
+            <P>
+              上記の「タビュレーティングマシン」を皮切りに、計算機は20世紀に入ってどんどん進化していきました。やがて計算機は電子化され、今の「コンピュータ」と呼ばれるような機械になっていきました。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '💻', '✨']}
+              description={<>計算機は20世紀にどんどん進化した</>}
+            />
+            <P>
+              いっぽう同時期に、<Strong>計算機について科学する学問</Strong>
+              である「
+              <InlineHeader>コンピュータサイエンス＝計算機科学</InlineHeader>」
+              も生まれ、進化していきました。
+            </P>
+            <P>
+              そんなコンピュータサイエンスの研究者たちは、「
+              <Em>
+                コンピュータ＝計算機の作り方や使い方をどう工夫すれば、より効率的に問題を解けるのか
+              </Em>
+              」といった問いに取り組んだのです。
+            </P>
+            <EmojiSeparator
+              emojis={['💻', '🤔', '💻']}
+              description={
+                <>
+                  <InlineHeader>コンピュータサイエンス: </InlineHeader>
+                  <br />
+                  計算機の作り方や使い方をどう工夫
+                  <br />
+                  すれば、より効率的に問題を解けるのか
+                </>
+              }
+            />
+            <P>
+              そして、<Em>コンピュータサイエンスの礎を築いた</Em>
+              と言われているのが、英国の数学者だった
+              <InlineHeader>アラン・チューリング</InlineHeader>{' '}
+              <Emoji>🧑🏻</Emoji> と、米国の数学者だった
+              <InlineHeader>
+                アロンゾ・チャーチ
+              </InlineHeader> <Emoji>👨🏻‍🦳</Emoji>{' '}
+              です。ふたりの研究が、学問としてのコンピュータサイエンスの大本になっているのです。
+            </P>
+            <EmojiSeparator
+              emojis={['🧑🏻', '👨🏻‍🦳']}
+              description={
+                <>
+                  <InlineHeader>アラン・チューリング</InlineHeader>と<br />
+                  <InlineHeader>アロンゾ・チャーチ</InlineHeader>による
+                  <br />
+                  研究が、コンピュータサイエンスの礎となった
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>空想上の計算機</>,
+        content: (
+          <>
+            <P>
+              <Em>
+                チューリングとチャーチは1930年代に、「
+                <Strong>ヒルベルトの決定問題</Strong>
+                」という、とある難しい数学の問題に別々に取り組んでいました。
+              </Em>
+              それがどんな問題かを説明するのは非常に難しいので省略しますが、ふたりが
+              <Strong>その問題をどのようにして解いたか</Strong>
+              が興味深かったのです。
+            </P>
+            <EmojiSeparator
+              emojis={['🧑🏻', '❓', '👨🏻‍🦳']}
+              description={
+                <>
+                  <InlineHeader>チューリング</InlineHeader>と
+                  <InlineHeader>チャーチ</InlineHeader>は、
+                  <br />
+                  とある数学の問題に別々に取り組んでいた
+                </>
+              }
+            />
+            <P>
+              その問題を解くために、ふたりはそれぞれ別々の「
+              <Strong>空想上の計算機</Strong>
+              」を考案する必要がありました。「
+              <InlineHeader>空想上の計算機</InlineHeader>
+              」とはすなわち、
+              <Em>
+                実際には(少なくとも1930年代の当時は)存在しないけど、もし存在したとしたら非常に複雑な計算ができる、
+                <Strong>仮想上の計算機</Strong>
+              </Em>
+              のことです。
+            </P>
+            <EmojiSeparator
+              emojis={['❓', '💭', '💻', '❓']}
+              description={
+                <>
+                  <Strong>空想上の計算機</Strong>とは、
+                  <br />
+                  実際には存在しないが、もしも存在したら
+                  <br />
+                  非常に複雑な計算ができる
+                  <br />
+                  <Strong>仮想上の計算機</Strong>のこと。
+                </>
+              }
+            />
+            <P>
+              「<Strong>もし仮にそんな計算機がこの世に存在したら…</Strong>
+              」と仮定したうえで理論を展開することで、ふたりはそれぞれ別々に、先述の問題を解くことができたのです。
+            </P>
+            <EmojiSeparator emojis={['🧑🏻', '💭', '💻']} noBottomMargin />
+            <EmojiSeparator
+              emojis={['👨🏻‍🦳', '💭', '💻']}
+              noTopMargin
+              description={
+                <>
+                  先述の問題を解くために、ふたりはそれぞれ
+                  <br />「<Strong>空想上の計算機</Strong>」を頭の中で設計した。
+                  <br />「<Em>もしこういった計算機が存在したら…</Em>」と
+                  <br />
+                  仮定した上で理論を展開して問題を解いた
+                </>
+              }
+            />
+            <P>
+              実は、この時にふたりが別々に考案した、当時の技術では作ることができない「
+              <Strong>空想上の計算機</Strong>
+              」が、
+              <Em>
+                その後のコンピュータの開発や、プログラミング言語の開発、ひいてはコンピュータサイエンスそのものに大きな影響を与えました。
+              </Em>
+            </P>
+            <P>
+              言い換えると、このふたりは「ヒルベルトの決定問題」という数学の問題を解いていたのですが、
+              <Em>
+                その問題を解くためにふたりが考えたアイデアが偶然にも、近代のコンピュータサイエンスの土台になった
+              </Em>
+              のです。
+            </P>
+            <Hr />
+            <P>
+              1930年代半ばに、<Strong>チューリング</Strong>
+              は先述の問題を解くために「
+              <InlineHeader>チューリングマシン</InlineHeader>
+              」という空想上の計算機を考案しました。「このチューリングマシンが仮に存在したら…」と論を展開することで、彼は先述の数学の問題を解くことができたのです。
+            </P>
+            <P>
+              そして、ここでは詳しく説明しませんが、
+              <Em>
+                このチューリングマシンの仕組みはシンプルながら、現代のコンピュータの仕組みと非常に似ており、近代的なコンピュータの発展に大きな影響を与えたのです。
+              </Em>
+            </P>
+            <EmojiSeparator
+              emojis={['🧑🏻', '💭', '💻']}
+              description={
+                <>
+                  チューリングは、「
+                  <InlineHeader>チューリングマシン</InlineHeader>」
+                  <br />
+                  という、現代のコンピュータに似ている
+                  <br />
+                  空想上の計算機を頭の中で考え、
+                  <br />
+                  それを使って先述の問題を解いた
+                </>
+              }
+            />
+            <P>
+              一方、ほぼ時を同じくして、<Strong>チャーチ</Strong>
+              は先述の問題を解くために「
+              <Strong>ラムダ計算</Strong>
+              」という空想上の計算機を考案しました。では、この「
+              <Strong>ラムダ計算</Strong>
+              」とはどんな仕組みだったのでしょうか。
+            </P>
+            <EmojiSeparator
+              emojis={['👨🏻‍🦳', '💭', '💻']}
+              description={
+                <>
+                  チャーチは、「
+                  <InlineHeader>ラムダ計算</InlineHeader>」という
+                  <br />
+                  空想上の計算機を頭の中で考えた
+                </>
+              }
+            />
+            <P>
+              <Em>
+                実は、みなさんはすでに「
+                <Strong>ラムダ計算</Strong>
+                」がどんな仕組みかを知っています。
+              </Em>
+              そう、
+              <Strong>
+                <Emoji>🍱</Emoji> 弁当箱のことです。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              emojis={['👨🏻‍🦳', '💭', '🍱']}
+              description={
+                <>
+                  チャーチが考えた空想上の計算機
+                  <br />「<InlineHeader>ラムダ計算</InlineHeader>
+                  」は、<Strong>弁当箱と仕組みが同じ</Strong>
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>ラムダ計算と弁当箱</>,
+        content: (
+          <>
+            <P>
+              チャーチが考えた空想上の計算機「<Strong>ラムダ計算</Strong>
+              」は、<Em>見た目は弁当箱とは違いますが、仕組みは同じ</Em>でした。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>✨</Emoji>,
+                <CustomEmoji type="lambda" />,
+                <Emoji>✨</Emoji>
+              ]}
+              description={<>ラムダ計算。弁当箱と仕組みは同じ</>}
+            />
+            <P>
+              たとえば、こちらが「<InlineHeader>ラムダ計算</InlineHeader>
+              」の記述式です。一番左にある「<Strong>λ</Strong>
+              」の記号はギリシャ文字で「
+              <Strong>ラムダ</Strong>
+              」と呼ぶことから、「ラムダ計算」と呼ばれています。
+            </P>
+            <CenteredCode size="md">λA.B C</CenteredCode>
+            <P>
+              上のラムダ計算の記述式は、以下の弁当箱とまったく同じことを表しています。
+            </P>
+            <R.Kzkg>
+              上のラムダ計算の記述式は、
+              <br />
+              この弁当箱とまったく同じ
+            </R.Kzkg>
+            <P>
+              上の弁当箱は、
+              <H args={{ name: 'play' }} /> すると <Emoji>🅱️</Emoji>{' '}
+              になります。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Unxf></R.Unxf>
+            <P>
+              <Em>
+                それと同じで、先ほどの「ラムダ計算」の記述式も、
+                <H args={{ name: 'play' }} /> すると
+                <Strong>B</Strong>が残るのです。
+              </Em>
+            </P>
+            <CenteredCode size="md">λA.B C</CenteredCode>
+            <ExpressionRunnerSeparator />
+            <CenteredCode size="md">B</CenteredCode>
+            <P>
+              もちろん、もっと複雑なラムダ計算の記述式もあります。たとえば、こちらをご覧ください。この記述式は、何を表しているか分かりますか？
+            </P>
+            <CenteredCode size="sm">λA.(λB.A(B B))(λB.A(B B))</CenteredCode>
+            <P>
+              答えを言うと、上の記述式は
+              <Strong>Yコンビネータを表している</Strong>
+              のです。つまり、下の弁当箱とまったく同じです。
+            </P>
+            <R.Rjho>
+              上のラムダ計算の記述式は、
+              <br />「<Strong>Yコンビネータ</Strong>」の弁当箱と同じ
+            </R.Rjho>
+            <P>
+              つまり本稿では、
+              <Strong>実はみなさんにラムダ計算を教えていたのです。</Strong>
+              <Em>
+                ラムダ計算の記述式は見た目が複雑なので、
+                <H args={{ name: 'bentoBoxPuzzle' }} />
+                という形で教えることで、とっつきやすくしていた
+              </Em>
+              というわけですね。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="lambda" />,
+                <CustomEmoji type="singleArrow" />,
+                <Emoji>🍱</Emoji>
+              ]}
+              description={
+                <>
+                  本稿では、実はラムダ計算を教えていた。
+                  <br />
+                  ラムダ計算の記述式は見た目が複雑なので、
+                  <br />
+                  <H args={{ name: 'bentoBoxPuzzle' }} />
+                  という形で教える
+                  <br />
+                  ことで、とっつきやすくしていた。
+                </>
+              }
+            />
+            <P>
+              そして繰り返しますが、このラムダ計算は、1930年代に考えられた「
+              <Strong>空想上の計算機</Strong>」というわけです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>村人の質問に戻ると…</>,
+        content: (
+          <>
+            <P>ここで、ラムダ村の村人の質問に戻りましょう。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>弁当箱にできない計算はあるのかな？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              先ほど、「<Strong>弁当箱とラムダ計算は同じ</Strong>
+              」という話をしましたね。つまり、上の質問は以下のように言い換えることができます。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>ラムダ計算にできない計算</Strong>はあるのかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>では、ラムダ計算にできない計算はあるのでしょうか？</P>
+            <P>
+              結論から言うと、
+              <Strong>
+                ラムダ計算は、現代のコンピュータが行うことができるすべての計算を行うことができます。
+              </Strong>
+              つまり、あなたのパソコンやスマホができる計算はすべて、ラムダ計算にもできるということです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="lambda" />,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>💻</Emoji>
+              ]}
+              description={
+                <>
+                  ラムダ計算は、現代のコンピュータが行える
+                  <br />
+                  すべての計算を行うことができる
+                </>
+              }
+            />
+            <P>
+              ということはつまり、
+              <Strong>
+                弁当箱も、現代のコンピュータが行えるすべての計算を行うことができる
+              </Strong>
+              というわけですね。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>💻</Emoji>
+              ]}
+              description={
+                <>
+                  弁当箱も、現代のコンピュータが行える
+                  <br />
+                  すべての計算を行うことができる
+                </>
+              }
+            />
+            <P>
+              このことは、1930年代に証明されました。「
+              <Em>
+                これから先にどれほど強力な計算機が登場しても、その計算機ができる計算は、理論上はラムダ計算にもできる
+              </Em>
+              」ということが数学的に証明されたのです。もちろん、この証明は難しすぎるので省略します。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="lambda" />,
+                <Emoji>🆚</Emoji>,
+                <Emoji>💻</Emoji>
+              ]}
+              description={
+                <>
+                  「どれほど強力な計算機が登場しても、
+                  <br />
+                  その計算機ができる計算は、
+                  <br />
+                  理論上はラムダ計算にもできる」と
+                  <br />
+                  1930年代に証明された
+                </>
+              }
+            />
+          </>
+        ),
+        footer: {
+          content: (
+            <>
+              <P>
+                <InlineHeader>ちなみに:</InlineHeader>{' '}
+                チャーチが考案したラムダ計算だけでなく、チューリングが考案した空想上の計算機「チューリングマシン」も、現代のコンピュータが行えるすべての計算を(理論上は)行うことができます。このことも、1930年代に証明されました。
+              </P>
+            </>
+          )
+        }
+      },
+      {
+        title: <>ラムダ計算の影響</>,
+        content: (
+          <>
+            <P>
+              先ほど説明したように、ラムダ計算はもともと、とある数学の問題を解くためにチャーチが考案したものでした。しかし、ラムダ計算もまた、
+              <Em>コンピュータサイエンスの発展に大きな影響を与えた</Em>のです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>✨</Emoji>,
+                <CustomEmoji type="lambda" />,
+                <Emoji>✨</Emoji>
+              ]}
+              description={
+                <>
+                  ラムダ計算は、コンピュータサイエンスの
+                  <br />
+                  発展に大きな影響を与えた
+                </>
+              }
+            />
+            <P>
+              特に、ラムダ計算は
+              <Strong>数々のプログラミング言語</Strong>
+              に影響を与えました。現存するプログラミング言語の多くには、ラムダ計算の名残が残っています。
+            </P>
+            <P>
+              たとえば、執筆時点で世界で最も人気のプログラミング言語のひとつである、
+              <Strong>Python (パイソン)</Strong>
+              という言語があります。ちなみにパイソンとは大蛇のことで、Python言語のロゴにもヘビの絵が描かれています。
+            </P>
+            <EmojiSeparator
+              emojis={['🐍', '🐍', '🐍']}
+              description={<>Python言語</>}
+            />
+            <P>
+              このPython言語にも、「<Strong>lambda</Strong>{' '}
+              (ラムダ)」という機能があります。たとえば、以下のPython言語のコードをご覧ください。
+            </P>
+            <CenteredCode size="sm">(lambda A: A)('B')</CenteredCode>
+            <P>
+              上のPython言語のコードは、以下のラムダ計算とほぼ同じ意味です。
+            </P>
+            <CenteredCode size="md">λA.A B</CenteredCode>
+            <P>
+              これは、弁当箱に例えると以下のようになり、実行結果は{' '}
+              <Emoji>🅱️</Emoji> になります。
+            </P>
+            <R.Aklf>下が左右とも同じなので…</R.Aklf>
+            <ExpressionRunnerSeparator />
+            <R.Gemh>
+              上にあった <Emoji>🅱️</Emoji> が残る
+            </R.Gemh>
+            <P>
+              だから同じように、今回紹介したPythonのコードも、実行すると結果は{' '}
+              <Code>B</Code> になります。
+            </P>
+            <CenteredCode size="sm">(lambda A: A)('B')</CenteredCode>
+            <ExpressionRunnerSeparator />
+            <CenteredCode size="sm">'B'</CenteredCode>
+            <P>
+              まとめると、
+              <Em>
+                Python言語のような人気のプログラミング言語も、1930年代に考えられたラムダ計算の影響を間接的に受けている
+              </Em>
+              のです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="lambda" />,
+                <CustomEmoji type="singleArrow" />,
+                <Emoji>🐍</Emoji>
+              ]}
+              description={
+                <>
+                  Python言語のような
+                  <br />
+                  人気のプログラミング言語も、
+                  <br />
+                  1930年代に考えられた
+                  <br />
+                  ラムダ計算の影響を間接的に受けている
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>工夫すること</>,
+        content: (
+          <>
+            <P>
+              そろそろ終わりが近づいてきましたが、最後に「
+              <InlineHeader>コンピュータサイエンス＝計算機科学</InlineHeader>
+              」についてもう一言だけお話をさせてください。
+            </P>
+            <P>
+              それは、
+              <Em>
+                「<Strong>計算機を工夫すること</Strong>
+                」が、コンピュータサイエンスではとても大事
+              </Em>
+              というお話です。
+            </P>
+            <ExpressionRunnerCaptionOnly>
+              <Strong>重要:</Strong> 計算機を工夫することが、
+              <br />
+              コンピュータサイエンスではとても大事
+            </ExpressionRunnerCaptionOnly>
+            <P>
+              今回紹介したラムダ計算、すなわち弁当箱は、
+              <Em>仕組みはとてもシンプルです</Em>
+              。弁当箱の基本の法則は、初級その3〜5で紹介したように、非常にシンプルです。
+            </P>
+            <R.Zzxj>弁当箱の基本の法則は非常にシンプル</R.Zzxj>
+            <ExpressionRunnerSeparator />
+            <R.Keck />
+            <ExpressionRunnerSeparator />
+            <R.Qoms />
+            <ExpressionRunnerSeparator />
+            <R.Mhgm />
+            <ExpressionRunnerSeparator />
+            <R.Osqo />
+            <P>
+              しかし、こんなシンプルな弁当箱でも、現代のコンピュータが行えるすべての計算を行うことができるのです。
+              <Strong>
+                それができる理由は、弁当箱を工夫すれば、四則演算や、条件分岐や、繰り返しを行うことができるからです。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              emojis={['➕', '✖️', '🍱', '↕️', '🔁']}
+              description={
+                <>
+                  弁当箱を工夫すれば、四則演算や、
+                  <br />
+                  条件分岐や、繰り返しを行うことができる
+                </>
+              }
+            />
+            <P>
+              たとえば今回紹介した通り、Yコンビネータの弁当箱を使えば、繰り返しを行うことができますよね。他にも工夫次第で、さまざまな計算を行うことができます。
+            </P>
+            <R.Rjho>
+              「<Strong>Yコンビネータ</Strong>」の弁当箱を使えば
+              <br />
+              繰り返しを行うことができる
+            </R.Rjho>
+            <P>
+              コンピュータサイエンスは、「
+              <Em>
+                計算機(コンピュータ)の作り方や使い方をどう工夫すれば、より効率的に問題を解けるのか
+              </Em>
+              」について考える学問です。
+            </P>
+            <P>
+              そして、今回学んだ弁当箱は、
+              <Em>シンプルでも工夫次第で複雑な計算ができる計算機です。</Em>
+              そんな弁当箱には、
+              <Strong>コンピュータサイエンスのエッセンスが詰まっている</Strong>
+              と思うのです。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🍱', '✨']}
+              description={
+                <>
+                  弁当箱は、シンプルでも工夫次第で
+                  <br />
+                  複雑な計算ができる計算機。だからこそ
+                  <br />
+                  コンピュータサイエンスのエッセンスが
+                  <br />
+                  詰まっている
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>コンピュータサイエンスの他の分野でも同じ</>,
+        content: (
+          <>
+            <P>
+              今回は時間の都合で、たくさんあるコンピュータサイエンスの題材のうち、ラムダ計算(弁当箱)しか紹介できませんでした。
+            </P>
+            <P>
+              とはいえ、コンピュータサイエンスの他の分野を学ぶときも、やることは弁当箱のときと同じです。なぜならどの分野でも、弁当箱のように「
+              <Em>
+                計算機(コンピュータ)を<Strong>工夫して</Strong>
+                、問題を解く」ことが大事になってくるからです。
+              </Em>
+            </P>
+            <P>
+              コンピュータサイエンスのどの分野でも、
+              <Strong>キーワードは「工夫」</Strong>
+              なのです。たとえば、「
+              <Em>
+                コンピュータを<Strong>どう工夫して</Strong>
+                使えば、美しいCGや、人工知能や、仮想通貨が作れるだろう？
+              </Em>
+              」といった感じですね。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🤖', '💰']}
+              description={
+                <>
+                  コンピュータをどう工夫して使えば、
+                  <br />
+                  美しいCGや、人工知能や、
+                  <br />
+                  仮想通貨が作れるだろう？
+                </>
+              }
+            />
+            <P>
+              長くなりましたが、本稿を読んで、「
+              <Em>
+                コンピュータサイエンスの他の分野でも、コンピュータの工夫の仕方を学んでみたい
+              </Em>
+              」と思ってくだされば嬉しいです。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>まとめ</>,
+        content: (
+          <>
+            <P>本稿で学んだことを短くまとめると、以下のようになります。</P>
+            <Ol>
+              <OlLi>
+                <Em>
+                  弁当箱は、工夫次第で四則演算や、条件分岐や、繰り返しといった複雑な計算ができる。また、繰り返しを行う弁当箱を
+                  <Strong>Yコンビネータ</Strong>と呼ぶ。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  弁当箱は、1930年代に考案された空想上の計算機「ラムダ計算」が基になっている。ラムダ計算は、現代のコンピュータが行えるすべての計算を行うことができ、また多くのプログラミング言語に影響を与えた。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  コンピュータサイエンスは「
+                  <Strong>
+                    計算機(コンピュータ)をどう工夫して問題を解くか
+                  </Strong>
+                  」を考える学問。工夫次第で複雑な計算ができる弁当箱には、そのエッセンスが詰まっている。
+                </Em>
+              </OlLi>
+            </Ol>
+            <EmojiSeparator emojis={['✨', '🍱', '✨']} />
+          </>
+        )
+      },
+      {
+        title: <>その後: チューリング</>,
+        content: (
+          <>
+            <P>最後に、「その後」の話をしましょう。</P>
+            <P>
+              まず、先述したイギリスの数学者で、空想上の計算機「
+              <InlineHeader>チューリングマシン</InlineHeader>」を考案した
+              <Strong>アラン・チューリング</Strong>
+              。彼はチューリングマシンを考案したのち、イギリスからアメリカに渡り、
+              <Em>ラムダ計算(弁当箱)を考案したチャーチのもとで学びました。</Em>
+            </P>
+            <EmojiSeparator
+              emojis={['🧑🏻', '🎓', '👨🏻‍🦳']}
+              description={
+                <>
+                  <InlineHeader>チューリングマシン</InlineHeader>を考案した
+                  <br />
+                  <Strong>アラン・チューリング</Strong>は、
+                  <br />
+                  <InlineHeader>ラムダ計算(弁当箱)</InlineHeader>を考案した
+                  <br />
+                  <Strong>チャーチ</Strong>に弟子入りした
+                </>
+              }
+            />
+            <P>
+              その後チューリングはイギリスに戻り、第2次世界大戦でドイツ軍の暗号通信「エニグマ」を解読しました。その後、彼は人工知能の分野でも先駆的な役割を果たし、「人工知能の父」とも呼ばれるようになりました。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🧑🏻', '✨']}
+              description={<>チューリングは「人工知能の父」に</>}
+            />
+            <P>
+              チューリングは同性愛者で、当時のイギリスでは同性愛行為が違法でした。ある日、若い男性との性的関係を持ったことが発覚し、チューリングは有罪になりました。彼は薬品投与による「化学的去勢」を受け続け、42歳になる直前に毒物を服用して亡くなってしまいました。
+            </P>
+            <P>
+              チューリングが亡くなってから55年後の2009年、英政府はチューリングに対する迫害を謝罪し、2013年には亡きチューリングに恩赦が与えられました。
+            </P>
+            <P>
+              <Em>
+                そしてこの記事の執筆中、2019年7月15日に、イギリスの新しい50ポンド紙幣の肖像にチューリングが採用されることになったのです。
+              </Em>
+              その50ポンド紙幣には、彼が考えた空想上の計算機「チューリングマシン」のイラストが載っています。(参考:{' '}
+              <ExternalLink href="https://www.bbc.com/japanese/48991921">
+                BBC
+              </ExternalLink>
+              )
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>その後: ラムダ村</>,
+        content: (
+          <>
+            <P>ではその後、ラムダ村はどうなったかというと…</P>
+            <EmojiSeparator emojis={['🐶', '🙂', '😈', '👧🏻']} />
+            <P>
+              <InlineHeader>村人たち</InlineHeader>
+              は、何でも計算できる弁当箱を村の外の人たちに売りさばき、大金持ちになろうと悪巧み中です。
+            </P>
+            <EmojiSeparator
+              emojis={['🍱', '💰', '🤑', '💰', '🍱']}
+              description={
+                <>
+                  弁当箱は何でも計算できるから、
+                  <br />
+                  高く売れる！がっぽり稼ぐぞ！
+                </>
+              }
+            />
+            <P>
+              <InlineHeader>悪魔</InlineHeader>
+              は暇になったので、日々<InlineHeader>ミニオン</InlineHeader>
+              に新しい芸を覚えさせようとしていますが、なかなかうまくいっていません。
+            </P>
+            <EmojiSeparator
+              emojis={['😈', '🐶', '❓']}
+              description={
+                <>
+                  ミニオン、「おすわり」しなさい！
+                  <br />
+                  何度言ったらわかるんだ！
+                </>
+              }
+            />
+            <P>
+              そして、年頃になった<InlineHeader>サヤちゃん</InlineHeader>
+              は、好きなアーティストのコンサートにもっと参戦したいからと言って、ラムダ村を出ていきました。
+            </P>
+            <EmojiSeparator
+              emojis={['👧🏻', '❤️', '👨‍🎤']}
+              description={<>今日も自担が尊い〜</>}
+            />
+            <P>
+              以上でおしまいです！ラムダ村の名前の由来も、今回お分かりになったかと思います。ここまでお付き合いくださり、本当にありがとうございました。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'sideNote',
+        title: <>プログラマの方へのメッセージ</>,
+        preview: {
+          text: <>続きを読む</>,
+          content: (
+            <>
+              <P>
+                本稿をお読みになったプログラマの方の中には、「
+                <Em>
+                  これはプログラミング未経験者にとっては難しすぎるのではないか
+                </Em>
+                」と思われた方もいるかもしれません。そんな方に伝えたいことがあります。
+              </P>
+            </>
+          )
+        },
+        content: (
+          <>
+            <CardContent
+              preview={{
+                text: <>プログラミングで試してみる</>,
+                content: (
+                  <>
+                    <Hr />
+                    <P>
+                      個人的な話で恐縮ですが、わたしは今まで「
+                      <Em>
+                        この人はほんとうに頭がいいな、知的好奇心が旺盛だな
+                      </Em>
+                      」と思った方に数多く出会いました。たとえば、わたしは20代のときに母を癌で亡くしているのですが、母がお世話になったお医者様の方々と話したときは、「こんなに賢い人に出会ったのは初めてだ」と思ったものです。
+                    </P>
+                    <EmojiSeparator
+                      emojis={['💉', '👩🏽‍⚕️', '💊']}
+                      description={
+                        <>
+                          冒頭でコンピュータサイエンスを
+                          <br />
+                          医学に例えたのも、そんなお医者様に
+                          <br />
+                          出会ったことが理由です
+                        </>
+                      }
+                    />
+                    <P>
+                      そして、今までわたしが「
+                      <Em>
+                        この人はほんとうに頭がいいな、知的好奇心が旺盛だな
+                      </Em>
+                      」と思った人々の内訳を見てみると、
+                      <Em>
+                        プログラマの方よりも、プログラマでない方のほうが遥かに多い
+                      </Em>
+                      のです。もちろん、これは当たり前ですね。プログラマは世の中では圧倒的少数派ですから、母数のケタが違います。
+                    </P>
+                    <P>
+                      そういった、「
+                      <Strong>
+                        世の中にたくさんいる、プログラマではない、とても知的好奇心が旺盛な人々向けにコンピュータサイエンスの入門書を書くとしたら、どういう教材がいいだろう？
+                      </Strong>
+                      」と考えた結果、完成したのが本稿です。
+                    </P>
+                    <P>
+                      だから、そういう方々に「
+                      <Em>知的に面白い</Em>
+                      」と思っていただくために、難易度はあえて高めに設定しました。本稿は
+                      <Em>
+                        「プログラミング未経験者向けの入門書」とは謳っていますが、「誰にでも、何ならサルにでも分かる入門書」だとは謳っていない
+                      </Em>
+                      理由は、そういうところにあります。
+                    </P>
+                    <P>
+                      しかし同時に、
+                      <Em>
+                        せっかく時間をかけて書くのであれば、できるかぎり読者層の裾野を広げたい
+                      </Em>
+                      とも思いました。どうせなら、たくさんの人に読んでもらいたい。だから、難易度は妥協しないけれど、説明はできる限り平易にしようと心がけました。
+                    </P>
+                    <P>
+                      また、冒頭でも書いた通り、いきなり高度な内容を理解することができれば、「
+                      <Em>これが理解できたんだから、他の内容も学べるだろう</Em>
+                      」と自信がつきます。高度な内容を分かりやすく書くことができれば、こういったメリットもあります。
+                    </P>
+                    <P>
+                      努力はしたものの、それでも本稿がまだまだ難しいのは承知しております。本稿はあくまで、「
+                      <Em>邪道な</Em>
+                      」入門書なのです。ただ、その上でひとこと言わせていただくと、
+                      <Em>
+                        内容を完全には理解できなくても、雰囲気だけでも楽しんでくださった方や、「よくわからないけど、コンピュータサイエンスって面白そう」と感じてくださった方が、ひとりでも多くいればいいな
+                      </Em>
+                      と思っています。
+                    </P>
+                    <BubbleQuotes
+                      quotes={[
+                        {
+                          type: 'devil',
+                          children: (
+                            <>
+                              <P>
+                                悪魔のわたしに言わせれば…「
+                                <Em>
+                                  入門書を必要以上に難しくしたら、その分野に苦手意識を持つ人が増える
+                                </Em>
+                                」というのは確かにそうだと思う。
+                              </P>
+                              <P>
+                                一方、「
+                                <Em>
+                                  ある分野の入門書や入門コースが知的に面白かったから、その分野に興味を持つようになった
+                                </Em>
+                                」という人も、一定数いると思う。大抵は、知的好奇心が旺盛な人たちだ。わたしはどうせ発信するなら、そういう人たちに好かれるものを作りたい。
+                              </P>
+                              <P>
+                                そして、
+                                <Em>
+                                  「知的に面白い」と思ってもらえる入門書には、ある程度の難しさは欠かせない
+                                </Em>
+                                と思う。簡単すぎたら退屈だからだ。
+                              </P>
+                              <P>
+                                「難しすぎて敬遠してしまう人」の数を抑えつつ、「難しくて面白いと思ってくれる人」の数を増やす、というのは
+                                <Strong>トレードオフ</Strong>
+                                だ。どこでバランスを取るかは教材作成者が自由に決めるべきで、
+                                <Em>「これが正解」というのは無い</Em>
+                                と思うんだ。
+                              </P>
+                            </>
+                          )
+                        }
+                      ]}
+                    />
+                    <P>
+                      <InlineHeader>ちなみに:</InlineHeader>{' '}
+                      プログラマの方で、「
+                      <Em>Yコンビネータを実際にプログラミングで試してみたい</Em>
+                      」と思った方は、↓の「プログラミングで試してみる」を押してみてください。
+                    </P>
+                  </>
+                )
+              }}
+            >
+              <Hr />
+              <P>
+                下のコードは、
+                <Em>
+                  JavaScriptでYコンビネータを使って「
+                  <EmojiNumber number={4} /> の階乗」、すなわち{' '}
+                  <EmojiNumber number={4} /> <Emoji>✖️</Emoji>{' '}
+                  <EmojiNumber number={3} /> <Emoji>✖️</Emoji>{' '}
+                  <EmojiNumber number={2} /> <Emoji>✖️</Emoji>{' '}
+                  <EmojiNumber number={1} /> を計算するコード
+                </Em>
+                です。
+              </P>
+              <Pre>
+                <Code
+                  children={`console.log(
+  (a =>
+    (b => a(c => b(b)(c)))(b =>
+      a(c => b(b)(c))
+    ))(f => n =>
+    n === 0 ? 1 : n * f(n - 1)
+  )(4)
+)`}
+                ></Code>
+              </Pre>
+              <P>
+                上のコードをブラウザの開発者ツールにコピーして実行すると、「
+                <EmojiNumber number={4} /> の階乗」である「
+                <Code>24</Code>
+                」が出力されます。また、下から2行目にある <Code>4</Code>{' '}
+                をたとえば <Code>5</Code> に変えると、
+                <EmojiNumber number={5} /> の階乗である「<Code>120</Code>
+                」が出力されます。
+              </P>
+              <P>
+                ふつう、JavaScriptで階乗を計算するには <Code>for</Code> や{' '}
+                <Code>while</Code> といったループ機能、<Code>reduce</Code>{' '}
+                といった関数、または関数の再帰を使います。しかし、
+                <Em>
+                  Yコンビネータを使えば、それらを一切使わずに階乗を計算できる
+                </Em>
+                のです。
+              </P>
+            </CardContent>
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/2.en.tsx b/src/contents/2.en.tsx
index 5f4ca258b..b7e0ebb63 100644
--- a/src/contents/2.en.tsx
+++ b/src/contents/2.en.tsx
@@ -1,4 +1,628 @@
-import React from 'react'
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  InlineHeader,
+  P,
+  Strong,
+  Em,
+  Ul,
+  UlLi
+} from 'src/components/ContentTags'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import EmojiNumber from 'src/components/EmojiNumber'
+import Emoji from 'src/components/Emoji'
+import H from 'src/components/H'
+import * as R from 'src/components/Runners'
+import YesNoButtons from 'src/components/YesNoButtons'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
+import InlineBorder from 'src/components/InlineBorder'
 
-export default () => <EpisodeCardList cards={[]} />
+export const TwoPlusFour = () => (
+  <>
+    <R.Ednv />
+    <P>
+      結果は <EmojiNumber number={6} /> になりました。この計算箱は、
+      <Em>
+        下の <CustomEmoji type="plusOne" /> の左側に{' '}
+        <InlineBorder>
+          <EmojiNumber number={4} />
+        </InlineBorder>{' '}
+        があるので、
+        <CustomEmoji type="plusOne" /> が4回繰り返されるのです。
+      </Em>
+    </P>
+    <R.Xpks />
+    <ExpressionRunnerSeparator />
+    <R.Dgpx>
+      <CustomEmoji type="plusOne" /> が4回繰り返される
+    </R.Dgpx>
+    <ExpressionRunnerSeparator />
+    <R.Iwmu>
+      <EmojiNumber number={2} /> <Emoji>➕</Emoji> <EmojiNumber number={4} />{' '}
+      を計算できました！
+    </R.Iwmu>
+  </>
+)
+
+export const Conclusion = () => (
+  <>
+    <P>
+      このように繰り返しの機能を使えば、
+      <Strong>
+        <CustomEmoji type="plusOne" /> や <CustomEmoji type="minusOne" />{' '}
+        を数え間違えることなく、確実に足し算や引き算を行うことができます。
+      </Strong>
+      だからこそ、繰り返しの機能はラムダ村で重宝されていたのです。
+    </P>
+    <EmojiSeparator
+      emojis={['➕', '🤗', '➖']}
+      description={
+        <>
+          繰り返しの機能を使えば、
+          <br />
+          確実に足し算や引き算を行える！
+        </>
+      }
+    />
+  </>
+)
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>繰り返しの機能</>,
+        content: (
+          <>
+            <P>
+              前回は、ラムダ村に代々伝わる「<Strong>計算箱</Strong>
+              」の話をしました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🌲</Emoji>,
+                <Emoji>🙂</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🙂</Emoji>,
+                <Emoji>🌲</Emoji>
+              ]}
+              description={<>ラムダ村の村人と、計算箱</>}
+            />
+            <P>
+              そして、足し算を可能にする「
+              <InlineHeader>1を足す機能</InlineHeader>{' '}
+              <CustomEmoji type="plusOne" />
+              」や、引き算を可能にする「
+              <InlineHeader>1を引く機能</InlineHeader>{' '}
+              <CustomEmoji type="minusOne" />」 について紹介しました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={<>1を足す機能と1を引く機能</>}
+            />
+            <P>
+              今回は、計算箱の3つめの機能である「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」について説明します。
+            </P>
+            <EmojiSeparator
+              nodes={[<Emoji>✨</Emoji>, <Emoji>🔁</Emoji>, <Emoji>✨</Emoji>]}
+              description={<>繰り返しの機能</>}
+            />
+            <P>
+              まずは
+              <H args={{ name: 'yesNoQuiz' }} />
+              からはじめましょう！
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        // CHANGE QUIZ: Suppose that they want to do 10 - 9 ... are they doing it right or not? The answer should be no, they made a mistake
+        content: (
+          <>
+            <P>
+              ラムダ村の村人は計算が苦手だったので、簡単な計算でも計算箱に頼っていました。というわけで、あるラムダ村の村人は、計算箱を使って{' '}
+              <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={8} /> を計算しようとしていました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={10} />,
+                <Emoji>➖</Emoji>,
+                <EmojiNumber number={8} />,
+                <Emoji>🤔</Emoji>,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱で <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+                  <EmojiNumber number={8} /> を計算したい
+                </>
+              }
+            />
+            <P>
+              そのためにラムダ村の村人は、以下のような計算箱を
+              <H args={{ name: 'play' }} /> しようとしました。
+            </P>
+            <R.Dfjp>
+              <Emoji>😉</Emoji> これで <EmojiNumber number={10} />{' '}
+              <Emoji>➖</Emoji> <EmojiNumber number={8} /> を計算しよう！
+            </R.Dfjp>
+            <P>
+              ここで質問です。上の計算箱は、
+              <Strong>
+                <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+                <EmojiNumber number={8} /> を正しく計算できるでしょうか？
+              </Strong>
+            </P>
+            <YesNoButtons answer={'no'} />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Lxrk />
+            <P>
+              答えは <EmojiNumber number={3} />{' '}
+              になりました。つまり、もともと意図していた
+              <Strong>
+                <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+                <EmojiNumber number={8} /> ではなく、
+                <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+                <EmojiNumber number={7} /> を計算してしまった
+              </Strong>
+              のです。
+            </P>
+            <EmojiSeparator
+              emojis={['❌', '😭', '❌']}
+              description={
+                <>
+                  <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+                  <EmojiNumber number={8} /> を計算できなかった！
+                </>
+              }
+            />
+            <P>どうしてこうなったか、お分かりでしょうか？</P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="plusOne" /> や <CustomEmoji type="minusOne" />{' '}
+            の数を間違えないようにするには
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={8} /> ではなく、
+              <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={7} /> を計算してしまった理由は、
+              <Strong>
+                <CustomEmoji type="minusOne" /> の数が間違っていたから
+              </Strong>
+              です。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>❌</Emoji>,
+                <CustomEmoji type="minusOne" />,
+                <Emoji>❌</Emoji>
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="minusOne" /> の数が間違っていた
+                </>
+              }
+            />
+            <P>
+              <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={8} /> を計算したければ、
+              <CustomEmoji type="minusOne" /> を<Strong>8個配置する</Strong>
+              必要がありますが、
+              <Em>
+                先ほどの計算箱には <CustomEmoji type="minusOne" /> が
+                <Strong>7個しか</Strong>ありませんでした
+              </Em>
+              。
+            </P>
+            <EmojiSeparator
+              size="mdsm"
+              nodes={[
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji
+                  type="minusOne"
+                  cssOverrides={css`
+                    opacity: 0.4;
+                  `}
+                />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="minusOne" />{' '}
+                  が8個必要だったが、7個しかなかった
+                </>
+              }
+            />
+            <P>
+              このように、
+              <CustomEmoji type="plusOne" /> や <CustomEmoji type="minusOne" />{' '}
+              の数をひとつでも間違えると、計算箱では正確な計算ができません。
+              <Em>ではどうすれば、こういったミスを防げるのでしょうか？</Em>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <Emoji>🤔</Emoji>,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={
+                <>
+                  どうすれば、
+                  <CustomEmoji type="plusOne" /> や{' '}
+                  <CustomEmoji type="minusOne" /> の数を
+                  <br />
+                  間違えずにすむのか？
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能</>,
+        content: (
+          <>
+            <P>
+              実は計算箱には、こういったミスを防ぐために役立つ「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」が備わっています。
+            </P>
+            <EmojiSeparator
+              nodes={[<Emoji>✨</Emoji>, <Emoji>🔁</Emoji>, <Emoji>✨</Emoji>]}
+              description={<>繰り返しの機能</>}
+            />
+            <P>
+              どんな機能か紹介しましょう。
+              <H args={{ name: 'lookAtThisMathBox' }} />:
+            </P>
+            <R.Sucz />
+            <P>
+              注目ポイントは、
+              <Strong>
+                下の <CustomEmoji type="minusOne" /> の左側に{' '}
+                <InlineBorder>
+                  <EmojiNumber number={8} />
+                </InlineBorder>{' '}
+                の印があることです。
+              </Strong>
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="minusOne" /> を繰り返す
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Em>
+                上の計算箱を
+                <H args={{ name: 'play' }} />
+                すると、計算をする前に、下の部分が次のように変化します。
+              </Em>
+              変化後には、
+              <EmojiNumber number={10} /> の下に <CustomEmoji type="minusOne" />{' '}
+              が<Strong>8個</Strong>あるのに注目です。
+            </P>
+            <R.Sucz>計算をする前に…</R.Sucz>
+            <ExpressionRunnerSeparator />
+            <R.Xlgb>
+              <EmojiNumber number={10} /> の下に <CustomEmoji type="minusOne" />{' '}
+              が<Strong>8個</Strong>出現する
+            </R.Xlgb>
+            <P>
+              つまり、
+              <Strong>
+                左側に{' '}
+                <InlineBorder>
+                  <EmojiNumber number={8} />
+                </InlineBorder>{' '}
+                の印があると、その部分にあった <CustomEmoji type="minusOne" />{' '}
+                が8回繰り返されるということ
+              </Strong>
+              です。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlineBorder small>
+                  <EmojiNumber number={8} />
+                </InlineBorder>,
+                <CustomEmoji type="minusOne" />
+              ]}
+            />
+            <ExpressionRunnerSeparator />
+            <EmojiSeparator
+              size="mdsm"
+              nodes={[
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <CustomEmoji type="minusOne" />
+              ]}
+              description={
+                <>
+                  <CustomEmoji type="minusOne" /> が8回繰り返される
+                </>
+              }
+            />
+            <P>
+              ということは <EmojiNumber number={10} /> <Emoji>➖</Emoji>{' '}
+              <EmojiNumber number={8} /> を計算してくれるので、結果は{' '}
+              <EmojiNumber number={2} /> になります。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Pgxb />
+            <P>
+              まとめると、
+              <Em>
+                繰り返しの機能を使うことで、
+                <CustomEmoji type="minusOne" />{' '}
+                を指定した回数分繰り返すことができる
+              </Em>
+              ということです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <CustomEmoji type="plusOne" /> も繰り返せる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              もちろん、
+              <Strong>
+                <CustomEmoji type="plusOne" /> を繰り返すこともできます。
+              </Strong>
+              こちらの計算箱をご覧になり、
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <TwoPlusFour />
+            <P>
+              こうすれば、
+              <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={4} /> を計算できるのです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>繰り返しの機能</>,
+        content: (
+          <>
+            <P>つまり、下の計算箱のように、</P>
+            <R.Bwnp />
+            <Ul>
+              <UlLi>
+                <Em>
+                  <CustomEmoji type="plusOne" /> の左側に何らかの数字{' '}
+                  <InlineBorder>
+                    <CustomEmoji type="blankNumber" />
+                  </InlineBorder>{' '}
+                  が入っている場合、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Em>
+                  <H args={{ name: 'play' }} /> すると、
+                  <CustomEmoji type="plusOne" /> が{' '}
+                  <CustomEmoji type="blankNumber" /> 回分繰り返される。
+                </Em>
+              </UlLi>
+            </Ul>
+            <P>
+              これが、計算箱の「
+              <Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」です。
+            </P>
+            <EmojiSeparator
+              nodes={[<Emoji>✨</Emoji>, <Emoji>🔁</Emoji>, <Emoji>✨</Emoji>]}
+              description={<>繰り返しの機能</>}
+            />
+            <P>
+              もちろん、
+              <Em>
+                <CustomEmoji type="plusOne" /> の代わりに{' '}
+                <CustomEmoji type="minusOne" /> を使った場合も同じ
+              </Em>
+              ように繰り返されます。
+            </P>
+            <R.Ewfr>
+              <CustomEmoji type="minusOne" /> を{' '}
+              <CustomEmoji type="blankNumber" /> 回分繰り返す
+            </R.Ewfr>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji> を計算するには
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ということは、もし例えば <Emoji>🅰️</Emoji> <Emoji>➕</Emoji>{' '}
+              <Emoji>🅱️</Emoji>{' '}
+              を計算したかったら、以下のような計算箱を用意すればいいのです。
+            </P>
+            <R.Nmbt>
+              <Emoji>🅰️</Emoji> <Emoji>➕</Emoji> <Emoji>🅱️</Emoji> を計算
+            </R.Nmbt>
+            <P>
+              たとえば、
+              <EmojiNumber number={5} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算するには、<Emoji>🅰️</Emoji> に{' '}
+              <EmojiNumber number={5} /> を、<Emoji>🅱️</Emoji> に{' '}
+              <EmojiNumber number={3} /> を入れます。
+            </P>
+            <R.Etku>
+              <Emoji>🅰️</Emoji> に <EmojiNumber number={5} /> を、
+              <Emoji>🅱️</Emoji> に <EmojiNumber number={3} /> を入れる
+            </R.Etku>
+            <P>
+              後は
+              <H args={{ name: 'play' }} /> するだけで、
+              <EmojiNumber number={5} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算してくれます。
+            </P>
+            <R.Iczf>
+              <CustomEmoji type="plusOne" /> を3回繰り返します
+            </R.Iczf>
+            <ExpressionRunnerSeparator />
+            <R.Vsvt>
+              <EmojiNumber number={5} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={3} /> を計算できました！
+            </R.Vsvt>
+            <P>
+              このようにすれば、
+              <CustomEmoji type="plusOne" /> の数を間違えることはありませんね！
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>引き算も同じ</>,
+        content: (
+          <>
+            <P>
+              引き算でも同じです。<Emoji>🅰️</Emoji> <Emoji>➖</Emoji>{' '}
+              <Emoji>🅱️</Emoji>{' '}
+              を計算するには、以下のような計算箱を使えばできます。
+            </P>
+            <R.Jaqs>
+              <Emoji>🅰️</Emoji> <Emoji>➖</Emoji> <Emoji>🅱️</Emoji> を計算
+            </R.Jaqs>
+          </>
+        )
+      },
+      {
+        title: <>確実に足し算や引き算を行う</>,
+        content: (
+          <>
+            <Conclusion />
+          </>
+        )
+      },
+      {
+        title: <>ラムダ村にとって、計算箱は必要不可欠</>,
+        content: (
+          <>
+            <P>
+              前回も話したように、
+              <Strong>ラムダ村の村人は計算がとても苦手でした</Strong>
+              。だから彼らは、足し算や引き算を行うときは、計算箱に頼り切っていました。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🌲</Emoji>,
+                <Emoji>😍</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>😍</Emoji>,
+                <Emoji>🌲</Emoji>
+              ]}
+              description={
+                <>
+                  俺ら計算が苦手だから、
+                  <br />
+                  計算箱が無いとやってけない！
+                </>
+              }
+            />
+            <P>
+              村人たちは、計算箱の
+              <Em>
+                「<InlineHeader>1を足す機能</InlineHeader>{' '}
+                <CustomEmoji type="plusOne" />
+                」、「
+                <InlineHeader>1を引く機能</InlineHeader>{' '}
+                <CustomEmoji type="minusOne" />
+                」、そして今回紹介した「
+                <InlineHeader>繰り返しの機能</InlineHeader> <Emoji>🔁</Emoji>
+                」を組み合わせる
+              </Em>
+              ことで、足し算や引き算を正確に行っていたのです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="minusOne" />,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={
+                <>
+                  計算箱の3つの機能を組み合わせることで、
+                  <br />
+                  足し算や引き算を正確に行うことができる
+                </>
+              }
+            />
+            <P>
+              そんなある日、<Strong>ラムダ村である異変が起きました。</Strong>
+            </P>
+            <EmojiSeparator
+              emojis={['🌲', '😮', '❓', '😮', '🌲']}
+              description={<>ある日、ラムダ村で異変が！</>}
+            />
+            <P>詳しくは次のページでお話します！</P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/3.en.tsx b/src/contents/3.en.tsx
index 5f4ca258b..8045b614c 100644
--- a/src/contents/3.en.tsx
+++ b/src/contents/3.en.tsx
@@ -1,4 +1,784 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Strong, Em, Hr, InlineHeader } from 'src/components/ContentTags'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import YesNoButtons from 'src/components/YesNoButtons'
+import CustomEmoji from 'src/components/CustomEmoji'
+import Emoji from 'src/components/Emoji'
+import EmojiWithText from 'src/components/EmojiWithText'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>悪魔、現る</>,
+        content: (
+          <>
+            <P>
+              ある日のこと。平和だったラムダ村に突然、
+              <Strong>
+                とてもとても恐ろしい悪魔 <Emoji>😈</Emoji>
+              </Strong>
+              が現れました。
+            </P>
+            <EmojiSeparator
+              emojis={['🌲', '😈', '🌲']}
+              description={<>悪魔がやってきた！</>}
+            />
+            <P>村人たちは、悪魔を見て震え上がりました。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'scared',
+                  children: (
+                    <P>
+                      ひぇぇ、何も悪いことしていないのに、悪魔がやってきた！
+                    </P>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: <P>怖いよー！もうおしまいだ！</P>
+                }
+              ]}
+            />
+            <P>悪魔はこうささやきました。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>安心しろ、お前たちの命だけは助けてやる。</P>
+                      <P>
+                        <Em>
+                          だが、お前たちが大事にしている
+                          <Strong>
+                            計算箱 <CustomEmoji type="mathBox" />
+                          </Strong>
+                          は、すべて<Strong>没収</Strong>させてもらうぞ！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'scared',
+                  children: <P>えー！計算箱を没収だって？そんな無慈悲な！</P>
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>なぜ計算箱を没収？</>,
+        content: (
+          <>
+            <P>
+              こうして悪魔は、
+              <Strong>ラムダ村から計算箱を取り上げてしまったのです。</Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🌲</Emoji>,
+                <Emoji>😈</Emoji>,
+                <CustomEmoji type="mathBox" />,
+                <Emoji>🌲</Emoji>
+              ]}
+              description={<>計算箱は没収だ！</>}
+            />
+            <P>ラムダ村からは、すべての計算箱が無くなってしまいました。</P>
+            <R.Dgyc>
+              <Emoji>😈</Emoji> 計算箱は没収だ！
+            </R.Dgyc>
+            <P>
+              足し算や引き算をするのに計算箱に頼り切っていた村人たちは嘆きました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <P>悪魔め、どうして俺らから計算箱を取り上げるんだ！</P>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        <Em>俺らは計算が大の苦手なんだ。</Em>
+                      </P>
+                      <P>
+                        計算箱がないと、足し算や引き算ができなくなって、村の経済が成り立たなくなるんだぞ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>悪魔は答えます。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          計算箱を取り上げたのは、お前たちが計算が苦手だからだよ。
+                        </Strong>
+                      </P>
+                      <P>
+                        お前たちは簡単な計算をするのにでも計算箱に頼り切っているだろう。そんなことだから、いつまでたっても計算が上達しないんだ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>それは図星かも…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          だから計算箱を取り上げることで、お前たちが計算を勉強するきっかけを作ってやったのさ。
+                        </Em>
+                        感謝するんだな！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: <P>そんな…勉強なんてしたくないよ！</P>
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>悪魔からの挑戦状</>,
+        content: (
+          <>
+            <P>
+              なんとか計算箱を返してもらえないか、村人たちは悪魔にお願いしました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <P>お願いだ、何でもするから計算箱を返してくれないか？</P>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: <P>頼む、この通りだ！</P>
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <P>
+                      ふむ…そこまで言うなら仕方ない。では、
+                      <Strong>お前たちにチャンスをやろう！</Strong>
+                    </P>
+                  )
+                }
+              ]}
+            />
+            <P>悪魔が言うチャンスとは、どういうことなのでしょうか？</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          これから、
+                          <Strong>頭を使わないと解けないパズル</Strong>
+                          をたくさん出題する。
+                          <Strong>
+                            すべて解けたら、計算箱を返してやってもいいぞ！
+                          </Strong>
+                        </Em>
+                      </P>
+                      <P>
+                        日頃から頭を使ってこなかったお前たちには、おそらくムリだろうがな！わはは！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: <P>パ、パズルだって…？俺らに解けるかなあ？</P>
+                },
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>
+                        難しそう…しかし、やるしかない！計算箱を取り返すんだ！
+                      </P>
+                      <P>
+                        <Em>その挑戦、受けて立つぞ！</Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ほほう…いい度胸だ。では、はじめよう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              こうして、村人たちは計算箱を返してもらうべく、悪魔が出題するパズルに挑戦することになりました。
+            </P>
+            <EmojiSeparator
+              emojis={['😠', '🆚', '😈']}
+              description={<>パズルを解いて、計算箱を取り返す！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'bentoBoxPuzzle' }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        お前たちに解いてもらうパズルは、{' '}
+                        <Strong>
+                          <H args={{ name: 'bentoBoxPuzzle' }} />
+                        </Strong>
+                        というものだ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>弁当箱</Strong>
+                        だって？なんか美味しそうな名前だなあ…
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そして、これがその
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        だ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ilpo>
+              <H args={{ name: 'bentoBoxPuzzle' }} /> の一例
+            </R.Ilpo>
+            <P>
+              <InlineHeader>解説:</InlineHeader> 上のように、
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              には、実際の弁当箱のように、
+              <Em>
+                四角の中にいくつかマスがあり、それぞれのマスの中に料理が入っています
+              </Em>
+              。
+            </P>
+            <P>
+              この例だと、上段には
+              <EmojiWithText letter="b" />
+              が入っており、
+            </P>
+            <R.Vowa>
+              上段には
+              <EmojiWithText letter="b" />
+            </R.Vowa>
+            <P>
+              下段には
+              <EmojiWithText letter="a" />
+              がふたつ入っています。
+            </P>
+            <R.Elku>
+              下段には
+              <EmojiWithText letter="a" />
+            </R.Elku>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なんとなく、
+                        <Em>見た目が計算箱に似ている</Em>
+                        気がするなあ。数字の代わりに、料理が入っているけど。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        実はこの
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        は、<Em>計算箱と密接な関係がある</Em>
+                        んだが、これについては後に説明する。
+                      </P>
+                      <P>
+                        とりあえず今は、
+                        <Em>
+                          <H args={{ name: 'bentoBoxPuzzle' }} />の
+                          <H args={{ name: 'play' }} /> について見ていこう。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            弁当箱を
+            <H args={{ name: 'play' }} />
+            する
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <Em>
+                <H args={{ name: 'bentoBoxPuzzle' }} />
+                は、計算箱と同じように
+                <H args={{ name: 'play' }} /> することができます。
+              </Em>
+              試しに、
+              <Em>
+                <H args={{ name: 'pressPlay' }} />
+              </Em>
+            </P>
+            <R.Itbm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <H args={{ name: 'play' }} /> すると、
+                        <Em>
+                          下のふたつの <EmojiWithText letter="a" /> が消えて、
+                          <EmojiWithText letter="b" /> だけが残った！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ilpo>
+              <H args={{ name: 'play' }} /> すると…
+            </R.Ilpo>
+            <ExpressionRunnerSeparator />
+            <R.Osqo>
+              <EmojiWithText letter="b" /> だけが残る
+            </R.Osqo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        実は、これは<Strong>ある法則</Strong>に則っているんだ。
+                      </P>
+                      <P>
+                        今回は、お前たちに
+                        <Strong>その法則が何か解き明かしてもらうぞ。</Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  弁当箱は、<Strong>どんな法則</Strong>に則って
+                  <br />
+                  <H args={{ name: 'play' }} /> されるでしょう？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        これだけだと法則が何か、まだハッキリと言えないなあ…
+                        <Em>もう少し他の例を試してみないと！</Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            他の
+            <H args={{ name: 'bentoBoxPuzzle' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、他の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              も見てみましょう。
+            </P>
+            <Hr />
+            <P>
+              こちらは、上段には
+              <EmojiWithText letter="e" />
+              、下段には
+              <EmojiWithText letter="c" />と
+              <EmojiWithText letter="d" />
+              が入っています。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Zwpj />
+            <P>
+              今回は
+              <EmojiWithText letter="d" /> が残りました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、さっきと微妙に違うなあ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <Hr />
+            <P>
+              続いて、上段に<Strong>ふたつの料理が入っている場合</Strong>
+              を紹介します。
+            </P>
+            <P>
+              こちらは、上段には
+              <EmojiWithText letter="g" />と<EmojiWithText letter="o" />
+              が、下段には
+              <EmojiWithText letter="f" />
+              がふたつ入っています。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Rivc />
+            <P>
+              今回は
+              <EmojiWithText letter="g" /> と <EmojiWithText letter="o" />{' '}
+              が残りました。
+            </P>
+            <Hr />
+            <P>
+              こちらは、上段には
+              <EmojiWithText letter="j" />と<EmojiWithText letter="p" />
+              、下段には
+              <EmojiWithText letter="h" />と
+              <EmojiWithText letter="i" />
+              が入っています。
+              <H args={{ name: 'pressPlay' }} />
+            </P>
+            <R.Nmmz />
+            <P>
+              今回は
+              <EmojiWithText letter="i" /> が残りました。
+            </P>
+            <Hr />
+            <P>
+              どれも<Strong>ある法則</Strong>
+              に則っているのですが、その法則がお分かりでしょうか？
+            </P>
+            <EmojiSeparator
+              emojis={['🍱', '🤔', '🍱']}
+              description={<>法則が分かりますか？</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>法則が分かった？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <Strong>
+                          弁当箱のパズルは、
+                          <H args={{ name: 'play' }} />
+                          する際にどんな法則に則っているか
+                        </Strong>
+                        、そろそろ分かったかな？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>う、うーん…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        参考までに、今回紹介した4つの例をもう一度載せておこう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <InlineHeader>例その1:</InlineHeader>
+            </P>
+            <R.Ilpo />
+            <ExpressionRunnerSeparator />
+            <R.Osqo />
+            <P>
+              <InlineHeader>例その2:</InlineHeader>
+            </P>
+            <R.Imyd />
+            <ExpressionRunnerSeparator />
+            <R.Bgfl />
+            <P>
+              <InlineHeader>例その3:</InlineHeader>
+            </P>
+            <R.Rakk />
+            <ExpressionRunnerSeparator />
+            <R.Thbw />
+            <P>
+              <InlineHeader>例その4:</InlineHeader>
+            </P>
+            <R.Ldqk />
+            <ExpressionRunnerSeparator />
+            <R.Fogc />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>ふーむ、なんとなく法則が見えてきたような…？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ほう。ではここで、
+                        <Strong>
+                          <H args={{ name: 'yesNoQuiz' }} />
+                        </Strong>
+                        の時間だ。法則が分かったかどうか、チェックしてやるぞ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>自信ないけど…やるしかない！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+            、その1
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              これまでに4種類の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を紹介しましたが、どれも
+              <H args={{ name: 'play' }} />{' '}
+              する際にある法則に従っています。それが分かったかどうか、
+              <H args={{ name: 'yesNoQuiz' }} />
+              でチェックしてみましょう！
+            </P>
+            <EmojiSeparator
+              emojis={['⭕️', '🍱', '❌']}
+              description={<>法則が分かったかどうかチェック！</>}
+            />
+            <P>
+              <H args={{ name: 'question' }} />{' '}
+              <H args={{ name: 'lookAtThisBentoBoxPuzzle' }} />:
+            </P>
+            <R.Loai />
+            <P>
+              これを
+              <H args={{ name: 'play' }} /> すると、
+              <Strong>最終的に下のようになるでしょうか？</Strong>
+              これまでの法則から予想してみてください。
+            </P>
+            <R.Vvjn />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+            、その2
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'question' }} /> こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />を{' '}
+              <H args={{ name: 'play' }} />
+              すると、
+            </P>
+            <R.Uvmv />
+            <P>
+              <Strong>最終的に下のようになるでしょうか？</Strong>
+              これまでの法則から予想してみてください。
+            </P>
+            <R.Hvqh />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: <>答え合わせ</>,
+        content: (
+          <>
+            <P>それぞれ実行すると、次のようになります。</P>
+            <P>
+              <InlineHeader>1問目:</InlineHeader>
+            </P>
+            <R.Zzyu />
+            <P>
+              つまり
+              <Strong>
+                1問目の
+                <H args={{ name: 'theAnswerIs', isYes: true }} />
+              </Strong>{' '}
+              でした。
+            </P>
+            <P>
+              <InlineHeader>2問目:</InlineHeader>
+            </P>
+            <R.Mutg />
+            <P>
+              つまり
+              <Strong>
+                2問目の
+                <H args={{ name: 'theAnswerIs', isYes: false }} />
+              </Strong>{' '}
+              でした。
+            </P>
+          </>
+        )
+      },
+      {
+        title: <>法則は次のページに</>,
+        content: (
+          <>
+            <P>
+              次のページで、
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              の法則を説明します！
+            </P>
+            <EmojiSeparator
+              emojis={['🤔', '🍱', '😈']}
+              description={<>法則は次のページで説明！</>}
+            />
+            <P>
+              法則が分かった方も、よく分からなかった方も、ぜひ次に進んでみてください。
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/4.en.tsx b/src/contents/4.en.tsx
index 5f4ca258b..e363ea2fa 100644
--- a/src/contents/4.en.tsx
+++ b/src/contents/4.en.tsx
@@ -1,4 +1,1146 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Strong, Em, Hr, InlineHeader } from 'src/components/ContentTags'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import Emoji from 'src/components/Emoji'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import * as R from 'src/components/Runners'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import H from 'src/components/H'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export const BasicRules = ({
+  includeFuncUnbound
+}: {
+  includeFuncUnbound?: boolean
+}) => (
+  <>
+    <P>
+      1. <InlineHeader>印をつける:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      {includeFuncUnbound && (
+        <>
+          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+        </>
+      )}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </P>
+    <R.Zzxj>
+      <InlineHeader>印をつける:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      {includeFuncUnbound && (
+        <>
+          <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+        </>
+      )}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </R.Zzxj>
+    <P>
+      2. <InlineHeader>一致チェック:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+      <Emoji>✅</Emoji>
+    </P>
+    <R.Keck>
+      <InlineHeader>一致チェック:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+      <Emoji>✅</Emoji>
+    </R.Keck>
+    <P>
+      3. <InlineHeader>コピーする:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <Emoji>↘️</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </P>
+    <R.Qoms>
+      <InlineHeader>コピーする:</InlineHeader>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <Emoji>↘️</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+    </R.Qoms>
+    <P>
+      4. <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+    </P>
+    <R.Mhgm>
+      <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+      <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+      <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+    </R.Mhgm>
+    <ExpressionRunnerSeparator />
+    <R.Osqo />
+  </>
+)
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>法則が分かった！</>,
+        content: (
+          <>
+            <EmojiSeparator
+              emojis={['🍱', '😁', '🍱']}
+              description={<>分かったぞ！</>}
+            />
+            <P>
+              どうやら、ラムダ村の村人たちは
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              の法則を見抜いたようです！
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>やった、法則が分かったぞ！</Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        なんと…本当に分かったというなら、説明してみることだな！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>下のふたつの料理が同じの場合</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ説明しよう。まず、
+                        <Strong>下のふたつの料理を比べてみる</Strong>。
+                      </P>
+                      <P>
+                        <Em>
+                          もし下のふたつの料理が<Strong>同じ</Strong>なら、
+                          <H args={{ name: 'play' }} />
+                          したときに<Strong>上にある</Strong>料理が残る
+                        </Em>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vmkg>
+              下の料理が同じ (両方とも <EmojiWithText letter="a" />)
+            </R.Vmkg>
+            <ExpressionRunnerSeparator />
+            <R.Osqo>
+              上にあった
+              <EmojiWithText letter="b" /> が残る
+            </R.Osqo>
+            <Hr />
+            <R.Wtup>
+              下の料理が同じ (両方とも <EmojiWithText letter="f" />)
+            </R.Wtup>
+            <ExpressionRunnerSeparator />
+            <R.Weoz>
+              上にあった
+              <EmojiWithText letter="g" /> と
+              <EmojiWithText letter="o" /> が残る
+            </R.Weoz>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        そして、以下が <H args={{ name: 'yesNoQuiz' }} />
+                        の1問目の答えだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dogu>
+              下の料理が同じ (両方とも
+              <EmojiWithText letter="k" />)
+            </R.Dogu>
+            <ExpressionRunnerSeparator />
+            <R.Vvjn>
+              上にあった <EmojiWithText letter="l" /> が残る
+            </R.Vvjn>
+          </>
+        )
+      },
+      {
+        title: <>下のふたつの料理が異なる場合</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        次に、
+                        <Strong>下のふたつの料理が異なる場合</Strong>。
+                      </P>
+                      <P>
+                        <Em>
+                          この場合は、
+                          <H args={{ name: 'play' }} />
+                          したときに<Strong>右下にある</Strong>料理が残る
+                        </Em>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nplf>
+              下の料理が異なる (<EmojiForLetter letter="c" /> と{' '}
+              <EmojiForLetter letter="d" />)
+            </R.Nplf>
+            <ExpressionRunnerSeparator />
+            <R.Bgfl>
+              右下にあった <EmojiWithText letter="d" /> が残る
+            </R.Bgfl>
+            <Hr />
+            <R.Immq>
+              下の料理が異なる (<EmojiForLetter letter="h" /> と{' '}
+              <EmojiForLetter letter="i" />)
+            </R.Immq>
+            <ExpressionRunnerSeparator />
+            <R.Cpkp>
+              右下にあった <EmojiWithText letter="i" /> が残る
+            </R.Cpkp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        そして、以下が <H args={{ name: 'yesNoQuiz' }} />
+                        の2問目の答えだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cowm>
+              下の料理が異なる (<EmojiForLetter letter="k" /> と{' '}
+              <EmojiForLetter letter="m" />)
+            </R.Cowm>
+            <ExpressionRunnerSeparator />
+            <R.Ozxi>
+              右下にあった <EmojiWithText letter="m" /> が残る
+            </R.Ozxi>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>どうだ、これが正解だろう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>正解！</>,
+        content: (
+          <>
+            <EmojiSeparator
+              emojis={['🎉', '😈', '🎉']}
+              description={<>その通り！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>正解、まさにその通りだ！</Strong>{' '}
+                        <Emoji>🎉</Emoji> <Emoji>🎉</Emoji> <Emoji>🎉</Emoji>
+                      </P>
+                      <P>
+                        今まで勉強を怠けてきたわりには、なかなかやるじゃないか。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>やった！やった！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>だが、喜ぶのはまだ早い。</Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'scared',
+                  children: (
+                    <>
+                      <P>えー、なんで？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        次のページから、さらに難しい
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        を解いてもらう。そのためには、
+                        <Em>
+                          <H args={{ name: 'bentoBoxPuzzle' }} />
+                          の法則を明確にする必要がある。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>法則を明確にする？どういうこと？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>法則を明確にする</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        先ほどお前が言った、
+                        <Em>
+                          「下のふたつの料理を比べて、同じなら上が残る。違うなら右下が残る」というのは
+                          <Strong>明確さに欠ける。</Strong>
+                          さらに複雑なパズルを解くには、法則としては不十分なんだ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>えー、そうなのか…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        さらに複雑なパズルを解くには、もっと法則をハッキリさせる、すなわち明確化する必要があるんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['✅', '🍱', '✅']}
+              description={
+                <>
+                  もっと法則を明確にしないと
+                  <br />
+                  複雑なパズルを解けない
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          というわけで、これから
+                          <H args={{ name: 'bentoBoxPuzzle' }} />の
+                          <Strong>明確な法則</Strong>を紹介する。
+                        </Em>
+                        それを理解した上で、さらに複雑なパズルを解いてもらおう。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        うーん、よくわからないけど、とりあえずその明確な法則とやらを聞いてみよう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'bentoBoxPuzzle' }} />
+            の明確な法則
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        の明確な法則をまとめてみよう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <BasicRules />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>では、それぞれのステップについて解説していくぞ。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            1. 印をつける{' '}
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それぞれのステップについて、 こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を使って説明していきます。
+            </P>
+            <R.Ilpo />
+            <P>
+              まず、
+              <Strong>
+                上の料理には{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />
+                、左の料理には{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+                、右の料理には{' '}
+                <BottomRightBadge
+                  inline
+                  bottomRightBadgeType="funcBound"
+                />{' '}
+                の印をつけます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                  の印をつける
+                </>
+              }
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Ozbe />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <EmojiWithText letter="b" />に{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        の印が、下の
+                        <EmojiWithText letter="a" />
+                        ふたつにそれぞれ{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />{' '}
+                        の印がついた！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            2. 一致チェック{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+            <Emoji>✅</Emoji>
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              続いて、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                が一致するかチェックし、一致した料理には、
+                <Emoji>✅</Emoji> を付けます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />,
+                <Emoji>✅</Emoji>
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                  が一致したら <Emoji>✅</Emoji> をつける
+                </>
+              }
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Rqjo />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />{' '}
+                        の<EmojiWithText letter="a" /> に <Emoji>✅</Emoji>{' '}
+                        がついた！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            3. <InlineHeader>コピーする:</InlineHeader>{' '}
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+            <Emoji>↘️</Emoji>{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              続いて、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                の料理を、一致した{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                の部分にコピーします。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <Emoji>↘️</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                  を一致した{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                  にコピー
+                </>
+              }
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Evqx />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />
+                        の
+                        <EmojiWithText letter="b" />が
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />
+                        の部分にコピーされた！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            4. <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              最後に、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                が消えます。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>💥</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                  が消える
+                </>
+              }
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Msiw />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        が <Emoji>💥</Emoji> になった！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              そして、最終的に
+              <EmojiWithText letter="b" /> だけになります。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Kbnn />
+            <P>以上です！</P>
+          </>
+        )
+      },
+      {
+        title: <>上にふたつの料理がある場合</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        では、たとえば下の例のように、
+                        <Strong>上にふたつの料理がある場合</Strong>
+                        はどうなるんだろう？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rakk>
+              上にふたつの料理がある
+              <br />(<EmojiWithText letter="g" /> と
+              <EmojiWithText letter="o" />)
+            </R.Rakk>
+            <P>
+              この場合、上にある
+              <EmojiWithText letter="g" /> と
+              <EmojiWithText letter="o" /> には
+              <Strong>
+                両方とも{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                の印がつきます。
+              </Strong>
+            </P>
+            <R.Ycxr>
+              両方とも{' '}
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              の印がつく
+            </R.Ycxr>
+            <P>
+              そして、
+              <EmojiWithText letter="f" /> が一致したあとに…
+            </P>
+            <R.Dkdt />
+            <P>
+              <EmojiWithText letter="g" /> と
+              <EmojiWithText letter="o" /> が
+              <Strong>両方ともコピーされます。</Strong>
+            </P>
+            <R.Sxnt />
+            <P>
+              最後に、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> が消え…
+            </P>
+            <R.Issq />
+            <P>
+              <EmojiWithText letter="g" /> と <EmojiWithText letter="o" />{' '}
+              が残るのです。
+            </P>
+            <R.Thbw />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'fastForward' }} /> で見てみましょう
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、最初から最後まで
+              <H args={{ name: 'fastForward' }} /> で見てみましょう。
+              <H args={{ name: 'fastForward' }} /> 機能を使うと、
+              <Em>各ステップを自動で見ていくことができます。</Em>
+            </P>
+            <EmojiSeparator
+              emojis={['⏩', '🍱', '⏩']}
+              description={<>早送りすると、各ステップが自動で見れる</>}
+            />
+            <P>
+              こちらは、上にひとつの料理がある例です。
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Wunw />
+            <P>
+              こちらは、上にふたつの料理がある例です。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Hluq />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>というわけで、ここまでをまとめてみましょう。</P>
+            <BasicRules />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>なるほど、そういう仕組みになっていたのか！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        うむ。そして、
+                        <Em>
+                          こうやってルールを明確にすれば、パズルが複雑になっても応用が効く
+                        </Em>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>一致しなかったら？</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />,
+                <Emoji>❌</Emoji>
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                  が一致しなかったら？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <Strong>
+                          もし{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          が一致しなかったらどうするの？
+                        </Strong>
+                      </P>
+                      <P>
+                        たとえば下の弁当箱の場合は、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />{' '}
+                        が一致しないよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Sgfj />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            コピーはせず、
+            <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+            を消すだけ
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              が一致しない場合は、
+              <Strong>
+                コピーはせずに、ただ{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                を消すだけです。
+              </Strong>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Gwtp />
+            <P>
+              そして、最終的に
+              <EmojiWithText letter="d" />
+              だけになります。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Grla />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'fastForward' }} />
+            で見てみましょう
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              復習のために、
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              が一致しなかった場合も、最初から最後まで
+              <H args={{ name: 'fastForward' }} /> で見てみましょう。
+            </P>
+            <EmojiSeparator
+              emojis={['⏩', '🍱', '⏩']}
+              description={<>早送りで復習しよう！</>}
+            />
+            <P>
+              こちらは、上にひとつの料理がある例です。
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Jbam />
+            <P>
+              こちらは、上にふたつの料理がある例です。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Zuus />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />: 一致しなかった場合
+          </>
+        ),
+        type: 'summary',
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              が一致しなかった場合、
+              <Strong>
+                コピーはせずに、ただ{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                を消す
+              </Strong>
+              。
+            </P>
+            <R.Jwzh>
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              が一致しなかった場合…
+            </R.Jwzh>
+            <ExpressionRunnerSeparator />
+            <R.Knhw>
+              コピーはせずに、ただ{' '}
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> を消す
+            </R.Knhw>
+          </>
+        )
+      },
+      {
+        title: <>以上です！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        以上が、
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        の明確な法則だ。理解できたかな？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>な、なんとか…でも、まだ覚えきれてないなあ。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          法則を覚えきれていなくても、次回また復習するので大丈夫だ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'relieved',
+                  children: (
+                    <>
+                      <P>
+                        ホッ、よかった… (悪魔って意外と優しいんじゃ？
+                        <Emoji>🤔</Emoji>)
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>次回では、もっと複雑なパズルを出題する。</Em>
+                        計算箱を返してほしかったら、解いてみせるんだな！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>望むところだ！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/5.en.tsx b/src/contents/5.en.tsx
index 5f4ca258b..5b1123c11 100644
--- a/src/contents/5.en.tsx
+++ b/src/contents/5.en.tsx
@@ -1,4 +1,1950 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Em,
+  Strong,
+  Ul,
+  UlLi,
+  Ol,
+  OlLi,
+  InlineHeader,
+  Hr
+} from 'src/components/ContentTags'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import H from 'src/components/H'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import Emoji from 'src/components/Emoji'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import InlineBackground from 'src/components/InlineBackground'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import YesNoButtons from 'src/components/YesNoButtons'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+const WillReturn = () => (
+  <>
+    <EmojiSeparator
+      emojis={['❓', '😈', '❓']}
+      noBottomMargin
+      description={
+        <>
+          次の中級編で難しい問題を出題する。
+          <br />
+          このページで学んだ内容で解けるはず！
+        </>
+      }
+    />
+    <EmojiSeparator
+      noTopMargin
+      nodes={[
+        <Emoji>✨</Emoji>,
+        <CustomEmoji type="mathBox" />,
+        <Emoji>✨</Emoji>
+      ]}
+      description={<>解けたら計算箱を返してやろう！</>}
+    />
+  </>
+)
+
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>3段の弁当箱</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ここからは、より複雑な
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        を解いてもらおう。たとえば、こういうパズルだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cvtc>
+              3段の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+            </R.Cvtc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        これは…
+                        <Em>
+                          今までの弁当箱は縦に2段しかなかったけれど、
+                          <Strong>この弁当箱には縦に3段ある</Strong>ぞ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        そして、
+                        <Strong>
+                          一番下には
+                          <EmojiWithText letter="a" />、
+                          <EmojiWithText letter="b" />、
+                          <EmojiWithText letter="a" />
+                          と横に3つの料理が並んでいる。
+                        </Strong>
+                      </P>
+                      <P>
+                        今までの弁当箱では、
+                        <Em>横に3つの料理が並んだことはなかった</Em>。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そうだな。そしてさらに、
+                        <Em>
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel> や{' '}
+                          <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+                          という数字が左端に表示されている
+                        </Em>
+                        のに気づいたかな？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cvtc>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel> や{' '}
+              <InlinePrioritiesLabel>2</InlinePrioritiesLabel>
+              という数字が
+              <br />
+              左端に表示されているのにも注目
+            </R.Cvtc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>たしかに。</P>
+                      <P>こういうパズルは、どうやって解けばいいんだろう？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ではまず、こういった3段の
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        の解き方を説明しよう。
+                      </P>
+                      <P>
+                        そして
+                        <Em>
+                          解き方を説明した後に、
+                          <H args={{ name: 'yesNoQuiz' }} />
+                          を出題し、お前たちに自力で解いてもらう
+                        </Em>
+                        ぞ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>よし、やってやる！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            先に <InlinePrioritiesLabel>1</InlinePrioritiesLabel> のペアに注目
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              3段の
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              を解く際には、まず
+              <Strong>
+                左上と左下に <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                の印がある部分に注目します。
+              </Strong>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>,
+                <Emoji>🍱</Emoji>,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              ]}
+              description={
+                <>
+                  先に <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                  のペアに注目
+                </>
+              }
+            />
+            <P>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Aaov />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                        のペアがピンク色の{' '}
+                        <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>{' '}
+                        になり、一番上の背景が暗い色{' '}
+                        <InlineBackground bgColor={'indigo50'} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そう。これは、
+                        <Em>
+                          暗い色 <InlineBackground bgColor={'indigo50'} />{' '}
+                          の部分は無視して、
+                          <InlinePrioritiesLabel revert>
+                            1
+                          </InlinePrioritiesLabel>{' '}
+                          のペアの部分に注目する
+                        </Em>
+                        ということだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+            、そして
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              次に、<InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>{' '}
+              のペアの部分に{' '}
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              などの印をつけます。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Qxob />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          下段真ん中の <EmojiWithText letter="b" /> には、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          の印がついた！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetter letter="b" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <EmojiForLetter letter="b" />
+              ]}
+              description={
+                <>
+                  下段の真ん中には{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  をつける
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そう、前回では登場しなかったが、
+                        <Em>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcArg"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          のどれにも該当しない、
+                          <Strong>下段の真ん中にある料理</Strong>には{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          をつけるんだ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど。じゃあ、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        がついた料理はどうなるんだ？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+            は無視していい
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              の印がついた料理は、<Strong>いったん無視してください</Strong>。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />,
+                <Emoji>🙄</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  はいったん無視する
+                </>
+              }
+            />
+            <P>前回も話した通り、続いて以下のステップを行いますが、</P>
+            <Ul>
+              <UlLi>
+                <InlineHeader>一致チェック:</InlineHeader>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                <Emoji>✅</Emoji>
+              </UlLi>
+              <UlLi>
+                <InlineHeader>コピーする:</InlineHeader>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                <Emoji>↘️</Emoji>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />
+              </UlLi>
+              <UlLi>
+                <InlineHeader>消す:</InlineHeader> <Emoji>💥</Emoji>{' '}
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />
+              </UlLi>
+            </Ul>
+            <P>
+              <Em>
+                どれも{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                は関係ありませんよね。だから、
+                <Strong>
+                  次のいくつかのステップの間は{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  を無視していい
+                </Strong>
+                のです。
+              </Em>
+            </P>
+            <R.Pbhg>
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" /> の
+              <EmojiWithText letter="b" /> は、
+              <br />
+              次のいくつかのステップの間は無視していい
+            </R.Pbhg>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>なるほど。じゃあ、続きを見ていこう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+            のペア部分を終わらせる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              では、<InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              のペア部分を終わらせましょう。やり方は前回と同じです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>,
+                <Emoji>🍱</Emoji>,
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>
+              ]}
+              description={
+                <>
+                  <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>{' '}
+                  のペア部分を終わらせる
+                </>
+              }
+            />
+            <P>
+              まず、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                が一致するかチェックし、一致した料理には <Emoji>✅</Emoji>{' '}
+                を付けます。
+              </Strong>
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Wwtl />
+            <P>
+              続いて、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                の料理を、一致した{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                の部分にコピーします。
+              </Strong>
+            </P>
+            <R.Ltpe />
+            <P>
+              最後に、
+              <Strong>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                が消えます。
+              </Strong>
+            </P>
+            <R.Apuz />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          上記のどのステップにおいても、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          は関係なかった
+                        </Em>
+                        だろう？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、だから、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        はいったん無視していいのか。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel> が消え、
+            <InlinePrioritiesLabel>2</InlinePrioritiesLabel> が{' '}
+            <InlinePrioritiesLabel>1</InlinePrioritiesLabel> に
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              さらに続きを見ていきましょう。
+              <H args={{ name: 'pressNext' }} />
+            </P>
+            <R.Uwma />
+            <Ul>
+              <UlLi>
+                <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+                が消えると同時に、
+              </UlLi>
+              <UlLi>
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel> が消え、
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel> が{' '}
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel> になりました。
+              </UlLi>
+            </Ul>
+            <EmojiSeparator
+              nodes={[
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>,
+                <CustomEmoji type="singleArrow" />,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            残った<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
+            のペアを終わらせる
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        残った弁当箱は、前のページで見たのと同じようなやつだ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jwue>残った弁当箱はシンプルな2段</R.Jwue>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そうだ。そして、先ほど{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        だった
+                        <EmojiWithText letter="b" /> に、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        の印がついているのに注目だ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Sgnp>
+              <EmojiWithText letter="b" /> が{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> に
+            </R.Sgnp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        あとは前回とやり方は変わらない。
+                        <H args={{ name: 'fastForward' }} />{' '}
+                        で最後まで見てみよう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Kvso />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        最後に <EmojiWithText letter="c" /> が残った！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>これで終了だ！どうだ、理解できたかな？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、なんとなく…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では復習のために、最初から最後まで
+                        <H args={{ name: 'fastForward' }} /> で見てみよう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Beiz />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>まとめると、</P>
+                      <Ol>
+                        <OlLi>
+                          <Em>
+                            まず先に{' '}
+                            <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                            のペアからはじめる。
+                          </Em>
+                        </OlLi>
+                        <OlLi>
+                          <Em>
+                            下段の真ん中にある料理には{' '}
+                            <BottomRightBadge
+                              inline
+                              bottomRightBadgeType="funcUnbound"
+                            />{' '}
+                            をつける。
+                            <BottomRightBadge
+                              inline
+                              bottomRightBadgeType="funcUnbound"
+                            />{' '}
+                            は、いったん無視して構わない。
+                          </Em>
+                        </OlLi>
+                        <OlLi>
+                          <Em>
+                            <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                            のペアが終わると、
+                            <InlinePrioritiesLabel>
+                              2
+                            </InlinePrioritiesLabel> が{' '}
+                            <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                            になるので、また繰り返す。
+                          </Em>
+                        </OlLi>
+                      </Ol>
+                      <P>こんなところかな？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        その通り。では、
+                        <Strong>
+                          そろそろ <H args={{ name: 'yesNoQuiz' }} />
+                          の時間だ！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>えー、ちゃんと解けるか、不安だなあ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Dkiy />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Yiri />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'theAnswerIs', isYes: true }} />{' '}
+                          だと思う！
+                        </Strong>
+                        最後には
+                        <EmojiWithText letter="h" />
+                        が残るはずだ。
+                      </P>
+                      <P>
+                        <H args={{ name: 'fastForward' }} /> で見てみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              では、
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Hdxc />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        やった！最後に
+                        <EmojiWithText letter="h" />
+                        が残ったので、<Emoji>⭕️</Emoji> が正解だ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ぐぬぬ…やるじゃないか！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>ふたつの細かい法則</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'wink',
+                  children: (
+                    <>
+                      <P>どうだ、そろそろ計算箱を返す気になったか？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        まだドヤ顔をするような時間じゃないぞ。弁当箱の「
+                        <Strong>細かい法則</Strong>
+                        」に関する問題を出していないからな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  弁当箱の「
+                  <Strong>細かい法則</Strong>
+                  」？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        弁当箱の「
+                        <Strong>細かい法則</Strong>
+                        」だって？何のことだ？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        まず、こちらの
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        を見てみな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Laea>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアがふたつある
+            </R.Laea>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        今まで見たことない形のパズルだ。
+                        <Strong>
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                          のペアがふたつある
+                        </Strong>
+                        なあ…
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        続いて、こちらの
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        を見てみな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Gtdu>
+              一番下の料理が
+              <EmojiWithText letter="b" />
+              ひとつだけ
+            </R.Gtdu>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        これも見たことない形だなあ…
+                        <Strong>
+                          一番下に入っている料理が
+                          <EmojiWithText letter="b" />
+                          ひとつだけだ。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>細かい法則を知らないと解けない</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        上で紹介したようなパズルを解くには、これから紹介する弁当箱の「
+                        <Strong>細かい法則</Strong>
+                        」を知っておかないといけない。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['❓', '🍱', '❓']}
+              description={
+                <>
+                  弁当箱の「
+                  <Strong>細かい法則</Strong>
+                  」を
+                  <br />
+                  知らないと解けない
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Em>その法則はふたつある。</Em>
+                        順番に紹介していこう！もちろん、
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        もやるからな！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        えー、また <H args={{ name: 'yesNoQuiz' }} />
+                        か！いつになったら計算箱を返してくれるんだ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        まあそう焦るな。
+                        <Em>
+                          <Strong>
+                            次からはじまる中級編で、とても難しい問題を出題する。
+                          </Strong>
+                          このページで紹介した法則を応用すれば解ける問題だ。それに答えることができたら、計算箱を返してやろう！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <WillReturn />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        え、ということはもうすぐ計算箱を返してもらえるのか！じゃあ、あと少し頑張ろう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            細かい法則その1: 一番左の{' '}
+            <InlinePrioritiesLabel>1</InlinePrioritiesLabel> のペアからはじめる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              まずは、こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              から見ていきましょう。
+            </P>
+            <R.Laea>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアがふたつある
+            </R.Laea>
+            <P>
+              <InlineHeader>細かい法則その1:</InlineHeader>{' '}
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアがふたつ以上ある場合は、<Strong>左側にある</Strong>{' '}
+                <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめます。
+              </Em>
+            </P>
+            <R.Aezk>
+              <Strong>左側にある</Strong>{' '}
+              <InlinePrioritiesLabel revert>1</InlinePrioritiesLabel>{' '}
+              のペアからはじめる
+            </R.Aezk>
+            <P>
+              では、
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              はどうなるのか見ていきましょう。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcArg" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcBound" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+            />
+            <P>
+              まず、上の <EmojiWithText letter="a" /> には{' '}
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              の印がつきます。
+            </P>
+            <R.Igrl />
+            <P>
+              次に、左の
+              <EmojiWithText letter="b" />
+              には <BottomRightBadge
+                inline
+                bottomRightBadgeType="funcArg"
+              />{' '}
+              の印がつきます。
+            </P>
+            <R.Uppk />
+            <P>
+              そして、右の
+              <EmojiWithText letter="b" /> と<EmojiWithText letter="c" /> には{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              の印がつきます。
+            </P>
+            <R.Qfbk />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ここでは、
+                        <EmojiWithText letter="b" /> にも{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />{' '}
+                        がついたのに注目だ。
+                      </P>
+                      <P>
+                        <Strong>
+                          弁当箱の右端に接している料理にはすべて{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          の印がつく
+                        </Strong>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              最後に、残った
+              <EmojiWithText letter="c" /> には{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              の印がつきます。
+            </P>
+            <R.Yfwd />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcArg"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          のどれにも該当しない場合には{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          の印がつく
+                        </Strong>
+                        んだな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              そして、
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              にある
+              <EmojiWithText letter="b" /> が一致するので…
+            </P>
+            <R.Dtzu />
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> にある
+              <EmojiWithText letter="a" /> が、
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" /> の
+              <EmojiWithText letter="b" /> のところにコピーされます。
+            </P>
+            <R.Vilr />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど、けっこう難しいなあ。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              では、ここからは
+              <H args={{ name: 'fastForward' }} /> で見ていきましょう！
+            </P>
+            <R.Izgz />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        最後は
+                        <EmojiWithText letter="a" /> だけが残った！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        そうだ。理解できたかな？では、ここで{' '}
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        の時間だ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Wcer />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Mqvu />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'theAnswerIs', isYes: false }} />{' '}
+                          だと思う！
+                        </Strong>
+                        最後には
+                        <EmojiWithText letter="a" /> ではなく、
+                        <EmojiWithText letter="d" /> が残るはずだ。
+                      </P>
+                      <P>
+                        <H args={{ name: 'fastForward' }} /> で見てみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              では、
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Thkn />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        やった！最後に
+                        <EmojiWithText letter="a" />
+                        ではなく
+                        <EmojiWithText letter="d" />
+                        が残ったので、<Emoji>❌</Emoji> が正解だ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'sideNote',
+        title: (
+          <>
+            補足: 左端に <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+            のペアがない場合
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              ここで補足です。まず、下の弁当箱をご覧ください。先ほどの{' '}
+              <H args={{ name: 'yesNoQuiz' }} />
+              で登場した弁当箱とほとんど同じですが、
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアが弁当箱の左端になく、内側だけにあります。
+              </Em>
+            </P>
+            <R.Dhzf>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアが弁当箱の左端になく、
+              <br />
+              内側だけにある
+            </R.Dhzf>
+            <P>
+              このような場合、
+              <Em>
+                内側の <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアの部分からはじめます。
+              </Em>
+            </P>
+            <R.Mhyv>
+              内側の <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアからはじめる
+            </R.Mhyv>
+            <P>
+              残りは
+              <H args={{ name: 'fastForward' }} /> で見てみましょう。
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Ayok />
+            <P>
+              まとめると、
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアが弁当箱の左端にない場合は、内側の{' '}
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめればいい
+              </Em>
+              のです。
+            </P>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            細かい法則その2: <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+            のペアのからはじめられない場合、
+            <InlinePrioritiesLabel>2</InlinePrioritiesLabel> のペアからはじめる
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              続いて、こちらの
+              <H args={{ name: 'bentoBoxPuzzle' }} />
+              をご覧ください。
+            </P>
+            <R.Gtdu>
+              一番下の料理が
+              <EmojiWithText letter="b" /> ひとつだけ
+            </R.Gtdu>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱は、
+                        <Strong>
+                          一番下の段の料理が
+                          <EmojiWithText letter="b" /> だけ
+                        </Strong>
+                        なのに注目だ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        たしかに…仮に{' '}
+                        <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                        のペアからはじめるとしたら、
+                      </P>
+                      <P>
+                        この
+                        <EmojiWithText letter="b" />
+                        には、
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcArg"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          のうち、どの印をつければいいのだろう？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jmmp>
+              <EmojiWithText letter="b" /> には、
+              <br />
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              のうちどの印をつければいい？
+            </R.Jmmp>
+            <P>
+              答えは、「<Strong>どの印もつけることができない</Strong>
+              」です。
+              <Em>
+                一番下の段にひとつしか料理がない場合、どの印をつけることもできないのです
+              </Em>
+              。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>❌</Emoji>,
+                <EmojiForLetter letter="b" />,
+                <Emoji>❌</Emoji>
+              ]}
+              description={
+                <>
+                  <EmojiWithText letter="b" /> には、
+                  <br />
+                  <BottomRightBadge
+                    inline
+                    bottomRightBadgeType="funcArg"
+                  />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  のどれもつけられない
+                </>
+              }
+            />
+            <P>
+              ということはつまり、
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめることができない
+              </Em>
+              、ということになります。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>❌</Emoji>,
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>,
+                <Emoji>❌</Emoji>
+              ]}
+              description={
+                <>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                  のペアからはじめられない
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>じゃあ、どうすればいいんだ？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <InlineHeader>答え:</InlineHeader> 上記のように{' '}
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアからはじめられない場合は、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                のペアからはじめます。
+              </Strong>
+            </P>
+            <R.Dqey>
+              <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+              のペアからはじめる
+            </R.Dqey>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、
+                        <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                        のペアからはじめれば、
+                        <Em>
+                          下の段に
+                          <EmojiWithText letter="a" />
+                          がふたつあるから、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          の印をつけられるね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        その通り。
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />
+                        は以下の通りになるぞ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Oork>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcArg" />{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcBound" />{' '}
+              はこうなる
+            </R.Oork>
+            <P>
+              残りは
+              <H args={{ name: 'fastForward' }} /> で見ていきましょう:
+            </P>
+            <R.Diis />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        最終的に
+                        <EmojiWithText letter="c" />と
+                        <EmojiWithText letter="b" />
+                        が残った！
+                      </P>
+                      <P>
+                        <Em>
+                          このふたつが残った時点で、もうこれ以上進められないから、そこで終了する
+                        </Em>
+                        というわけか。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        その通りだ。では、ここで{' '}
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        の時間だ。
+                      </P>
+                      <P>
+                        <Em>
+                          これが初級最後の <H args={{ name: 'yesNoQuiz' }} />
+                          になるぞ！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <H args={{ name: 'lookAtThisBentoBox' }} />:
+            </P>
+            <R.Fclo />
+            <P>
+              <H args={{ name: 'whatHappensAtTheEndQuestion' }} />
+            </P>
+            <R.Rgta />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'theAnswerIs', isYes: true }} />{' '}
+                          だと思う！
+                        </Strong>
+                        最後には
+                        <EmojiWithText letter="d" />と
+                        <EmojiWithText letter="b" />
+                        が残るはずだ。
+                      </P>
+                      <P>
+                        <H args={{ name: 'fastForward' }} /> で見てみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              では、
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
+            </P>
+            <R.Cuwg />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        やった！最後に
+                        <EmojiWithText letter="d" />と
+                        <EmojiWithText letter="b" />
+                        が残ったので、<Emoji>⭕️</Emoji> が正解だ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              <InlineHeader>3段の弁当箱は、以下のように解きます。</InlineHeader>
+            </P>
+            <Ol>
+              <OlLi>
+                <Em>
+                  まず先に <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                  のペアからはじめる。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  下段の真ん中にある料理には{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  をつける。
+                  <BottomRightBadge
+                    inline
+                    bottomRightBadgeType="funcUnbound"
+                  />{' '}
+                  は、いったん無視して構わない。
+                </Em>
+              </OlLi>
+              <OlLi>
+                <Em>
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                  のペアが終わると、
+                  <InlinePrioritiesLabel>2</InlinePrioritiesLabel> が{' '}
+                  <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                  になるので、また繰り返す。
+                </Em>
+              </OlLi>
+            </Ol>
+            <R.Vdhd>3段の弁当箱</R.Vdhd>
+            <Hr />
+            <P>
+              <InlineHeader>細かい法則1:</InlineHeader>{' '}
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアがふたつ以上ある場合は、
+              <Strong>一番左のペアからはじめます。</Strong>
+            </P>
+            <R.Hykj>
+              <H args={{ name: 'startWithLeftMostOneCaption' }} />
+            </R.Hykj>
+            <P>
+              <InlineHeader>補足:</InlineHeader>{' '}
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアが弁当箱の左端にない場合は、内側の{' '}
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめる。
+              </Em>
+            </P>
+            <R.Mhyv>
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアが弁当箱の左端にない場合は、
+              <br />
+              内側の <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアからはじめる
+            </R.Mhyv>
+            <Hr />
+            <P>
+              <InlineHeader>細かい法則2:</InlineHeader>{' '}
+              下段にひとつの料理しかなく、
+              <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+              のペアからはじめられない場合、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                のペアからはじめます。
+              </Strong>
+            </P>
+            <R.Dqey>
+              <H args={{ name: 'startWithTwoCaption' }} />
+            </R.Dqey>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>これらの法則を覚えきれるか、不安だなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          安心しろ、これらの法則を暗記する必要はない。
+                        </Strong>
+                        なんとなく「
+                        <Em>こういう法則があるんだな</Em>
+                        」と頭に入れておけば大丈夫だ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>初級はここまで！</>,
+        content: (
+          <>
+            <EmojiSeparator emojis={['🎉', '🤗', '🎉']} />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>
+                        どうだ、
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        をすべて解いたぞ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        やるじゃないか。
+                        <Em>
+                          というわけで、初級編はここで終わりだ。次からは中級編に入る。
+                        </Em>
+                      </P>
+                      <P>
+                        さきほど約束した通り、
+                        <Em>
+                          <Strong>
+                            次からはじまる中級編で、とても難しい問題を出題する。
+                          </Strong>
+                          このページで紹介した法則を応用すれば解ける問題だ。それに答えることができたら、計算箱を返してやろう！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <WillReturn />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>
+                        その難しい問題とやらを解けば、本当に計算箱を返してもらえるのか？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ああ、悪魔に二言はないからな。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>よーし、やってやるぞ！中級編に進もう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/6.en.tsx b/src/contents/6.en.tsx
index 5f4ca258b..d43d9f3bd 100644
--- a/src/contents/6.en.tsx
+++ b/src/contents/6.en.tsx
@@ -1,4 +1,1383 @@
-import React from 'react'
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import { colors, spaces } from 'src/lib/theme'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Em,
+  Strong,
+  Ol,
+  OlLi,
+  InlineHeader
+} from 'src/components/ContentTags'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiNumber from 'src/components/EmojiNumber'
+import Emoji from 'src/components/Emoji'
+import H from 'src/components/H'
+import YesNoButtons from 'src/components/YesNoButtons'
+import ExpressionRunnerButton from 'src/components/ExpressionRunnerButton'
+import * as R from 'src/components/Runners'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>中級編へようこそ！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ここからは中級編だ。
+                        <Em>
+                          約束した通り、この中級編で出題する難しい問題に答えることができたら、計算箱を返してやろう！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>😈</Emoji>,
+                <CustomEmoji type="mathBox" />
+              ]}
+              noBottomMargin
+              description={
+                <>
+                  この中級編で出す難しい問題に
+                  <br />
+                  答えられたら計算箱を返してやろう！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>よーし、やってやる！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        問題を出す前に、わたしの<Strong>助手</Strong>
+                        をここに呼ばせてもらおう。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なに、お前の助手だって？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>いま呼ぶから、ちょっと待つんだな。</P>
+                      <P>
+                        …いでよ、「<Strong>ミニオン</Strong>」！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['✨', '🐶', '✨']}
+              description={<Strong>悪魔の助手・ミニオン、ここに参上！</Strong>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        どうも、<Strong>ミニオン</Strong>
+                        です。お呼びですか、ご主人さま？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        よく来てくれた！こいつがわたしの助手、
+                        <Strong>ミニオン</Strong>だ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>なんだ、ただのわんこじゃないか。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        ミニオンはそんじょそこらの犬とは違う。
+                        <Strong>とっておきの芸</Strong>
+                        を持っているからな。
+                      </P>
+                      <P>ミニオン、こいつらにお前の芸を見せてやるんだ！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>おまかせください、ご主人さま！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>ミニオンの芸</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <Emoji>🐶</Emoji>,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={<>ぼくの芸をお見せします！</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        こちらの
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        をご覧ください！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jarm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>一見、普通の弁当箱に見えるけれど…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ぼくは、
+                        <Strong>この弁当箱を計算箱に変える</Strong>
+                        ことができるんです！
+                      </P>
+                      <P>
+                        下の
+                        <Strong>
+                          「<H args={{ name: 'convertToMathbox' }} />
+                          」ボタン
+                        </Strong>
+                        を押してみてください！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jjjh />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        すごい、計算箱の <EmojiNumber number={0} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうなんです。ぼくは、
+                        <Strong>ある法則に基づいて</Strong>
+                        、弁当箱を計算箱に変える芸を持っているんです。
+                      </P>
+                      <P>
+                        <Em>その法則がどんなものか、当ててみてください！</Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🐶</Emoji>,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={
+                <>
+                  ある法則に基づいて、
+                  <br />
+                  弁当箱を計算箱に変える芸
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        ふーむ、どんな法則なんだろう？ほかの例も見ないと分からないなあ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>どんな法則？</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、こちらに3つの弁当箱を用意しました。それぞれ{' '}
+                        <H args={{ name: 'convertToMathbox' }} />{' '}
+                        を押してみてください！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Mifg />
+            <R.Epoi />
+            <R.Vlob />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        どれも、ある法則に基づいて計算箱に変えているんですが、分かりましたか？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、なんとなく分かったかもしれない…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        で確かめてみましょう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>それでは、こちらの弁当箱を…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dubm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ぼくが計算箱に変換すると、次のようになるでしょうか？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Otbe />
+            <YesNoButtons answer="yes" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: true }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'theAnswerIs', isYes: true }} />{' '}
+                          だと思う！
+                        </Strong>
+                        変換すると <EmojiNumber number={4} /> になるはずだ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <H args={{ name: 'convertToMathbox' }} />{' '}
+                        を押してみてくだださい！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ehxq />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        やった！ <EmojiNumber number={4} /> になったので、
+                        <Emoji>⭕️</Emoji> が正解だ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>では、法則を説明しましょう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>法則の説明</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🐶</Emoji>,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={
+                <>
+                  どんな法則に基づいて、弁当箱を
+                  <br />
+                  計算箱に変えているのか説明します！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ぼくが計算箱に変換できるのは、以下のような形の弁当箱なんです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Eozk>
+              <H args={{ name: 'convertiblePatternCaption' }} />
+            </R.Eozk>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        たとえば、先ほど例に出したこちらの弁当箱をご覧ください。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nlyu />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>こちらの法則に従って印をつけてみます。</P>
+                      <R.Eozk></R.Eozk>
+                      <P>
+                        まず、
+                        <EmojiWithText letter="e" />{' '}
+                        が一番左にあるので、すべての
+                        <EmojiWithText letter="e" /> に <Emoji>🅰️</Emoji>{' '}
+                        の印をつけてみます。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Alca>
+              <EmojiForLetter letter="e" /> が一番左にあるので、
+              <br />
+              すべての
+              <EmojiForLetter letter="e" /> に <Emoji>🅰️</Emoji> の印をつける
+            </R.Alca>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        次に、
+                        <EmojiWithText letter="f" />{' '}
+                        が真ん中にあるので、すべての
+                        <EmojiWithText letter="f" /> に <Emoji>🅱️</Emoji>{' '}
+                        の印をつけてみます。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Mepb>
+              <EmojiForLetter letter="f" /> が真ん中にあるので、
+              <br />
+              すべての
+              <EmojiForLetter letter="f" /> に <Emoji>🅱️</Emoji> の印をつける
+            </R.Mepb>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>上の弁当箱は、こちらの法則と一致していますね。</P>
+                      <R.Eozk>
+                        <H args={{ name: 'convertiblePatternCaption' }} />
+                      </R.Eozk>
+                      <P>つまり、ぼくが計算箱に変換できるということです。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          では、計算箱に変換した場合、何の数字になるのでしょうか？
+                        </Em>
+                      </P>
+                      <P>
+                        答えを言うと、
+                        <Strong>
+                          右下にある <Emoji>🅰️</Emoji> がついた料理の数
+                        </Strong>
+                        が、変換後の計算箱の数字になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hehx>
+              右下にある <Emoji>🅰️</Emoji> がついた料理の数が、
+              <br />
+              変換後の計算箱の数字
+            </R.Hehx>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        先ほどの弁当箱の場合、
+                        <Em>
+                          右下には <Emoji>🅰️</Emoji> がついた
+                          <EmojiWithText letter="e" /> が「<Strong>2個</Strong>
+                          」あります。
+                        </Em>
+                      </P>
+                      <P>
+                        だから、これをぼくが計算箱に変換すると{' '}
+                        <EmojiNumber number={2} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Wopl>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 2 }}
+              />
+            </R.Wopl>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>なるほど。</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          他の料理でも、同じ法則に沿っていれば、計算箱に変換したときに同じ数字になります。
+                        </Em>
+                      </P>
+                      <P>
+                        たとえば、 <EmojiWithText letter="k" /> と{' '}
+                        <EmojiWithText letter="l" /> を以下のように配置した場合…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jyqf />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Emoji>🅰️</Emoji> と <Emoji>🅱️</Emoji>{' '}
+                        は以下のようになるので…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Mzqc>
+              <EmojiForLetter letter="k" /> は一番左にあるので <Emoji>🅰️</Emoji>{' '}
+              を、
+              <br />
+              <EmojiForLetter letter="l" /> は真ん中にあるので <Emoji>🅱️</Emoji>{' '}
+              をつける
+            </R.Mzqc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        計算箱に変換したときに先ほどと同じく{' '}
+                        <EmojiNumber number={2} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qwdg>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'k', number: 2 }}
+              />
+            </R.Qwdg>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <Strong>
+                          弁当箱に入っているのがどんな料理だろうと、
+                          <Emoji>🅰️</Emoji> や <Emoji>🅱️</Emoji>{' '}
+                          の印をつけた際に、同じ法則に沿っていれば同じ数字に変換される
+                        </Strong>
+                        というわけです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hehx>
+              右下にある <Emoji>🅰️</Emoji> がついた料理の数が、
+              <br />
+              変換後の計算箱の数字
+            </R.Hehx>
+          </>
+        )
+      },
+      {
+        title: <>他の弁当箱の例</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <H args={{ name: 'yesNoQuiz' }} />
+                        で出した弁当箱にも、<Emoji>🅰️</Emoji> と{' '}
+                        <Emoji>🅱️</Emoji> の印をつけてみましょう。まずは
+                        <H args={{ name: 'lookAtThisBentoBox' }} />。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dubm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        上の弁当箱に、先ほどの法則にしたがって <Emoji>🅰️</Emoji>{' '}
+                        と <Emoji>🅱️</Emoji> の印をつけると、
+                        <Em>
+                          右下には <Emoji>🅰️</Emoji> がついた
+                          <EmojiWithText letter="i" />
+                          が「<Strong>4個</Strong>」あります。
+                        </Em>
+                      </P>
+                      <P>
+                        だから、これをぼくが計算箱に変換すると{' '}
+                        <EmojiNumber number={4} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Duuk>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'i', number: 4 }}
+              />
+            </R.Duuk>
+            <ExpressionRunnerSeparator />
+            <R.Kizi />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={0} /> になる場合
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        続いて
+                        <H args={{ name: 'lookAtThisBentoBox' }} />
+                        。このページの冒頭で紹介した弁当箱です。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jarm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        上の弁当箱に、先ほどの法則にしたがって <Emoji>🅰️</Emoji>{' '}
+                        と <Emoji>🅱️</Emoji> の印をつけると、
+                        <Em>
+                          右下には <Emoji>🅰️</Emoji> がついた
+                          <EmojiWithText letter="a" /> が
+                          <Em>ひとつもありません</Em>。
+                        </Em>
+                      </P>
+                      <P>
+                        つまり、
+                        <Strong>
+                          <Emoji>🅰️</Emoji> の数は「ゼロ個」
+                        </Strong>
+                        というわけです。
+                      </P>
+                      <P>
+                        だから、これをぼくが計算箱に変換すると{' '}
+                        <EmojiNumber number={0} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dwzy>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
+              />
+            </R.Dwzy>
+            <ExpressionRunnerSeparator />
+            <R.Jwah />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、
+                        <Em>
+                          右下の <Emoji>🅰️</Emoji>{' '}
+                          の数がゼロになる場合もあるんだね。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        はい。先ほど紹介した法則の「<Emoji>🅰️</Emoji> が
+                        <Strong>いくつか</Strong>」というのは、「
+                        <Emoji>🅰️</Emoji> が<Strong>ゼロ個</Strong>
+                        」である場合も含まれているわけです。
+                      </P>
+                      <R.Hehx>
+                        右下にある <Emoji>🅰️</Emoji> の数が
+                        <br />
+                        ゼロになる場合もある
+                      </R.Hehx>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>実行してから変換</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        さらにぼくは、
+                        <Strong>
+                          弁当箱を
+                          <H args={{ name: 'play' }} /> してから計算箱に変換する
+                        </Strong>
+                        こともできます。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <H args={{ name: 'play' }} />{' '}
+                        してから計算箱に変換？どういうこと？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🐶</Emoji>,
+                <Emoji>🍱</Emoji>,
+                <Emoji>▶️</Emoji>,
+                <CustomEmoji type="mathBox" />
+              ]}
+              description={
+                <>
+                  <H args={{ name: 'play' }} /> してから
+                  <br />
+                  計算箱に変換する
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ためしに、
+                        <Em>
+                          次の弁当箱の下にある、「
+                          <H args={{ name: 'runAndConvertToMathbox' }} />
+                          」ボタンを押してみてください。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dcji />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <EmojiNumber number={0} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、理由を説明しますね。まず、もともとの弁当箱を実行するとどうなるか、
+                        <H args={{ name: 'fastForward' }} /> で見てみましょう。
+                        <H args={{ name: 'pressFastForward' }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zlrx />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、もともとの弁当箱を
+                        <H args={{ name: 'play' }} />{' '}
+                        すると、次のような弁当箱になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jarm>
+              <H args={{ name: 'play' }} /> した結果はこうなる
+            </R.Jarm>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          これは先ほど説明した通り、計算箱に変換すると{' '}
+                          <EmojiNumber number={0} /> になります。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dwzy>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'a', number: 0 }}
+              />
+            </R.Dwzy>
+            <ExpressionRunnerSeparator />
+            <R.Jwah />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>このような、</P>
+                      <Ol>
+                        <OlLi>
+                          <Em>
+                            まず弁当箱を
+                            <H args={{ name: 'play' }} />
+                            し、
+                          </Em>
+                        </OlLi>
+                        <OlLi>
+                          <Em>
+                            実行し終えたら、続いて{' '}
+                            <H args={{ name: 'convertToMathbox' }} /> する
+                          </Em>
+                        </OlLi>
+                      </Ol>
+                      <P>というふたつのステップを、</P>
+                      <P>
+                        <ExpressionRunnerButton
+                          css={css`
+                            padding-left: ${spaces(1)};
+                            padding-right: ${spaces(1)};
+                            background: ${colors('yellow100')};
+                          `}
+                        >
+                          <H
+                            args={{
+                              name: 'runAndConvertToMathbox',
+                              addNewline: true
+                            }}
+                          />
+                        </ExpressionRunnerButton>
+                      </P>
+                      <P>…を押すことで、一度に行うことができるのです。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qsnv />
+            <ExpressionRunnerSeparator />
+            <R.Jwah>
+              <Strong>
+                <H args={{ name: 'runAndConvertToMathbox' }} />
+              </Strong>
+            </R.Jwah>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、「<InlineHeader>実行</InlineHeader>」と「
+                        <InlineHeader>計算箱に変換</InlineHeader>」を
+                        <Strong>一括で行う</Strong>
+                        こともできる、ということだな。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['🍱', '▶️']}
+              noBottomMargin
+              description={
+                <>
+                  まず弁当箱を
+                  <H args={{ name: 'play' }} /> し…
+                </>
+              }
+            />
+            <EmojiSeparator
+              nodes={[
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="singleArrow" />,
+                <CustomEmoji type="mathBox" />
+              ]}
+              noTopMargin
+              description={<>計算箱に変換するのを一括で行える</>}
+            />
+          </>
+        )
+      },
+      {
+        type: 'yesNoQuiz',
+        title: (
+          <>
+            <H args={{ name: 'yesNoQuiz' }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、ここで最後に <H args={{ name: 'yesNoQuiz' }} />
+                        をやってみましょう。
+                      </P>
+                      <P>こちらの弁当箱を…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rlrs />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        「
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        」すると、下のようになるでしょうか？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Pmdm />
+            <YesNoButtons answer="no" />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'theAnswerIs', isYes: false }} />
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'theAnswerIs', isYes: false }} />{' '}
+                          だと思う！
+                        </Strong>
+                        変換すると <EmojiNumber number={2} /> ではなく、
+                        <EmojiNumber number={1} /> になるはずだ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        を押してみてくだださい！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zahd />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        やった！ <EmojiNumber number={1} /> になったので、
+                        <Emoji>❌</Emoji> が正解だ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>その通りです！</P>
+                      <P>
+                        確認のために、もともとの弁当箱を
+                        <H args={{ name: 'fastForward' }} />
+                        してみましょう。
+                        <H args={{ name: 'pressFastForward' }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Csqj />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、もともとの弁当箱を
+                        <H args={{ name: 'play' }} />
+                        すると、次のような弁当箱になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Igpn>
+              <H args={{ name: 'play' }} /> した結果はこうなる
+            </R.Igpn>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Em>
+                          これは、計算箱に変換すると <EmojiNumber number={1} />{' '}
+                          になります。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hhdu>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'e', number: 1 }}
+              />
+            </R.Hhdu>
+            <ExpressionRunnerSeparator />
+            <R.Rnug />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        というわけで、もともとの弁当箱を
+                        <H
+                          args={{ name: 'runAndConvertToMathbox' }}
+                        /> すると <EmojiNumber number={2} /> ではなく{' '}
+                        <EmojiNumber number={1} /> になるので、クイズの正解は{' '}
+                        <Emoji>❌</Emoji> でした！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>次のページで、難しい問題を出します</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>ミニオン、説明ご苦労だった！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>お安い御用です、ご主人さま！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        それでは以前約束した通り、
+                        <Em>
+                          <Strong>次のページで難しい問題を出題する</Strong>
+                          。それに答えることができたら、計算箱を返してやろう！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>😈</Emoji>,
+                <CustomEmoji type="mathBox" />
+              ]}
+              noBottomMargin
+              description={
+                <>
+                  次のページで出す難しい問題に
+                  <br />
+                  答えられたら計算箱を返してやろう！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>
+                        やっと計算箱を賭けた問題にチャレンジできるということだな。よーし、次のページに進むぞ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/7.en.tsx b/src/contents/7.en.tsx
index 5f4ca258b..7ad496bba 100644
--- a/src/contents/7.en.tsx
+++ b/src/contents/7.en.tsx
@@ -1,4 +1,1463 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Em, Strong, Ul, UlLi } from 'src/components/ContentTags'
+import CustomEmoji from 'src/components/CustomEmoji'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import Emoji from 'src/components/Emoji'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import H from 'src/components/H'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import * as R from 'src/components/Runners'
+import EmojiWithText from 'src/components/EmojiWithText'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        type: 'summary',
+        title: <>難易度が急激に上がります</>,
+        content: (
+          <>
+            <P>
+              <Strong>このページから難易度が急激に上がります。</Strong>
+              弁当箱も、以前に比べて複雑になります。
+            </P>
+            <EmojiSeparator
+              emojis={['⚠️', '🍱', '⚠️']}
+              description={<>難易度が上がり、弁当箱も複雑に</>}
+            />
+            <P>
+              ただ、
+              <Em>
+                内容を完全に理解する必要はありません。少しくらい分からなくても、雰囲気で読み進めていただいて大丈夫です。
+              </Em>
+              また、先に進んでから読み返すことで理解できる場合もあるので、分からなくてもとりあえず先に進んでみてください。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '🤗', '✨']}
+              description={<>完全に理解する必要はありません！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>問題の説明</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        では約束通り、
+                        <Em>
+                          これから出す問題に答えることができたら、計算箱を返してやろう！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <Emoji>😈</Emoji>,
+                <CustomEmoji type="mathBox" />
+              ]}
+              noBottomMargin
+              description={
+                <>
+                  これから出す難しい問題に
+                  <br />
+                  答えられたら計算箱を返してやろう！
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>この問題は非常に難しい</Strong>
+                        から覚悟するんだな。ミニオン、問題を説明するんだ！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        わかりました。まず、
+                        <H args={{ name: 'lookAtThisBentoBox' }} />。
+                      </P>
+                      <P>
+                        <CustomEmoji type="questionFoodGrey" />{' '}
+                        がたくさんありますが、それぞれの{' '}
+                        <Strong>
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          には何らかの料理が入ります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Envj>
+              それぞれの <CustomEmoji type="questionFoodGrey" /> には
+              <br />
+              何らかの料理が入る
+            </R.Envj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>何だか複雑そうな弁当箱だなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そして、
+                        <Strong>
+                          それぞれの <CustomEmoji type="questionFoodGrey" />{' '}
+                          に、ある法則に基づいて料理を入れると、
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱になります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jguj>
+              それぞれの <CustomEmoji type="questionFoodGrey" /> に、
+              <br />
+              <Strong>ある法則に基づいて</Strong>料理を入れると、
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱になる
+            </R.Jguj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        背景に <CustomEmoji type="plusOneOrange" size="mdlg" />{' '}
+                        の模様がついた！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね。背景にある{' '}
+                        <CustomEmoji type="plusOneOrange" size="mdlg" />{' '}
+                        の模様は単に、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があるということを表しているだけです。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        その
+                        <H args={{ name: 'plusOneEffect' }} />
+                        ってどういう効果なの？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>これから説明しますね！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={1} /> が <EmojiNumber number={2} /> になる
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <H args={{ name: 'lookAtThisBentoBox' }} />:
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fxde />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        前回の復習ですが、この弁当箱は、ぼくが計算箱に変換すると{' '}
+                        <EmojiNumber number={1} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rbup>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'd', number: 1 }}
+              />
+            </R.Rbup>
+            <ExpressionRunnerSeparator />
+            <R.Rnug />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では上の弁当箱を、先ほどの
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱と<Strong>合体させてみます</Strong>。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fljg>
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱と合体
+            </R.Fljg>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、この弁当箱を「
+                        <Strong>
+                          <H args={{ name: 'runAndConvertToMathbox' }} />
+                        </Strong>
+                        」するとどうなるか見てみましょう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ezmz />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <EmojiNumber number={2} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>そうなんです！つまり、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <EmojiNumber number={1} /> に変換できる弁当箱と、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            先ほどの
+                            <H args={{ name: 'plusOneEffect' }} />
+                            がある弁当箱を合体させて、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            「<H args={{ name: 'runAndConvertToMathbox' }} />
+                            」すると、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            結果は <EmojiNumber number={2} /> になる
+                          </Em>
+                        </UlLi>
+                      </Ul>
+                      <P>ということです。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jiua>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を合体させ…
+            </R.Jiua>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果は <EmojiNumber number={2} /> になる
+            </R.Pmdm>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまりざっくり言うと、
+                        <Strong>
+                          <EmojiNumber number={1} /> が{' '}
+                          <EmojiNumber number={2} /> になった
+                        </Strong>
+                        というわけです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={1} />,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiNumber number={2} />
+              ]}
+              description={
+                <>
+                  ざっくり言うと、
+                  <EmojiNumber number={1} /> が <EmojiNumber number={2} />{' '}
+                  になった
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} /> が <EmojiNumber number={3} /> になる
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        続いて、
+                        <H args={{ name: 'lookAtThisBentoBox' }} />。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ilvq />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱は、ぼくが計算箱に変換すると{' '}
+                        <EmojiNumber number={2} /> になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Spga>
+              <H
+                args={{ name: 'canBeConvertedCaption', letter: 'f', number: 2 }}
+              />
+            </R.Spga>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱も、
+                        <Em>
+                          先ほどの
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱と合体させてみました。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Akug>
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱と合体
+            </R.Akug>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        こちらを「
+                        <Strong>
+                          <H args={{ name: 'runAndConvertToMathbox' }} />
+                        </Strong>
+                        」するとどうなるか確かめてみてください！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vfdw />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <EmojiNumber number={3} /> になった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>そうなんです！まとめると、以下のようになります。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+
+            <R.Aone>
+              <EmojiNumber number={2} /> に変換できる弁当箱と、
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を合体させ…
+            </R.Aone>
+            <ExpressionRunnerSeparator />
+            <R.Qsoa>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果は <EmojiNumber number={3} /> になる
+            </R.Qsoa>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ざっくり言うと、今度は{' '}
+                        <Strong>
+                          <EmojiNumber number={2} /> が{' '}
+                          <EmojiNumber number={3} /> になった
+                        </Strong>
+                        のです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={2} />,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiNumber number={3} />
+              ]}
+              description={
+                <>
+                  ざっくり言うと、
+                  <EmojiNumber number={2} /> が <EmojiNumber number={3} />{' '}
+                  になった
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>まとめ</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>まとめると、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            ある数字 <CustomEmoji type="blankNumber" />{' '}
+                            に変換できる弁当箱と、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            <H args={{ name: 'plusOneEffect' }} />
+                            がある弁当箱を合体させ、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Em>
+                            <H args={{ name: 'runAndConvertToMathbox' }} />
+                            すると、
+                          </Em>
+                        </UlLi>
+                      </Ul>
+                      <P>
+                        <Em>
+                          結果は <CustomEmoji type="blankNumber" />{' '}
+                          <Emoji>➕</Emoji> <EmojiNumber number={1} /> になる
+                        </Em>
+                        のです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qrgc>
+              <CustomEmoji type="blankNumber" /> に変換できる弁当箱と、
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を合体させ…
+            </R.Qrgc>
+            <ExpressionRunnerSeparator />
+            <R.Jxvy>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果は <CustomEmoji type="blankNumber" />{' '}
+              <Emoji>➕</Emoji> <EmojiNumber number={1} /> になる
+            </R.Jxvy>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            計算箱の <CustomEmoji type="plusOne" /> と同じようなもの
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ここで思い出してほしいのですが、
+                        <Strong>
+                          計算箱では、
+                          <CustomEmoji type="plusOne" />{' '}
+                          を使えば、「1を足す」計算を行うことができましたよね
+                        </Strong>
+                        。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rviy>
+              <CustomEmoji type="mathBox" /> 計算箱の場合、
+              <CustomEmoji type="plusOne" /> を使えば
+              <br />
+              「1を足す」計算ができる
+            </R.Rviy>
+            <ExpressionRunnerSeparator />
+            <R.Jxvy></R.Jxvy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        すなわち、この <H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱は…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jguj>
+              この <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱は…
+            </R.Jguj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          計算箱における <CustomEmoji type="plusOne" />{' '}
+                          と同じようなもの
+                        </Strong>
+                        、と言えるでしょう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Biit>
+              <Strong>
+                <CustomEmoji type="mathBox" /> 計算箱における、
+                <CustomEmoji type="plusOne" /> と同じようなもの
+              </Strong>
+            </R.Biit>
+          </>
+        )
+      },
+      {
+        title: <>計算箱を賭けた問題</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、ここで問題です。
+                        <Strong>
+                          この弁当箱に、どのような法則に基づいて{' '}
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          に料理を入れると…
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Envj>
+              <Strong>
+                どのような法則に基づいて
+                <br />
+                <CustomEmoji type="questionFoodGrey" /> に料理を入れると…
+              </Strong>
+            </R.Envj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        先ほどのような、
+                        <Strong>
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱になるでしょう？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jguj>
+              <Strong>
+                <H args={{ name: 'plusOneEffect' }} />
+                がある弁当箱になる？
+              </Strong>
+            </R.Jguj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <Strong>
+                          それぞれの <CustomEmoji type="questionFoodGrey" />{' '}
+                          に何を入れたら、
+                          <H args={{ name: 'plusOneEffect' }} />
+                          があるか当てろってこと？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>はい、その通りです！</Strong>
+                        <Em>
+                          ある法則に基づいて{' '}
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          に料理を入れた時に限り
+                        </Em>
+                        、<H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱になります。
+                      </P>
+                      <P>
+                        <Em>それがどんな法則が、当ててみよう！</Em>
+                        という問題です。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="questionFoodGrey" />,
+                <Emoji>🐶</Emoji>,
+                <CustomEmoji type="plusOneOrange" />
+              ]}
+              description={
+                <>
+                  それぞれの <CustomEmoji type="questionFoodGrey" />{' '}
+                  に何を入れたら
+                  <br />
+                  <H args={{ name: 'plusOneEffect' }} />
+                  がある弁当箱になる？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>
+                        この問題こそが、以前から話していた「難しい問題」だ。
+                        <Em>これを解けたら、約束通り計算箱を返してやろう！</Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            試しに<Strong>適当な料理</Strong>を入れてみる
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        うーん…
+                        <Em>
+                          問題を完全に理解できた自信がないし、どうやって解けばいいかさっぱり分からない！
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>大丈夫、安心してください！</P>
+                      <P>
+                        <Strong>
+                          試しに、
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          に適当な料理を入れてみると、問題を理解できると思います。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Envj>
+              <CustomEmoji type="questionFoodGrey" />{' '}
+              に適当な料理を入れてみて下さい！<Emoji>🐶</Emoji>
+            </R.Envj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        わかった。じゃあとりあえず、
+                        <CustomEmoji type="questionFoodGrey" />{' '}
+                        に適当な料理を入れてみよう。
+                      </P>
+                      <P>
+                        <Em>
+                          <EmojiWithText letter="a" />、
+                          <EmojiWithText letter="b" />、
+                          <EmojiWithText letter="c" />
+                          を適当な組み合わせで{' '}
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          に入れてみたよ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Lwoq>
+              <EmojiForLetter letter="a" /> <EmojiForLetter letter="b" />{' '}
+              <EmojiForLetter letter="c" /> を適当に{' '}
+              <CustomEmoji type="questionFoodGrey" /> に入れてみた
+            </R.Lwoq>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱に、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があれば
+                        <Strong>成功</Strong> <Emoji>🎉</Emoji>
+                        、なければ<Strong>失敗</Strong> <Emoji>😭</Emoji>{' '}
+                        ということかな？
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        そうですね。そして、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があるかどうかを確かめるには、まず{' '}
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} />{' '}
+                        が計算できるかを確かめてみます。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={1} />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={
+                <>
+                  <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                  <EmojiNumber number={1} /> が計算できるか確かめる
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、以下のように <EmojiNumber number={1} />{' '}
+                        に変換できる弁当箱と合体させたときに…
+                      </P>
+                      <P>
+                        結果が <EmojiNumber number={2} /> になれば
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があるので
+                        <Strong>成功</Strong> <Emoji>🎉</Emoji>、 それ以外なら
+                        <Strong>失敗</Strong> <Emoji>😭</Emoji> というわけです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xxan>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              先ほどの弁当箱を合体させ…
+            </R.Xxan>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={2} size="mdlg" /> になれば
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              があるので
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'plusOneEffect' }} />
+            があるかチェック
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} />{' '}
+                        が計算できるか確かめるために、冒頭にも登場した、
+                        <EmojiNumber number={1} />{' '}
+                        に変換できる弁当箱を使って試してみましょう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fxde>
+              <EmojiNumber number={1} size="mdlg" /> に変換できる弁当箱
+            </R.Fxde>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        これを先ほどの弁当箱と組み合わせて、
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        し、
+                        <Em>
+                          <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={1} /> を計算できればいい
+                        </Em>
+                        んだな。
+                      </P>
+                      <P>
+                        すなわち、
+                        <Em>
+                          結果が <EmojiNumber number={2} /> になれば
+                          <Strong>成功</Strong> <Emoji>🎉</Emoji>、それ以外なら
+                          <Strong>失敗</Strong> <Emoji>😭</Emoji>{' '}
+                        </Em>
+                        というわけか。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nuco>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              先ほどの弁当箱を合体させ…
+            </R.Nuco>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={2} size="mdlg" /> になれば
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'brave',
+                  children: (
+                    <>
+                      <P>では、上の弁当箱を実行したらどうなるか見ていこう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        それでは、
+                        <H
+                          args={{
+                            name: 'pressFastForward',
+                            mentionRightArrow: true
+                          }}
+                        />
+                      </P>
+                      <P>
+                        初級その5で説明した通り、
+                        <Strong>
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                          のペアがふたつ以上ある場合は、一番左の{' '}
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                          のペアからはじめます。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Dhiu>
+              <H args={{ name: 'startWithLeftMostOneCaption' }} />
+            </R.Dhiu>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        続いて、また{' '}
+                        <Em>
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                          のペアからはじめたいのですが、
+                          <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                          のペアの一番下の段にひとつの料理(
+                          <EmojiWithText letter="b" />
+                          )しかないので不可能です。
+                        </Em>
+                      </P>
+                      <P>
+                        というわけで、初級その5で説明した通り、
+                        <Strong>
+                          次は <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                          のペアから
+                        </Strong>
+                        はじめます。
+                        <H
+                          args={{
+                            name: 'pressFastForward'
+                          }}
+                        />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Akjy>
+              <H args={{ name: 'startWithTwoCaption' }} />
+            </R.Akjy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        次も前回と同じく、
+                        <Strong>
+                          <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                          のペアからはじめます。
+                        </Strong>
+                        <H
+                          args={{
+                            name: 'pressFastForward'
+                          }}
+                        />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Hnyn>
+              <H args={{ name: 'startWithTwoCaption' }} />
+            </R.Hnyn>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>つまり、最終的に以下のようになりました！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bwff>実行結果</R.Bwff>
+          </>
+        )
+      },
+      {
+        title: <>計算箱に変換できない</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        実行を終えたので、
+                        <H args={{ name: 'convertToMathbox' }} />{' '}
+                        したいところですが…
+                      </P>
+                      <P>
+                        残念ながら、
+                        <Strong>
+                          この弁当箱はぼくが計算箱に変換することができません。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Xwzc>
+              <Emoji>❌</Emoji> 計算箱に変換できない <Emoji>❌</Emoji>
+            </R.Xwzc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        理由は、
+                        <Em>以下の法則に沿っていないからです。</Em>
+                      </P>
+                      <R.Eozk>
+                        <H args={{ name: 'convertiblePatternCaption' }} />
+                      </R.Eozk>
+                      <P>
+                        <Em>
+                          右上には <Emoji>🅱️</Emoji>{' '}
+                          の料理がひとつないといけませんが、ここでは{' '}
+                          <Emoji>🅰️</Emoji> になっている
+                        </Em>
+                        ので、計算箱に変換できないのです。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fhrd>
+              右上が <Emoji>🅱️</Emoji> の<EmojiWithText letter="c" /> ではなく、
+              <br />
+              <Emoji>🅰️</Emoji> の<EmojiWithText letter="b" /> なので
+              <br />
+              計算箱に変換できない
+            </R.Fhrd>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        ダメか…
+                        <Em>
+                          もし仮に右上が
+                          <EmojiWithText letter="b" />
+                          ではなくて
+                          <EmojiWithText letter="c" />
+                          だったら、
+                          <EmojiNumber number={2} /> に変換できていたのになあ。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Bgxi>
+              も仮にし右上が
+              <EmojiWithText letter="c" />
+              <br />
+              だったら、
+              <EmojiNumber number={2} /> に変換できていた
+            </R.Bgxi>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'plusOneEffect' }} />
+            は無い
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、実行しても{' '}
+                        <EmojiNumber number={2} size="mdlg" />{' '}
+                        に変換できる弁当箱になりませんでした。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nuco>
+              <EmojiNumber number={1} /> に変換できる弁当箱と合体させ…
+            </R.Nuco>
+            <ExpressionRunnerSeparator />
+            <R.Xwzc>
+              実行したところ、
+              <br />
+              <Strong>
+                <EmojiNumber number={2} size="mdlg" />{' '}
+                に変換できる弁当箱にならなかった
+              </Strong>
+            </R.Xwzc>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        だから、
+                        <Em>
+                          先ほどの弁当箱に、
+                          <H args={{ name: 'plusOneEffect' }} />
+                          は無い
+                        </Em>
+                        のです。つまり、<Strong>不正解でした！</Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Olyw>
+              <H args={{ name: 'plusOneEffect' }} />
+              は無い
+            </R.Olyw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        残念…やっぱり、適当に{' '}
+                        <CustomEmoji type="questionFoodGrey" />{' '}
+                        に料理を埋めても正解にはならないかあ…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>問題をもう一度</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        問題の意味が分かったでしょうか？では、もう一度聞きますね。
+                      </P>
+                      <P>
+                        <Strong>
+                          この弁当箱に、どのような法則に基づいて{' '}
+                          <CustomEmoji type="questionFoodGrey" />{' '}
+                          に料理を入れると…
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Envj>
+              <Strong>
+                どのような法則に基づいて <CustomEmoji type="questionFoodGrey" />{' '}
+                に料理を入れると…
+              </Strong>
+            </R.Envj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱になるでしょう？
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jguj>
+              <Strong>
+                <H args={{ name: 'plusOneEffect' }} />
+                がある弁当箱になる？
+              </Strong>
+            </R.Jguj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        繰り返しますが、先ほど適当に料理を入れた以下の弁当箱は、不正解でした！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Olyw>こちらは不正解だった</R.Olyw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>
+                        うーん…問題の意味は分かったけど、答え方が分からない！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>答えは次のページに</>,
+        content: (
+          <>
+            <P>
+              せっかく計算箱を返してもらえるチャンスなのに、問題が難しくて村人は苦戦しているようですね。
+            </P>
+            <EmojiSeparator
+              emojis={['❓', '😭', '❓']}
+              description={<>難しすぎて見当もつかない！</>}
+            />
+            <P>
+              しかし、<Strong>次のページで答えが判明します。</Strong>
+              ぜひ先に進んでみてください！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/8.en.tsx b/src/contents/8.en.tsx
index 5f4ca258b..d532d4f63 100644
--- a/src/contents/8.en.tsx
+++ b/src/contents/8.en.tsx
@@ -1,4 +1,1352 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import {
+  P,
+  Strong,
+  Em,
+  Ul,
+  UlLi,
+  InlineHeader,
+  Hr
+} from 'src/components/ContentTags'
+import CustomEmoji from 'src/components/CustomEmoji'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import Emoji from 'src/components/Emoji'
+import H from 'src/components/H'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import ExpressionRunnerCaptionOnly from 'src/components/ExpressionRunnerCaptionOnly'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import * as R from 'src/components/Runners'
+import InlinePrioritiesLabel from 'src/components/InlinePrioritiesLabel'
+import EmojiWithText from 'src/components/EmojiWithText'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>サヤちゃん現る</>,
+        content: (
+          <>
+            <EmojiSeparator
+              nodes={[
+                <Emoji>😭</Emoji>,
+                <CustomEmoji type="plusOneOrange" />,
+                <Emoji>😭</Emoji>
+              ]}
+            />
+            <P>ラムダ村の村人たちは、前回の問題に四苦八苦していました。</P>
+            <R.Envj>
+              <Strong>
+                どのような法則に基づいて <CustomEmoji type="questionFoodGrey" />{' '}
+                に料理を入れると…
+              </Strong>
+            </R.Envj>
+            <R.Jguj>
+              <Strong>
+                <H args={{ name: 'plusOneEffect' }} />
+                がある弁当箱になる？
+              </Strong>
+            </R.Jguj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'crying',
+                  children: (
+                    <>
+                      <P>だめだ…全然分からない！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        これを解かないと計算箱を返してもらえないのに…どうしよう…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              その時です。ラムダ村に暮らす少女の<Strong>サヤちゃん</Strong>{' '}
+              <Emoji size="mdlg">👧🏻</Emoji>{' '}
+              が、問題に苦戦している村人たちに話しかけてきました。
+            </P>
+            <EmojiSeparator
+              emojis={['✨', '👧🏻', '✨']}
+              description={
+                <>
+                  ラムダ村に暮らす少女の<Strong>サヤちゃん</Strong>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>ねえねえ、みんな何してるの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        おお、サヤちゃんか。実は、にっくき悪魔 <Emoji>😈</Emoji>{' '}
+                        に計算箱を奪われてしまったんだ。
+                      </P>
+                      <P>
+                        奴が出題した問題を解かないと計算箱を返してもらえないんだけど、俺らには難しくて解けないんだよ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>ふーん、どんな問題なの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>じゃあ、手短に説明するね。</P>
+                      <P>
+                        <Em>
+                          以下の弁当箱の{' '}
+                          <CustomEmoji size="mdlg" type="questionFoodGrey" />{' '}
+                          に、どのような法則に基づいて料理を入れると…
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Envj>
+              以下の弁当箱の <CustomEmoji size="mdlg" type="questionFoodGrey" />{' '}
+              に、
+              <br />
+              どのような法則に基づいて料理を入れると…
+            </R.Envj>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        「<Strong>1を足す効果</Strong>{' '}
+                        <CustomEmoji type="plusOneOrange" />
+                        」がある弁当箱になるか、という問題なんだ。
+                      </P>
+                      <P>
+                        すなわち、
+                        <Em>
+                          <CustomEmoji type="blankNumber" /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={1} />{' '}
+                          を計算できるようにしないといけない
+                        </Em>
+                        んだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Omwd>
+              <CustomEmoji type="blankNumber" size="mdlg" />{' '}
+              に変換できる弁当箱と合体させて
+              <br />
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              した時、
+            </R.Omwd>
+            <ExpressionRunnerSeparator />
+            <R.Jxvy>
+              結果が <CustomEmoji type="blankNumber" size="mdlg" />{' '}
+              <Emoji size="mdlg">➕</Emoji>{' '}
+              <EmojiNumber number={1} size="mdlg" /> になる？
+              <br />
+              (すなわち「<Strong>1を足す効果</Strong>{' '}
+              <CustomEmoji type="plusOneOrange" />
+              」がある？)
+            </R.Jxvy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>ふーん、じゃあサヤも解くのを手伝うよ！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        手伝ってくれるのはありがたいけど、この問題はママゴトじゃないんだよ。俺らがどれだけ頑張っても分からなかったんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>サヤちゃんの弁当箱</>,
+        content: (
+          <>
+            <P>
+              サヤちゃんは少し考えた後、
+              <CustomEmoji type="questionFoodGrey" /> に料理を入れてみました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ねえねえ、サヤも <CustomEmoji type="questionFoodGrey" />{' '}
+                        に料理を入れてみたんだけど、見てくれる？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qrfw>
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱
+            </R.Qrfw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        ふむふむ…どうせ上手くいかないと思うけど、試してみるか。
+                      </P>
+                      <P>
+                        前回もやったように、
+                        <Em>
+                          <EmojiNumber number={1} />{' '}
+                          に変換できる弁当箱と合体させて、
+                        </Em>
+                      </P>
+                      <R.Rbup>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'd',
+                            number: 1
+                          }}
+                        />
+                      </R.Rbup>
+                      <P>
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        して、
+                        <Em>
+                          結果が <EmojiNumber number={2} /> になるか
+                        </Em>
+                        確かめてみよう。どうせムリだろうけど！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Plde>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Plde>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={2} size="mdlg" /> になれば
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、
+                        <H args={{ name: 'play' }} />
+                        してみよう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'play' }} /> してみると…
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              それでは、<Emoji>👧🏻</Emoji>{' '}
+              サヤちゃんの弁当箱を実行してみましょう！
+            </P>
+            <P>
+              まず、
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアがふたつ以上あるので、一番左の{' '}
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめます。
+              </Em>
+              <H
+                args={{
+                  name: 'pressFastForward',
+                  mentionRightArrow: true
+                }}
+              />
+            </P>
+            <R.Jsvg>
+              <H args={{ name: 'startWithLeftMostOneCaption' }} />
+            </R.Jsvg>
+            <P>
+              続いて、また{' '}
+              <Em>
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアからはじめたいのですが、
+                <InlinePrioritiesLabel>1</InlinePrioritiesLabel>{' '}
+                のペアの一番下の段にひとつの料理(
+                <EmojiWithText letter="b" />
+                )しかないので不可能です。
+              </Em>
+            </P>
+            <P>
+              というわけで、
+              <Strong>
+                次は <InlinePrioritiesLabel>2</InlinePrioritiesLabel> のペアから
+              </Strong>
+              はじめます。
+            </P>
+            <R.Uexo>
+              <H args={{ name: 'startWithTwoCaption' }} />
+            </R.Uexo>
+            <P>
+              次も前回と同じく、
+              <Strong>
+                <InlinePrioritiesLabel>2</InlinePrioritiesLabel>{' '}
+                のペアからはじめます。
+              </Strong>
+            </P>
+            <R.Hdhy>
+              <H args={{ name: 'startWithTwoCaption' }} />
+            </R.Hdhy>
+            <P>つまり、最終的に以下のようになりました！</P>
+            <R.Rhcv>
+              <H args={{ name: 'play' }} /> した結果
+            </R.Rhcv>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>こ、これはもしや…？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} /> に変換できる
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱は、
+                        <EmojiNumber number={2} /> に変換できます！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rico>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 2, letter: 'b' }}
+              />
+            </R.Rico>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>ということは、サヤちゃんの弁当箱は…</P>
+                      <P>
+                        <Em>
+                          <EmojiNumber number={1} />{' '}
+                          に変換できる弁当箱と合体させ、
+                          <H args={{ name: 'runAndConvertToMathbox' }} />
+                          すると、結果が <EmojiNumber number={2} /> になる
+                        </Em>
+                        ということですね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Plde>
+              <EmojiNumber number={1} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Plde>
+            <ExpressionRunnerSeparator />
+            <R.Pmdm>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              すると、結果が <EmojiNumber number={2} /> になる
+            </R.Pmdm>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できたので、
+                        <Strong>成功です！</Strong> <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やったー！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        そんなバカな…！俺らがどれだけ頭をひねっても分からなかったのに、サヤちゃんにいとも簡単に解かれるなんて！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+            <EmojiNumber number={1} /> はできる？
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        いや、まだ分からんぞ。
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} /> ができるからといって、
+                        <Strong>
+                          他の数字に対しても
+                          <H args={{ name: 'plusOneEffect' }} />
+                          があるとは限らない。
+                        </Strong>
+                      </P>
+                      <P>
+                        たとえば、
+                        <Strong>
+                          <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={1} /> も計算できるのかどうか
+                        </Strong>
+                        確かめてみないと。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={2} />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={<>これも計算できる？</>}
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、
+                        <Em>
+                          <EmojiNumber number={2} /> に変換できる弁当箱と、
+                        </Em>
+                      </P>
+                      <R.Spga>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'f',
+                            number: 2
+                          }}
+                        />
+                      </R.Spga>
+                      <P>サヤが考えた弁当箱を合体させてみるね！</P>
+                      <R.Qrfw>
+                        <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱
+                      </R.Qrfw>
+                      <P>
+                        合体したものを
+                        <H args={{ name: 'runAndConvertToMathbox' }} />
+                        して、
+                        <Em>
+                          結果が <EmojiNumber number={3} /> になればいい
+                        </Em>
+                        んだよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Awwn>
+              <EmojiNumber number={2} /> に変換できる弁当箱と、
+              <br />
+              <Emoji>👧🏻</Emoji> サヤちゃんの弁当箱を合体させ…
+            </R.Awwn>
+            <ExpressionRunnerSeparator />
+            <ExpressionRunnerCaptionOnly>
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              して、結果が <EmojiNumber number={3} size="mdlg" /> になれば
+              <Strong>成功</Strong> <Emoji>🎉</Emoji>
+              <br />
+              それ以外なら<Strong>失敗</Strong> <Emoji>😭</Emoji>
+            </ExpressionRunnerCaptionOnly>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        まずは実行してみるね。
+                        <H args={{ name: 'pressFastForward', girl: true }} />
+                      </P>
+                      <P>今回は、最後まで止まらずに早送りします！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nlbn />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>結果はこうなったよ！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Zsxo>
+              <H args={{ name: 'play' }} /> した結果
+            </R.Zsxo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この弁当箱は、
+                        <EmojiNumber number={3} /> に変換できます！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nngz>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 3, letter: 'b' }}
+              />
+            </R.Nngz>
+            <ExpressionRunnerSeparator />
+            <R.Qsoa />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、
+                        <EmojiNumber number={2} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} /> が計算できたので、
+                        <Strong>またしても成功です！</Strong> <Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>わーい、わーい！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>す、すごい…！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <H args={{ name: 'plusOneEffect' }} />
+            がある法則
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ではここで正解を言いましょう。
+                        <Strong>
+                          サヤちゃんが考えた弁当箱は、
+                          <H args={{ name: 'plusOneEffect' }} />
+                          がある弁当箱です。
+                        </Strong>
+                      </P>
+                      <P>
+                        だから、<Em>サヤちゃんの答えが正解です！</Em>
+                        おめでとうございます！<Emoji>🎉</Emoji>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nvqu>
+              <Emoji>👧🏻</Emoji> サヤちゃんが考えた弁当箱には
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある
+            </R.Nvqu>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>わーい、ミニオンさんありがとう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        さらに言うと、サヤちゃんが考えた弁当箱以外にも、
+                        <Strong>
+                          以下の法則に当てはまる弁当箱であれば、 どれでも
+                          <H args={{ name: 'plusOneEffect' }} />
+                          があります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Blvt>
+              この法則に当てはまる弁当箱であれば、
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある
+            </R.Blvt>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>サヤが考えた弁当箱の場合、</P>
+                      <Ul>
+                        <UlLi>
+                          <Emoji>🅰️</Emoji> は <EmojiWithText letter="a" />
+                        </UlLi>
+                        <UlLi>
+                          <Emoji>🅱️</Emoji> は <EmojiWithText letter="b" />
+                        </UlLi>
+                        <UlLi>
+                          <CustomEmoji type="C" /> は{' '}
+                          <EmojiWithText letter="c" />
+                        </UlLi>
+                      </Ul>
+                      <P>ということかな？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Oykb>
+              <Emoji>🅰️</Emoji> は <EmojiWithText letter="a" />、<br />
+              <Emoji>🅱️</Emoji> は <EmojiWithText letter="b" />、<br />
+              <CustomEmoji type="C" /> は <EmojiWithText letter="c" />
+            </R.Oykb>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        その通りです。サヤちゃんが考えた弁当箱は、ちゃんとこの法則に当てはまっているのです。
+                      </P>
+                      <R.Blvt>
+                        この法則に当てはまる弁当箱であれば、
+                        <br />
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある
+                      </R.Blvt>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>同じ法則の、他の弁当箱も試してみる</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、たとえばこの弁当箱でも、同じ法則に沿っているから、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があるってこと？
+                      </P>
+                      <R.Dvpl>
+                        同じ法則で料理を入れてみた。
+                        <br />
+                        <H args={{ name: 'plusOneEffect' }} />
+                        はあるか？
+                      </R.Dvpl>
+                      <P>
+                        <Emoji>🅰️</Emoji> には <EmojiWithText letter="h" />、
+                        <Emoji>🅱️</Emoji> には <EmojiWithText letter="i" />、
+                        <CustomEmoji type="C" /> には{' '}
+                        <EmojiWithText letter="j" />
+                        を当てはめてみたよ。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        はい、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        はありますよ。
+                      </P>
+                      <P>
+                        <Em>
+                          試しに、
+                          <EmojiNumber number={3} />{' '}
+                          に変換できるこちらの弁当箱と合体させて
+                          <H args={{ name: 'play' }} /> してみましょう。
+                        </Em>
+                      </P>
+                      <R.Cjxe>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'k',
+                            number: 3
+                          }}
+                        />
+                      </R.Cjxe>
+                      <P>
+                        実行したとき、
+                        <Strong>
+                          結果が <EmojiNumber number={4} />{' '}
+                          に変換できる弁当箱になれば、
+                          <EmojiNumber number={3} /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={1} /> を計算できたので成功
+                        </Strong>
+                        になります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressFastForward', skippable: true }} />
+            </P>
+            <R.Oqpi />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        結果、
+                        <EmojiNumber number={4} />{' '}
+                        に変換できる弁当箱が残りました！
+                      </P>
+                      <R.Zxkq>
+                        <H
+                          args={{
+                            name: 'canBeConvertedCaption',
+                            letter: 'i',
+                            number: 4
+                          }}
+                        />
+                      </R.Zxkq>
+                      <P>
+                        つまり、
+                        <EmojiNumber number={3} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} /> を計算できたというわけです。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        なるほど、やっぱりこちらの弁当箱にも
+                        <H args={{ name: 'plusOneEffect' }} />
+                        があるということか。
+                      </P>
+                      <R.Udxn>
+                        サヤちゃんの弁当箱と同じく、こちらの
+                        <br />
+                        弁当箱にも
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある
+                      </R.Udxn>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>立ち止まって振り返ろう</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'tired',
+                  children: (
+                    <>
+                      <P>
+                        俺らふだん頭を使っていないから、情報量が多すぎて疲れてしまった…
+                      </P>
+                      <P>ちょっとひと休みしてもらえないか？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>いいですよ！</P>
+                      <P>
+                        ちなみに現時点で、<Em>中級編も半分を終えました</Em>
+                        。つまり、本稿の折り返し地点を越えたということです。
+                        <Em>残るは中級編の残り半分と、上級編のみです。</Em>
+                      </P>
+                      <P>
+                        いい機会なので、少し立ち止まって振り返ってみましょう。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              まずこちらをご覧ください。これは、
+              <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる計算箱ですね。
+            </P>
+            <R.Mcug>
+              <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できる計算箱。
+              <br />
+              実行すると <EmojiNumber number={2} /> になる
+            </R.Mcug>
+            <P>
+              これまで学んだことを一言でまとめると、上の計算箱にあるような「
+              <Strong>1を足す機能</Strong> <CustomEmoji type="plusOne" />
+              」は、
+              <Strong>弁当箱で「再現」できる</Strong>
+              、ということです。
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="plusOneOrange" />
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>1を足す機能</Strong>{' '}
+                  <CustomEmoji type="plusOne" />
+                  」は、
+                  <br />
+                  弁当箱で「<Strong>再現</Strong>」することができる
+                </>
+              }
+            />
+            <P>
+              「<Strong>再現</Strong>
+              」できる、とはどういうことでしょうか？先ほどの計算箱の例で説明しますね。
+            </P>
+            <R.Lizi>これを弁当箱で再現します</R.Lizi>
+            <P>
+              <InlineHeader>ステップ1:</InlineHeader> まず、
+              <Em>
+                計算箱の <EmojiNumber number={1} /> の代わりに、
+                <Strong>
+                  <EmojiNumber number={1} /> に変換できる
+                </Strong>
+                弁当箱
+              </Em>
+              を用意します。
+            </P>
+            <R.Rnug>これの代わりに…</R.Rnug>
+            <ExpressionRunnerSeparator />
+            <R.Rbup>
+              <EmojiNumber number={1} /> に変換できる弁当箱を用意
+            </R.Rbup>
+            <P>
+              <InlineHeader>ステップ2:</InlineHeader> 次に、
+              <Em>
+                計算箱の <CustomEmoji type="plusOne" /> の代わりに、
+                <H args={{ name: 'plusOneEffect' }} />
+              </Em>
+              がある弁当箱を用意します。
+            </P>
+            <R.Bhpw>これの代わりに…</R.Bhpw>
+            <ExpressionRunnerSeparator />
+            <R.Qrfw>
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を用意
+              <br />(<Emoji>👧🏻</Emoji> サヤちゃんが考えた弁当箱です)
+            </R.Qrfw>
+            <P>
+              <InlineHeader>ステップ3:</InlineHeader>{' '}
+              このふたつを合体させた弁当箱は、先ほども説明した通り、
+              <Em>
+                <H args={{ name: 'runAndConvertToMathbox' }} /> すると{' '}
+                <EmojiNumber number={2} /> になります
+              </Em>
+              ね。
+            </P>
+            <R.Dyoq>
+              <EmojiNumber number={1} /> に変換できる弁当箱と
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を合体
+            </R.Dyoq>
+            <P>
+              つまり、先ほど登場した <EmojiNumber number={1} />{' '}
+              <Emoji>➕</Emoji> <EmojiNumber number={1} />{' '}
+              を計算できる計算箱は、
+            </P>
+            <R.Lizi></R.Lizi>
+            <P>
+              <Strong>こちらの弁当箱で「再現」できる</Strong>ということです。
+            </P>
+            <R.Plde>
+              <EmojiNumber number={1} /> <CustomEmoji type="plusOne" />{' '}
+              の計算箱を、弁当箱で再現
+            </R.Plde>
+            <P>
+              これが、「<Em>計算箱を弁当箱で再現する</Em>
+              」ということなんですね。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>もっと複雑な計算箱も再現できる</>,
+        content: (
+          <>
+            <P>もちろん、もっと複雑な計算箱も弁当箱で再現できます。</P>
+            <P>
+              たとえば、初級その1に登場したこちらの計算箱をご覧ください。
+              <H args={{ name: 'play' }} /> すると、結果は{' '}
+              <EmojiNumber number={4} /> になります。
+            </P>
+            <R.Jiqb />
+            <P>
+              これを弁当箱で再現するには、
+              <Em>
+                <EmojiNumber number={2} /> に変換できる弁当箱と、
+                <H args={{ name: 'plusOneEffect' }} />
+                がある弁当箱を「<Strong>2個</Strong>」合体させればいい
+              </Em>
+              のです。
+            </P>
+            <R.Xhdq>
+              <EmojiNumber number={2} /> に変換できる弁当箱と
+              <br />
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱を「<Strong>2個</Strong>」<br />
+              合体すれば、
+              <EmojiNumber number={2} /> <CustomEmoji type="plusOne" />{' '}
+              <CustomEmoji type="plusOne" /> の計算箱を再現できる
+            </R.Xhdq>
+            <P>
+              上の弁当箱は実行に時間がかかるので、ここでは早送りはしませんが、
+              <Em>
+                <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                ボタンを押すと、答えが <EmojiNumber number={4} />{' '}
+                になるのを確認できます。
+              </Em>
+            </P>
+            <Hr />
+            <P>
+              まとめると、
+              <Em>
+                計算箱の「<Strong>1を足す機能</Strong>{' '}
+                <CustomEmoji type="plusOne" />
+                」は、弁当箱で再現することができる
+              </Em>
+              のです。このポイントさえ覚えていただければ、細かいことは分からなくても大丈夫です！
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="mathBox" />,
+                <CustomEmoji type="plusOne" />,
+                <CustomEmoji type="doubleArrow" />,
+                <Emoji>🍱</Emoji>,
+                <CustomEmoji type="plusOneOrange" />
+              ]}
+              description={
+                <>
+                  計算箱の「<Strong>1を足す機能</Strong>{' '}
+                  <CustomEmoji type="plusOne" />
+                  」は、
+                  <br />
+                  弁当箱で「<Strong>再現</Strong>」することができる
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: <>他の機能も再現できる？</>,
+        content: (
+          <>
+            <P>
+              ここで疑問なのですが、初級で説明した通り、計算箱には「
+              <Strong>1を足す機能</Strong> <CustomEmoji type="plusOne" />
+              」以外にも、「<Strong>1を引く機能</Strong>{' '}
+              <CustomEmoji type="minusOne" />
+              」や、「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」がありましたよね。
+            </P>
+            <R.Xmqp>
+              「<Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+              」の例
+            </R.Xmqp>
+            <R.Ednv>
+              「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+              」の例
+              <br />
+              (<CustomEmoji type="plusOne" /> を <EmojiNumber number={4} />{' '}
+              回繰り返す)
+            </R.Ednv>
+            <P>
+              <Em>
+                これらの機能も、弁当箱で再現することができるのでしょうか？
+              </Em>
+            </P>
+            <EmojiSeparator
+              nodes={[
+                <CustomEmoji type="minusOne" />,
+                <Emoji>🍱</Emoji>,
+                <Emoji>🔁</Emoji>
+              ]}
+              description={
+                <>
+                  「<Strong>1を引く機能</Strong> <CustomEmoji type="minusOne" />
+                  」や
+                  <br />「<Strong>繰り返しの機能</Strong> <Emoji>🔁</Emoji>
+                  」も、
+                  <br />
+                  弁当箱で「再現」できる？
+                </>
+              }
+            />
+            <P>
+              <Em>この疑問については、後に答えが明らかになります。</Em>
+              楽しみにしていてください。
+            </P>
+          </>
+        )
+      },
+      {
+        type: 'sideNote',
+        title: <>考えつかなくても大丈夫！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>ミニオン、ひとつ愚痴を聞いてもらえるかい？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>はい、どうしました？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>
+                        さっきの問題、難しすぎやしないかい？普通は、サヤちゃんみたいに答えをとっさに思いつかないよ！
+                      </P>
+                      <P>
+                        <Em>
+                          こういうのがパッと思いつけないと、コンピュータサイエンスを学ぶ資格はないのかな？
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qrfw>
+              さっきの答えの弁当箱。普通はこんなの、
+              <br />
+              とっさに思いつかないよ！<Emoji>😢</Emoji>
+            </R.Qrfw>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>いえ、そんなことは全くありませんよ。</Strong>
+                        むしろ、こういう答えを思いつけるのはひと握りの天才だけです。
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'sad',
+                  children: (
+                    <>
+                      <P>え、そうなの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>はい。先ほどの問題は超難問でしたから。</P>
+                      <P>
+                        <Strong>
+                          答えを思いつけなくても、答えを見て、「なるほど、そういうことだったのか」と理解できれば、コンピュータサイエンスを学ぶ素養は十分すぎるほどあります。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'smile',
+                  children: (
+                    <>
+                      <P>そっか…気が楽になったよ。ありがとう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>いえいえ。それでは、そろそろ話を戻しましょう！</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              emojis={['🐶', '🙂', '😈', '👧🏻']}
+              description={<>話を戻しましょう！</>}
+            />
+          </>
+        )
+      },
+      {
+        title: <>話を戻すと…</>,
+        content: (
+          <>
+            <P>
+              悪魔による難しい問題に見事答えられたことで、村人たちは大喜びでした。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>
+                        やった！サヤちゃんのおかげで問題に答えられたぞ！これで計算箱を返してもらえる！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>しかし、当のサヤちゃんには何か腑に落ちない点があるようです。</P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ミニオンさん、
+                        <Em>おかしなことに気づいちゃったんだけど…</Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>はい、「おかしなこと」とは何ですか？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              サヤちゃんが気づいた、「<Strong>おかしなこと</Strong>
+              」とは何なのでしょうか？次のページで説明していきます！
+            </P>
+            <EmojiSeparator emojis={['❓', '👧🏻', '❓']} />
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)
diff --git a/src/contents/9.en.tsx b/src/contents/9.en.tsx
index 5f4ca258b..71ff7c347 100644
--- a/src/contents/9.en.tsx
+++ b/src/contents/9.en.tsx
@@ -1,4 +1,1298 @@
 import React from 'react'
 import EpisodeCardList from 'src/components/EpisodeCardList'
+import { P, Em, Strong, Ul, UlLi } from 'src/components/ContentTags'
+import H from 'src/components/H'
+import BubbleQuotes from 'src/components/BubbleQuotes'
+import EmojiNumber from 'src/components/EmojiNumber'
+import EmojiWithText from 'src/components/EmojiWithText'
+import EmojiSeparator from 'src/components/EmojiSeparator'
+import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
+import CustomEmoji from 'src/components/CustomEmoji'
+import EmojiForLetterWithBottomRightBadgeWrapper from 'src/components/EmojiForLetterWithBottomRightBadgeWrapper'
+import EmojiForLetter from 'src/components/EmojiForLetter'
+import Emoji from 'src/components/Emoji'
+import BottomRightBadge from 'src/components/BottomRightBadge'
+import TwoColGrid from 'src/components/TwoColGrid'
+import * as R from 'src/components/Runners'
+import NextLessonButton from 'src/components/NextLessonButton'
 
-export default () => <EpisodeCardList cards={[]} />
+export default () => (
+  <EpisodeCardList
+    cards={[
+      {
+        title: <>サヤちゃんの疑問</>,
+        content: (
+          <>
+            <P>
+              サヤちゃんは、
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱について、あることに気が付きました。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>ねえねえ、見てほしいものがあるんだけど。</P>
+                      <P>
+                        まず、
+                        <Em>
+                          これは <EmojiNumber number={1} /> に変換できる弁当箱
+                        </Em>
+                        だよね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Cmla>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'd',
+                  number: 1
+                }}
+              />
+            </R.Cmla>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>うん、そうだけど、それがどうしたの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        これを、前回サヤが考えた
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱と合体させて、
+                        <H args={{ name: 'runAndConvertToMathbox' }} />{' '}
+                        すると、どうなると思う？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Nhqo>
+              <H args={{ name: 'plusOneEffect' }} />
+              と合体させて、
+              <br />
+              <H args={{ name: 'runAndConvertToMathbox' }} />
+              <br />
+              するとどうなる？
+            </R.Nhqo>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>
+                        そりゃあ、
+                        <Em>
+                          <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                          <EmojiNumber number={1} /> を計算できるんだから、
+                          <EmojiNumber number={2} /> になるに決まっている
+                        </Em>
+                        だろう？
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <EmojiNumber number={1} />,
+                <Emoji>➕</Emoji>,
+                <EmojiNumber number={1} />
+              ]}
+              description={
+                <>
+                  結果は <EmojiNumber number={2} /> になるはず…？
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        じゃあ、
+                        <H args={{ name: 'play' }} />
+                        してみてよ！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>実行してみると…</>,
+        content: (
+          <>
+            <P>
+              それでは、
+              <H args={{ name: 'pressFastForward', skippable: true }} />
+            </P>
+            <R.Akik />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        実行を終えたので、
+                        <H args={{ name: 'convertToMathbox' }} />{' '}
+                        したいところですが…
+                      </P>
+                      <P>
+                        残念ながら、
+                        <Strong>
+                          この弁当箱はぼくが計算箱に変換することができません。
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Auks>計算箱に変換できない</R.Auks>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        理由は、
+                        <Em>以下の法則に沿っていないからです。</Em>
+                      </P>
+                      <R.Eozk>
+                        <H args={{ name: 'convertiblePatternCaption' }} />
+                      </R.Eozk>
+                      <P>
+                        <Em>
+                          右上には <Emoji>🅱️</Emoji> の料理が「
+                          <Strong>ひとつだけ</Strong>
+                          」ある必要があります。しかし、
+                          <Em>
+                            ここでは <Emoji>🅱️</Emoji> の料理が
+                            <Strong>ふたつ</Strong>もある
+                          </Em>
+                          ので、計算箱に変換できないのです。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Vqwp>
+              右上に <Emoji>🅱️</Emoji> がふたつあるので、
+              <br />
+              計算箱に変換できない
+            </R.Vqwp>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>
+                        お、おかしい…なんで <EmojiNumber number={2} />{' '}
+                        に変換できる弁当箱にならないんだ？前回はちゃんとできていたのに…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>前回と比較してみよう</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、前回と比較してみましょう。前回実行したのは、こちらの弁当箱でした。
+                      </P>
+                      <P>
+                        <Strong>
+                          先ほどと唯一違うのは、上の部分に{' '}
+                          <EmojiWithText letter="b" /> のかわりに{' '}
+                          <EmojiWithText letter="e" /> が入っている
+                        </Strong>
+                        ところです。(<Em>黄色</Em>で示しています)
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              <H args={{ name: 'pressFastForward' }} />
+            </P>
+            <R.Exbn>
+              <Strong>前回実行した弁当箱:</Strong>
+              <br />
+              上の部分は <EmojiNumber number={1} /> に変換できる。
+              <br />
+              <Em>
+                先ほどと違うのは、上の <EmojiForLetter letter="e" /> の部分。
+              </Em>
+              <br />
+              それ以外はすべて先ほどと同じ。
+            </R.Exbn>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        こちらは、最終的に <EmojiNumber number={2} />{' '}
+                        に変換できる弁当箱になりますね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rico>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 2, letter: 'b' }}
+              />
+            </R.Rico>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、どうして結果に違いが出るんだろう？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+            に同じ料理があると、結果が狂う
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>では、ここでネタばらしをしましょう。</P>
+                      <P>
+                        こちらに、先ほど
+                        <Strong>失敗した</Strong>例をもう一度表示しています。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Ybne>
+              先ほど{' '}
+              <Em>
+                <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                <EmojiNumber number={1} /> を計算できなかった
+              </Em>
+              例
+            </R.Ybne>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        次に、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcArg"
+                        />{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcBound"
+                        />{' '}
+                        の印をつけてみます。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Qlcq />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ここで、
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          の両方に、
+                          <EmojiWithText letter="b" /> がある
+                        </Strong>
+                        のに注目してみてください。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Kwyy>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              の両方に
+              <EmojiWithText letter="b" /> がある
+            </R.Kwyy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        実は、このように{' '}
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          に同じ料理があると、実行結果が狂ってしまう
+                        </Strong>
+                        のです。
+                      </P>
+                      <P>
+                        実行結果が狂ってしまうから、
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} />{' '}
+                        を計算できない、ということになります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="b" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+              description={
+                <>
+                  <Strong>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    に同じ料理があると、
+                    <br />
+                    実行結果が狂う
+                  </Strong>
+                  <br />
+                  (先ほどの場合は
+                  <EmojiWithText letter="b" /> が<br />
+                  <BottomRightBadge
+                    inline
+                    bottomRightBadgeType="callArg"
+                  /> と{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  両方にある)
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>へー、そうなんだ！どうして結果が狂うの？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        この例だと複雑すぎて説明が難しいので、
+                        <Em>簡単な例を使って説明しますね！</Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: (
+          <>
+            <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+            <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+            に同じ料理がない場合とある場合
+          </>
+        ),
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、簡単な例で説明します。次のふたつの例をご覧ください。
+                      </P>
+                      <Ul>
+                        <UlLi>
+                          左側は、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          が違います。
+                        </UlLi>
+                        <UlLi>
+                          右側は、
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          が同じ
+                          <EmojiWithText letter="b" />
+                          です。
+                        </UlLi>
+                      </Ul>
+                      <P>それぞれを進めてみますね。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Oukl>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    が違う
+                  </R.Oukl>
+                  <ExpressionRunnerSeparator />
+                  <R.Etae></R.Etae>
+                  <ExpressionRunnerSeparator />
+                  <R.Jwdn></R.Jwdn>
+                  <ExpressionRunnerSeparator />
+                  <R.Yabb></R.Yabb>
+                  <ExpressionRunnerSeparator />
+                  <R.Hbbv>下の料理が違う</R.Hbbv>
+                </>
+              }
+              right={
+                <>
+                  <R.Rypq>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    が同じ
+                  </R.Rypq>
+                  <ExpressionRunnerSeparator />
+                  <R.Wqml></R.Wqml>
+                  <ExpressionRunnerSeparator />
+                  <R.Abnp></R.Abnp>
+                  <ExpressionRunnerSeparator />
+                  <R.Osff></R.Osff>
+                  <ExpressionRunnerSeparator />
+                  <R.Fxok>下の料理が同じ</R.Fxok>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          左側は、下のふたつの料理が違うけど、右側は下のふたつの料理が同じになった！
+                        </Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>そうなんです。このまま最後まで実行すると、</P>
+                      <Ul>
+                        <UlLi>
+                          左側は{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcBound"
+                          />{' '}
+                          の <EmojiWithText letter="c" /> が残るのに対し、
+                        </UlLi>
+                        <UlLi>
+                          右側は{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          の <EmojiWithText letter="d" /> が残ります。
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Lxhc></R.Lxhc>
+                  <ExpressionRunnerSeparator />
+                  <R.Nntn></R.Nntn>
+                  <ExpressionRunnerSeparator />
+                  <R.Yxel></R.Yxel>
+                </>
+              }
+              right={
+                <>
+                  <R.Hvqy></R.Hvqy>
+                  <ExpressionRunnerSeparator />
+                  <R.Veft></R.Veft>
+                  <ExpressionRunnerSeparator />
+                  <R.Bdme></R.Bdme>
+                  <ExpressionRunnerSeparator />
+                  <R.Ivol></R.Ivol>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        最初と最後だけをピックアップすると、以下のようになります。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <TwoColGrid
+              left={
+                <>
+                  <R.Oukl>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    が違う
+                  </R.Oukl>
+                  <ExpressionRunnerSeparator />
+                  <R.Yxel></R.Yxel>
+                </>
+              }
+              right={
+                <>
+                  <R.Rypq>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    が同じ
+                  </R.Rypq>
+                  <ExpressionRunnerSeparator />
+                  <R.Ivol></R.Ivol>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        というわけで、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        に同じ料理がない場合とある場合で、最終的な結果が狂ってくることがお分かりいただけたでしょうか。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <EmojiForLetter letter="b" />,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+              description={
+                <>
+                  <Strong>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    に同じ料理があると、
+                    <br />
+                    実行結果が狂う
+                  </Strong>
+                </>
+              }
+            />
+          </>
+        )
+      },
+      {
+        title: <>話を戻すと…</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、先ほど <EmojiNumber number={1} />{' '}
+                        <Emoji>➕</Emoji> <EmojiNumber number={1} />{' '}
+                        を計算できなかった弁当箱に話を戻しましょう。
+                      </P>
+                      <P>
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        の両方に
+                        <EmojiWithText letter="b" />{' '}
+                        があるので、結果が狂うのですね。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Kwyy>
+              <Em>
+                <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                <EmojiNumber number={1} /> を計算できなかった
+              </Em>
+              理由:
+              <br />
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              の両方に
+              <EmojiWithText letter="b" /> が<br />
+              あるせいで、結果が狂ったから
+            </R.Kwyy>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>じゃあ、どうすればいいんだろう？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          のどちらかの
+                          <EmojiWithText letter="b" />{' '}
+                          を別の料理に変えれば、上手くいく
+                        </Strong>
+                        というわけだよね。
+                      </P>
+                      <P>
+                        じゃあ…
+                        <Em>
+                          ミニオンさんお願い！<Strong>特別ルール</Strong>
+                          を設けてくれないかな？
+                        </Em>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>どういうことですか？</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        <H args={{ name: 'bentoBoxPuzzle' }} />
+                        に、「
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          と{' '}
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="funcUnbound"
+                          />{' '}
+                          に同じ料理が登場したら、どちらかを別な料理に変える
+                        </Strong>
+                        」という特別ルールを設けてほしいんだ。
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <Emoji>🙇🏻‍♀️</Emoji>,
+                <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />
+              ]}
+              description={
+                <>
+                  <Strong>
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    と{' '}
+                    <BottomRightBadge
+                      inline
+                      bottomRightBadgeType="funcUnbound"
+                    />{' '}
+                    に同じ料理が登場したら、
+                    <br />
+                    どちらかを別な料理に変える
+                  </Strong>
+                  <br />
+                  という特別ルールを設けてほしい
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>分かりました、いいですよ！</Strong>
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>やったー、ありがとう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'roll',
+                  children: (
+                    <>
+                      <P>え、そんなに簡単にルールを改変してくれるの…？</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>特別ルール</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>それでは、</P>
+                      <Ul>
+                        <UlLi>
+                          <Em>
+                            <BottomRightBadge
+                              inline
+                              bottomRightBadgeType="callArg"
+                            />{' '}
+                            と{' '}
+                            <BottomRightBadge
+                              inline
+                              bottomRightBadgeType="funcUnbound"
+                            />{' '}
+                            に同じ料理が登場したら、
+                          </Em>
+                        </UlLi>
+                        <UlLi>
+                          <Strong>
+                            自動的に{' '}
+                            <BottomRightBadge
+                              inline
+                              bottomRightBadgeType="callArg"
+                            />{' '}
+                            を、まだ使われてない料理にランダムに変える。
+                          </Strong>
+                        </UlLi>
+                      </Ul>
+                      <P>という特別ルールを設けましょう。</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <EmojiSeparator
+              nodes={[
+                <BottomRightBadge inline bottomRightBadgeType="callArg" />,
+                <CustomEmoji type="singleArrow" />,
+                <Emoji>❓</Emoji>
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  に同じ料理が登場したら、
+                  <br />
+                  <Strong>
+                    自動的に{' '}
+                    <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                    がまだ使われてない料理に
+                    <br />
+                    ランダムに変わる
+                  </Strong>
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        つまり、先ほどのように{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        に同じ料理が登場した場合…
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Smdm />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        <Strong>
+                          <BottomRightBadge
+                            inline
+                            bottomRightBadgeType="callArg"
+                          />{' '}
+                          の <EmojiWithText letter="b" />
+                          が自動的に別の料理に変わります。
+                        </Strong>
+                      </P>
+                      <P>
+                        <Em>
+                          何に変わるかについてですが、
+                          <Strong>
+                            まだ使われていない料理にランダムに変わります
+                          </Strong>
+                          。ここでは、
+                          <EmojiWithText letter="e" /> になりました。
+                        </Em>
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Niwv />
+            <EmojiSeparator
+              nodes={[
+                <EmojiForLetterWithBottomRightBadgeWrapper bottomRightBadgeType="callArg">
+                  <EmojiForLetter letter="b" />
+                </EmojiForLetterWithBottomRightBadgeWrapper>,
+                <CustomEmoji type="singleArrow" />,
+                <EmojiForLetterWithBottomRightBadgeWrapper bottomRightBadgeType="callArg">
+                  <EmojiForLetter letter="e" />
+                </EmojiForLetterWithBottomRightBadgeWrapper>
+              ]}
+              description={
+                <>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" /> の
+                  <EmojiWithText letter="b" /> が、まだ
+                  <br />
+                  使われていない
+                  <EmojiWithText letter="e" /> に変わる
+                </>
+              }
+            />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'surprised',
+                  children: (
+                    <>
+                      <P>
+                        これで、
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="callArg"
+                        />{' '}
+                        と{' '}
+                        <BottomRightBadge
+                          inline
+                          bottomRightBadgeType="funcUnbound"
+                        />{' '}
+                        が被らなくなった！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        では、最後まで進めてみましょう。
+                        <H args={{ name: 'pressFastForward' }} />
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Fsgq />
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'celebrate',
+                  children: (
+                    <>
+                      <P>
+                        やった！無事、
+                        <EmojiNumber number={2} /> に変換できる弁当箱になった！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Rico>
+              <H
+                args={{ name: 'canBeConvertedCaption', number: 2, letter: 'b' }}
+              />
+            </R.Rico>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'saya',
+                  children: (
+                    <>
+                      <P>
+                        ということは、
+                        <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+                        <EmojiNumber number={1} /> を計算できたということだね！
+                      </P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        その通りです。では、そろそろ今回のまとめに入りましょう！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        type: 'summary',
+        title: (
+          <>
+            <H args={{ name: 'summary' }} />
+          </>
+        ),
+        content: (
+          <>
+            <P>
+              前回サヤちゃんが考えた
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱は、
+            </P>
+            <R.Nvqu>
+              <H args={{ name: 'plusOneEffect' }} />
+              がある弁当箱
+            </R.Nvqu>
+            <P>
+              次の
+              <Em>
+                <EmojiNumber number={1} /> に変換できる弁当箱
+              </Em>
+              と組み合わせた場合、
+            </P>
+            <R.Cmla>
+              <H
+                args={{
+                  name: 'canBeConvertedCaption',
+                  letter: 'd',
+                  number: 1
+                }}
+              />
+            </R.Cmla>
+            <P>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              に同じ料理があり、そのままだと結果が狂ってしまいます。
+            </P>
+            <R.Kwyy>
+              <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+              <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+              の両方に
+              <EmojiWithText letter="b" /> がある
+            </R.Kwyy>
+            <P>しかし、今回から新たに以下の特別ルールが適用されます:</P>
+            <Ul>
+              <UlLi>
+                <Em>
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" /> と{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="funcUnbound" />{' '}
+                  に同じ料理が登場したら、
+                </Em>
+              </UlLi>
+              <UlLi>
+                <Strong>
+                  自動的に{' '}
+                  <BottomRightBadge inline bottomRightBadgeType="callArg" />{' '}
+                  を、まだ使われてない料理にランダムに変える。
+                </Strong>
+              </UlLi>
+            </Ul>
+            <R.Niwv />
+            <P>
+              これにより、正しく <EmojiNumber number={1} /> <Emoji>➕</Emoji>{' '}
+              <EmojiNumber number={1} /> を計算できるようになります。
+            </P>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>うーん、この特別ルールは忘れてしまいそうだなあ…</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'dog',
+                  children: (
+                    <>
+                      <P>
+                        ご心配なく！
+                        <Em>
+                          この特別ルールは次のページ以降で登場する弁当箱でも使われますが、
+                        </Em>
+                        <Strong>暗記する必要はありません。</Strong>
+                        早送り中に自動で行われますから。
+                      </P>
+                      <P>
+                        なんとなく「
+                        <Em>こういう法則があるんだな</Em>
+                        」と思ってくだされば大丈夫です！
+                      </P>
+                    </>
+                  )
+                }
+              ]}
+            />
+          </>
+        )
+      },
+      {
+        title: <>これで完璧！</>,
+        content: (
+          <>
+            <BubbleQuotes
+              quotes={[
+                {
+                  type: 'happy',
+                  children: (
+                    <>
+                      <P>
+                        いろいろあったけど、これで、
+                        <H args={{ name: 'plusOneEffect' }} />
+                        がある弁当箱は完璧にマスターしたぞ！
+                      </P>
+                      <P>悪魔よ、約束通り計算箱は返してもらう！</P>
+                    </>
+                  )
+                },
+                {
+                  type: 'devil',
+                  children: (
+                    <>
+                      <P>うぐぐ…</P>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <P>
+              果たして、村人たちは計算箱を取り戻せたのでしょうか？次のページで確かめてみましょう！
+            </P>
+            <NextLessonButton />
+          </>
+        )
+      }
+    ]}
+  />
+)