+ +
+ + ++ +
+ + +CAMPER CAFE
+Est. 2020
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+終了タグ `
` が 1 つ必要です。
+
+```js
+assert(code.match(/<\/h2\s*>/i));
+```
+
+既存の `section` 要素を変更しないでください。 終了タグを削除していないか確認してください。
+
+```js
+assert($('section').length === 1);
+```
+
+`h2` 要素は `section` 要素の中にある必要があります。
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.parentElement.tagName === 'SECTION');
+```
+
+`h2` 要素のテキストは `Coffee` にする必要があります。
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.innerText === 'Coffee');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+CAMPER CAFE
+Est. 2020
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+div {
+ width: 300px;
+ background-color: burlywood;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
new file mode 100644
index 00000000000..806168fe215
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -0,0 +1,85 @@
+---
+id: 5f356ed6199b0cdef1d2be8f
+title: ステップ 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+ここまでは要素型セレクターを使用して要素にスタイルを適用してきました。 クラスセレクターは、次のようにクラス名の前にドットをつけることで定義されます:
+
+```css
+.class-name {
+ styles
+}
+```
+
+`div` を `menu` という名前のクラスと置き換えて、既存の `div` セレクターをクラスセレクターに変更してください。
+
+# --hints--
+
+`.menu` クラスセレクターが必要です。
+
+```js
+const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
+assert(hasMenu);
+```
+
+`div` セレクターが無いようにしてください。
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(!hasDiv);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
new file mode 100644
index 00000000000..da0c0052421
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -0,0 +1,76 @@
+---
+id: 5f356ed63c7807a4f1e6d054
+title: ステップ 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+次の目標は、`div` がページの幅全体に広がらないようにすることです。 そうするには CSS の `width` プロパティが最適です。 スタイルシート内に新しい要素型セレクターを作成して、`div` 要素の幅を `300px` にしてください。
+
+# --hints--
+
+`div` 要素型セレクターが必要です。
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(hasDiv);
+```
+
+`width` プロパティの値を `300px` に設定する必要があります。
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(hasWidth);
+```
+
+`div` の幅は 300px である必要があります。
+
+```js
+const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+assert(divWidth === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
new file mode 100644
index 00000000000..f19a048c6ba
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed63e0fa262326eef05
+title: ステップ 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+では既存の `div` セレクターを使用して `div` 要素の背景色を `burlywood` に設定してください。
+
+# --hints--
+
+`background-color` プロパティの値を `burlywood` に設定する必要があります。
+
+```js
+const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackgroundColor);
+```
+
+`div` 要素の背景色は burlywood に設定されている必要があります。
+
+```js
+const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+assert(divBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 300px;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
new file mode 100644
index 00000000000..447e6cbf4ac
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -0,0 +1,83 @@
+---
+id: 5f356ed656a336993abd9f7c
+title: ステップ 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+次に、`div` を水平方向の中央に配置します。 そうするには `margin-left` と `margin-right` プロパティの値を `auto` に設定してください。 マージンとは、要素の周りの見えないスペースだと考えてください。 これら 2 つのマージンプロパティを使用して、`div` 要素を `body` 要素内の中央に配置してください。
+
+# --hints--
+
+`margin-left` プロパティの値を `auto` に設定する必要があります。
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
+assert(hasMargin);
+```
+
+`margin-right` プロパティの値を `auto` に設定する必要があります。
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
+assert(hasMargin);
+```
+
+`div` の `margin-left` と `margin-right` プロパティの値を `auto` に設定する必要があります。
+
+```js
+const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
+const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
+assert(divMarginRight === 'auto');
+assert(divMarginLeft === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+Coffee
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+--fcc-editable-region--
+div {
+ width: 80%;
+ background-color: burlywood;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
new file mode 100644
index 00000000000..4ae1aae40e2
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -0,0 +1,75 @@
+---
+id: 5f356ed69db0a491745e2bb6
+title: ステップ 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+クラスのスタイルを `div` 要素に適用するには、`class` 属性を `div` 要素の開始タグに追加し、その値を `menu` に設定してください。
+
+# --hints--
+
+`div` が今まで通り表示されている必要があります。 `CAMPER CAFE
+Est. 2020
+Coffee
+` タグが不正な形式になっていないか確認してください。
+
+```js
+assert($('div').length === 1);
+```
+
+`div` 要素に `menu` クラスが必要です。
+
+```js
+assert($('div').attr('class').includes('menu'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+
+```
+
+```css
+body {
+ /*
+ background-color: burlywood;
+ */
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
new file mode 100644
index 00000000000..e4f2b231367
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: ステップ 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+`div` 要素はこれまで使用してきた他のコンテンツ要素とは異なり、主にレイアウトデザイン目的で使用されます。 `body` 要素内に `div` 要素を追加し、他のすべての要素を新しい `div` の中に移動させてください。
+
+# --hints--
+
+`CAMPER CAFE
+Est. 2020
+Coffee
+` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(/Cafe Menu
+
+
+--fcc-editable-region--
+
+
+
+
+
+
+
+
+--fcc-editable-region--
+
+```
+
+```css
+body {
+ background-color: burlywood;
+}
+
+h1, h2, p {
+ text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
new file mode 100644
index 00000000000..815f590566f
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -0,0 +1,86 @@
+---
+id: 5f35e5c4321f818cdc4bed30
+title: ステップ 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+良さそうですね。 ではメニュー項目を追加し始めましょう。 空の `article` 要素を 1 つ、`Coffee` という見出しの下に追加してください。 ここにはカフェで提供しているコーヒー各種のフレーバーと価格を含める予定です。
+
+# --hints--
+
+`` の開始タグが 1 つ必要です。
+
+```js
+assert(code.match(//i));
+```
+
+終了タグ ` ` が 1 つ必要です。
+
+```js
+assert(code.match(/<\/article>/i));
+```
+
+既存の `h2` 要素を変更しないようにしてください。
+
+```js
+assert($('h2').length === 1);
+```
+
+`article` 要素を `h2` 要素の後に置く必要があります。
+
+```js
+const article = $('article')[0];
+assert(article.previousElementSibling.tagName === 'H2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
new file mode 100644
index 00000000000..ec2ed13d29d
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -0,0 +1,92 @@
+---
+id: 5f35e5c44359872a137bd98f
+title: ステップ 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+カフェの主な商品はコーヒーなので、ページの背景にコーヒー豆の画像を使いましょう。
+
+`body` 要素型セレクター内のコメントと中身を削除してください。 次に、`background-image` プロパティを追加し、値を `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)` に設定してください。
+
+# --hints--
+
+コメントアウトされている `background-color` プロパティを削除する必要があります。
+
+```js
+assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
+```
+
+`body` セレクターにはコメントを含まないようにしてください。
+
+```js
+assert(!code.match(/body\s*{\s*\/\*/i));
+```
+
+`background-image` プロパティの値を `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)` に設定する必要があります。
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
+assert(hasBackground)
+```
+
+`body` 要素はコーヒー豆の背景画像をもつ必要があります。
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
+console.log(bodyBackground);
+assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+--fcc-editable-region--
+ /*
+ background-color: burlywood;
+ */
+--fcc-editable-region--
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
new file mode 100644
index 00000000000..9ae053b4c63
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -0,0 +1,107 @@
+---
+id: 5f3c866d0fc037f7311b4ac8
+title: ステップ 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+望んでいた形により近づきましたが、価格が右側にとどまりませんでした。 `inline-block` 要素はコンテンツの幅だけを占めるので、このようになります。 幅を広げるため、`width` プロパティを `flavor` と `price` のクラスセレクターに追加し、値をそれぞれ `50%` に設定してみましょう。
+
+# --hints--
+
+`.flavor` セレクター内の `width` プロパティの値を `50%` に設定する必要があります。
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+`.price` セレクター内の `width` プロパティの値を `50%` に設定する必要があります。
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
new file mode 100644
index 00000000000..0ef923b370b
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -0,0 +1,128 @@
+---
+id: 5f3c866d5414453fc2d7b480
+title: ステップ 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+既存のコーヒー / 価格のペアの下に、それぞれ 2 つの `p` 要素がネストされた `article` 要素を使用して、以下のコーヒーと価格を追加してください。 前と同じで、1 つ目の `p` 要素のテキストにはコーヒーのフレーバーを入れ、2 つ目の `p` 要素のテキストには価格を入れる必要があります。
+
+```bash
+Caramel Macchiato 3.75
+Pumpkin Spice 3.50
+Hazelnut 4.00
+Mocha 4.50
+```
+
+# --hints--
+
+`article` 要素が 5 つ必要です。
+
+```js
+assert($('article').length === 5);
+```
+
+各 `article` 要素には `p` 要素が 2 つ必要です。
+
+```js
+const articles = $('article');
+assert(articles[0].children.length === 2);
+assert(articles[1].children.length === 2);
+assert(articles[2].children.length === 2);
+assert(articles[3].children.length === 2);
+assert(articles[4].children.length === 2);
+```
+
+最初の `article` 要素には `French Vanilla` と `3.00` のテキストをもつ `p` 要素がそれぞれ必要です。
+
+```js
+const children = $('article')[0].children;
+assert(children[0].innerText.match(/French Vanilla/i));
+assert(children[1].innerText.match(/3\.00/i));
+```
+
+2 つ目の `article` 要素には `Caramel Macchiato` と `3.75` のテキストをもつ `p` 要素がそれぞれ必要です。
+
+```js
+const children = $('article')[1].children;
+assert(children[0].innerText.match(/Caramel Macchiato/i));
+assert(children[1].innerText.match(/3\.75/i));
+```
+
+3 つ目の `article` 要素には `Pumpkin Spice` と `3.50` のテキストをもつ `p` 要素がそれぞれ必要です。
+
+```js
+const children = $('article')[2].children;
+assert(children[0].innerText.match(/Pumpkin Spice/i));
+assert(children[1].innerText.match(/3\.50/i));
+```
+
+4 つ目の `article` 要素には `Hazelnut` と `4.00` のテキストをもつ `p` 要素がそれぞれ必要です。
+
+```js
+const children = $('article')[3].children;
+assert(children[0].innerText.match(/Hazelnut/i));
+assert(children[1].innerText.match(/4\.00/i));
+```
+
+5 つ目の `article` 要素には `Mocha` と `4.50` のテキストをもつ `p` 要素がそれぞれ必要です。
+
+```js
+const children = $('article')[4].children;
+assert(children[0].innerText.match(/Mocha/i));
+assert(children[1].innerText.match(/4\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
new file mode 100644
index 00000000000..f5d38a3b0cc
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -0,0 +1,88 @@
+---
+id: 5f3c866daec9a49519871816
+title: ステップ 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+`article` 要素は一般的に、関連する情報を持つ複数の要素を含みます。 今回はコーヒーのフレーバーとその価格を含みます。 2 つの `p` 要素を `article` 要素内にネストしてください。 その最初の要素には `French Vanilla` というテキストを、また 2 つ目の要素には `3.00` というテキストを入れてください。
+
+# --hints--
+
+既存の `article` 要素を変更しないでください。
+
+```js
+assert($('article').length === 1);
+```
+
+`article` 要素には `p` 要素が 2 つ必要です。
+
+```js
+assert($('article').children('p').length === 2);
+```
+
+最初の `p` 要素には `French Vanilla` というテキストが必要です。
+
+```js
+const firstP = $('article').children('p')[0];
+assert(firstP.innerText.match(/French Vanilla/i));
+```
+
+2 つ目の `p` 要素には `3.00` というテキストが必要です。
+
+```js
+const secondP = $('article').children('p')[1];
+assert(secondP.innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
new file mode 100644
index 00000000000..865ccc74b17
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -0,0 +1,117 @@
+---
+id: 5f3c866dbf362f99b9a0c6d0
+title: ステップ 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+`item` というクラス属性をもつ `article` 要素内に `p` 要素がネストされています。 次のようにして、`item` という名前のクラスをもつ要素の中にネストされているすべての `p` 要素にスタイルを適用できます:
+
+```css
+.item p { }
+```
+
+上記のセレクターを使用し、`display` プロパティと値 `inline-block` を追加して、`p` 要素が `inline` 要素のように動作するようにしてください。
+
+# --hints--
+
+`.item p` セレクターを使用する必要があります。
+
+```js
+const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
+assert(hasItemP);
+```
+
+`display` プロパティの値を `inline-block` に設定する必要があります。
+
+```js
+const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
+assert(hasDisplay);
+```
+
+`.item p` セレクターの `display` プロパティの値を `inline-block` に設定する必要があります。
+
+```js
+const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
+assert(itemPDisplay === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
new file mode 100644
index 00000000000..ec41240f109
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -0,0 +1,111 @@
+---
+id: 5f3c866dd0d0275f01d4d847
+title: ステップ 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+うまくいきませんでしたね。 `p` 要素に `inline-block` のスタイルを適用してコードの中の別々の行に置くと、最初の `p` 要素の右側に余分なスペースが作成され、それによって 2 つ目の要素が次の行に移動してしまいます。 これを直す方法は、各 `p` 要素の幅を `50%` より少し小さくすることです。
+
+各クラスの `width` の値を `49%` に変更して動作を確認してください。
+
+# --hints--
+
+`.flavor` セレクター内の `width` プロパティの値を `49%` に設定する必要があります。
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '49%');
+```
+
+`.price` セレクター内の `width` プロパティの値を `49%` に設定する必要があります。
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '49%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
new file mode 100644
index 00000000000..539ca808cdf
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -0,0 +1,108 @@
+---
+id: 5f3c866de7a5b784048f94b1
+title: ステップ 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+望んでいた形に近いものになりましたが、ここでフレーバーと価格が一直線上にあるとよさそうです。 `p` 要素は ブロックレベル要素なので、親要素の幅全体に広がっています。
+
+これを一直線上に配置するには、`p` 要素にとあるスタイルを適用してインライン (`inline`) 要素のように動作させる必要があります。 `class` 属性と値 `item` を、`Coffee` という見出しの下にある最初の `article` 要素に追加してください。
+
+# --hints--
+
+`article` 要素に `item` クラスを適用する必要があります。
+
+```js
+assert(code.match(//i))
+```
+
+`item` クラスをもつ要素が 1 つだけ必要です。
+
+```js
+assert($('.item').length === 1);
+```
+
+最初の `article` 要素に `item` クラスが必要です。
+
+```js
+assert($('article')[0].className === 'item');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+
+.price {
+ text-align: right;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
new file mode 100644
index 00000000000..3cfed84b58c
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -0,0 +1,108 @@
+---
+id: 5f3cade94c6576e7f7b7953f
+title: ステップ 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+では次は `flavor` と `price` 両方のクラスの幅を再度 `50%` に設定してください。
+
+# --hints--
+
+`.flavor` セレクター内の `width` プロパティの値を `50%` に設定する必要があります。
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+`.price` セレクター内の `width` プロパティの値を `50%` に設定する必要があります。
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+ text-align: left;
+ width: 49%;
+}
+
+.price {
+ text-align: right;
+ width: 49%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
new file mode 100644
index 00000000000..9e6d8e85e83
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -0,0 +1,119 @@
+---
+id: 5f3cade9993019e26313fa8e
+title: ステップ 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+これはうまくいくことがわかったので、残りの `article` と `p` 要素も最初の組み合わせと同じになるように変更します。 まずは他の `article` 要素に `item` のクラスを追加してください。
+
+# --hints--
+
+`article` 要素が 5 つだけ必要です。
+
+```js
+assert($('article').length === 5);
+```
+
+`.item` 要素が 5 つだけ必要です。
+
+```js
+assert($('.item').length === 5);
+```
+
+`.item` 要素は `article` 要素である必要があります。
+
+
+```js
+const articles = $('article');
+const items = $('.item');
+assert(articles[0] === items[0]);
+assert(articles[1] === items[1]);
+assert(articles[2] === items[2]);
+assert(articles[3] === items[3]);
+assert(articles[4] === items[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
new file mode 100644
index 00000000000..aec33974320
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -0,0 +1,103 @@
+---
+id: 5f3cade9fa77275d9f4efe62
+title: ステップ 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+うまくいきましたが、価格の右側に小さなスペースがまだ残っています。
+
+幅に対していろいろなパーセントの数値を試し続けることもできます。 その代わりに、単に価格の `p` 要素をフレーバーの要素と同じ行に置き、さらに要素の間にスペースが無い状態にしてください。
+
+# --hints--
+
+`p` 要素の間にスペースが無いようにしてください。
+
+```js
+assert(code.match(/Vanilla<\/p>Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 49%;
+}
+
+.price {
+ text-align: right;
+ width: 49%;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
new file mode 100644
index 00000000000..22d90121a51
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
@@ -0,0 +1,100 @@
+---
+id: 5f7691dafd882520797cd2f0
+title: ステップ 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+次に、他の `p` 要素の組を同じ行に配置し、間にスペースが無いようにしてください。
+
+# --hints--
+
+`p` 要素の間にスペースが無いようにしてください。
+
+```js
+assert(!code.match(/<\/p>\s+Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
new file mode 100644
index 00000000000..fa1d03f92b1
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
@@ -0,0 +1,126 @@
+---
+id: 5f7692f7c5b3ce22a57788b6
+title: ステップ 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+スタイルを完成させるには、適切なクラス名 `flavor` または `price` を残りの `p` 要素すべてに追加してください。
+
+# --hints--
+
+`.flavor` 要素が 5 つ必要です。
+
+```js
+assert($('.flavor').length === 5);
+```
+
+`.price` 要素が 5 つ必要です。
+
+```js
+assert($('.price').length === 5);
+```
+
+`.flavor` 要素は、`French Vanilla`、`Caramel Macchiato`、`Pumpkin Spice`、`Hazelnut`、`Mocha` というテキストの `p` 要素である必要があります。
+
+```js
+const p = $('p');
+const flavor = $('.flavor');
+assert(p[1] === flavor[0]);
+assert(p[3] === flavor[1]);
+assert(p[5] === flavor[2]);
+assert(p[7] === flavor[3]);
+assert(p[9] === flavor[4]);
+```
+
+`.price` 要素は、`3.00`、`3.75`、`3.50`、`4.00`、`4.50` というテキストの `p` 要素である必要があります。
+
+```js
+const p = $('p');
+const price = $('.price');
+assert(p[2] === price[0]);
+assert(p[4] === price[1]);
+assert(p[6] === price[2]);
+assert(p[8] === price[3]);
+assert(p[10] === price[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.item p {
+ display: inline-block;
+}
+
+.flavor {
+ text-align: left;
+ width: 50%;
+}
+
+.price {
+ text-align: right;
+ width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
new file mode 100644
index 00000000000..473dedb9dd2
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
@@ -0,0 +1,105 @@
+---
+id: 5f769541be494f25449b292f
+title: ステップ 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+新しく追加した `flavor` クラスをセレクターとして使用し、`text-align` プロパティの値を `left` に設定してください。
+
+# --hints--
+
+`flavor` クラスセレクターが必要です。
+
+```js
+const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
+assert(hasFlavor);
+```
+
+`text-align` プロパティを `left` に設定する必要があります。
+
+```js
+const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
+assert(hasTextAlign);
+```
+
+`flavor` クラスセレクターの `text-align` プロパティの値を `left` に設定する必要があります。
+
+```js
+const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
+assert(flavorTextAlign === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
new file mode 100644
index 00000000000..09cb9f52b14
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -0,0 +1,102 @@
+---
+id: 5f76967fad478126d6552b0d
+title: ステップ 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+次に、価格を右ぞろえにします。 `price` という名前のクラスを、`3.00` というテキストをもつ `p` 要素に追加してください。
+
+# --hints--
+
+`p` 要素に `price` クラスを追加する必要があります。
+
+```js
+assert(code.match(//i));
+```
+
+`price` クラスをもつ要素は 1 つだけである必要があります。
+
+```js
+assert($('.price').length === 1);
+```
+
+`price` クラスは `3.00` というテキストが入っている `p` 要素に追加される必要があります。
+
+```js
+assert($('.price')[0].innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
new file mode 100644
index 00000000000..e5f1bf0f479
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
@@ -0,0 +1,106 @@
+---
+id: 5f769702e6e33127d14aa120
+title: ステップ 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+では、`price` クラスをもつ要素のテキストを右 (`right`) にそろえてください。
+
+# --hints--
+
+`price` クラスセレクターが必要です。
+
+```js
+assert(code.match(/\.price\s*{/i));
+```
+
+`price` クラスセレクターの `text-align` プロパティの値を `right` に設定する必要があります。
+
+```js
+assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
+```
+
+`.price` 要素は右ぞろえにする必要があります。
+
+```js
+assert($('.price').css('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Cafe Menu
+
+
+
+
+
+
+```
+
+```css
+body {
+ background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+ text-align: center;
+}
+
+.menu {
+ width: 80%;
+ background-color: burlywood;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.flavor {
+ text-align: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
/i));
+```
+
+終了タグ `
` が 1 つ必要です。
+
+```js
+assert(code.match(/<\/div>/i));
+```
+
+既存の `body` 要素を変更しないようにしてください。 終了タグを削除していないか確認してください。
+
+```js
+assert($('body').length === 1);
+```
+
+`div` タグは `body` の中にネストされている必要があります。
+
+```js
+const div = $('div')[0];
+assert(div.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ CAMPER CAFE
+Est. 2020
+