diff --git a/src/index.html b/src/index.html
index c5180388eb52306e547c2ab1155ba10bbf03410d..97536ef59ae26a9df4cae5884761e5d6c06e9cab 100644
--- a/src/index.html
+++ b/src/index.html
@@ -126,8 +126,8 @@
overflow-x: auto;
overflow-y: hidden;
display: grid;
- grid-template-columns: repeat(12, 50px);
- grid-template-rows: repeat(6, 60px);
+ grid-template-columns: repeat(18, 50px);
+ grid-template-rows: repeat(9, 60px);
grid-gap: 4px;
padding-left: 4px;
padding-bottom: 4px;
@@ -142,17 +142,16 @@
width: 100%;
height: 100%;
border: none;
- margin: -4px;
border-radius: 3px;
background: #0E0E0F;
color: #FFEBD8;
- }
- .katakana > div > button > span {
- display: block;
+ display: grid;
+ grid-template-columns: auto;
+ grid-template-rows: 35px auto;
}
.katakana > div > button > span:first-child {
font-size: 170%;
- line-height: 115%;
+ line-height: 35px;
}
.container-background {
background: #241B2B;
@@ -265,11 +264,6 @@
background: #1F1C2A;
margin-bottom: -4px; /* Very hacky, but is needed for some reason */
}
- #text-table {
- display: grid;
- grid-template-columns: repeat(auto-fit, 700px);
- grid-template-rows: auto;
- }
@media screen and (prefers-color-scheme: light) {
body {
color: #0E0E0F;
@@ -618,202 +612,386 @@
</div>
<div class="container-distance">
<h2>Customize text</h2>
- <div id="text-table">
- <div class="container">
- <div>
- <div class="input-with-label">
- <label for="headline_text"><h3>headline</h3></label>
- <input type="text" id="headline_text" value="DiVOC"/>
- <div>
- <label for="headline_size">size</label>
- <input type="number" id="headline_size" value="33.84"/>
- </div>
+ <div class="container">
+ <div>
+ <div class="input-with-label">
+ <label for="headline_text"><h3>headline</h3></label>
+ <input type="text" id="headline_text" value="DiVOC"/>
+ <div>
+ <label for="headline_size">size</label>
+ <input type="number" id="headline_size" value="33.84"/>
</div>
</div>
- <div class="container-background katakana-wrapper">
- <details>
- <summary>
- katakana keyboard
- </summary>
- <div class="katakana" id="headline_katakana" for="headline_text">
- <div>n</div>
- <div>w</div>
- <div>r</div>
- <div>y</div>
- <div>m</div>
- <div>h</div>
- <div>n</div>
- <div>t</div>
- <div>s</div>
- <div>k</div>
- <div></div>
- <div></div>
-
- <div><button value="ン"><span>ン</span><span>n</span></button></div>
- <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
- <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
- <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
- <div><button value="マ"><span>マ</span><span>ma</span></button></div>
- <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
- <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
- <div><button value="タ"><span>タ</span><span>ta</span></button></div>
- <div><button value="サ"><span>サ</span><span>sa</span></button></div>
- <div><button value="カ"><span>カ</span><span>ka</span></button></div>
- <div><button value="ア"><span>ア</span><span>a</span></button></div>
- <div>a</div>
-
- <div></div>
- <div></div>
- <div><button value="リ"><span>リ</span><span>ri</span></button></div>
- <div></div>
- <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
- <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
- <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
- <div><button value="チ"><span>チ</span><span>chi</span></button></div>
- <div><button value="シ"><span>シ</span><span>shi</span></button></div>
- <div><button value="キ"><span>キ</span><span>ki</span></button></div>
- <div><button value="イ"><span>イ</span><span>i</span></button></div>
- <div>i</div>
-
- <div></div>
- <div></div>
- <div><button value="ル"><span>ル</span><span>ru</span></button></div>
- <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
- <div><button value="ム"><span>ム</span><span>mu</span></button></div>
- <div><button value="フ"><span>フ</span><span>fu</span></button></div>
- <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
- <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
- <div><button value="ス"><span>ス</span><span>su</span></button></div>
- <div><button value="ク"><span>ク</span><span>ku</span></button></div>
- <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
- <div>u</div>
-
- <div></div>
- <div></div>
- <div><button value="レ"><span>レ</span><span>re</span></button></div>
- <div></div>
- <div><button value="メ"><span>メ</span><span>me</span></button></div>
- <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
- <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
- <div><button value="テ"><span>テ</span><span>te</span></button></div>
- <div><button value="セ"><span>セ</span><span>se</span></button></div>
- <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
- <div><button value="エ"><span>エ</span><span>e</span></button></div>
- <div>e</div>
-
- <div></div>
- <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
- <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
- <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
- <div><button value="モ"><span>モ</span><span>mo</span></button></div>
- <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
- <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
- <div><button value="ト"><span>ト</span><span>to</span></button></div>
- <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
- <div><button value="コ"><span>コ</span><span>ko</span></button></div>
- <div><button value="オ"><span>オ</span><span>o</span></button></div>
- <div>o</div>
- </div>
- </details>
- </div>
</div>
- <div class="container">
- <div>
- <div class="input-with-label">
- <label for="sub_headline_text"><h3>subtitle</h3></label>
- <textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
- <div>
- <label for="sub_headline_size">size</label>
- <input type="number" id="sub_headline_size" value="14"/>
- </div>
+ <div class="container-background katakana-wrapper">
+ <details>
+ <summary>
+ katakana keyboard
+ </summary>
+ <div class="katakana" id="sub_headline_katakana" for="headline_text">
+ <div></div>
+ <div></div>
+ <div>v</div>
+ <div>k</div>
+ <div>s</div>
+ <div>t</div>
+ <div>n</div>
+ <div>h</div>
+ <div>m</div>
+ <div>y</div>
+ <div>r</div>
+ <div>w</div>
+ <div>g</div>
+ <div>z</div>
+ <div>d</div>
+ <div>b</div>
+ <div>p</div>
+ <div></div>
+
+ <div>a</div>
+ <div><button value="ア"><span>ア</span><span>a</span></button></div>
+ <div><button value="ァ"><span>ァ</span><span> </span></button></div>
+ <div><button value="カ"><span>カ</span><span>ka</span></button></div>
+ <div><button value="サ"><span>サ</span><span>sa</span></button></div>
+ <div><button value="タ"><span>タ</span><span>ta</span></button></div>
+ <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
+ <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
+ <div><button value="マ"><span>マ</span><span>ma</span></button></div>
+ <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
+ <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
+ <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
+ <div><button value="ガ"><span>ガ</span><span>ga</span></button></div>
+ <div><button value="ザ"><span>ザ</span><span>za</span></button></div>
+ <div><button value="ダ"><span>ダ</span><span>da</span></button></div>
+ <div><button value="バ"><span>バ</span><span>ba</span></button></div>
+ <div><button value="パ"><span>パ</span><span>pa</span></button></div>
+ <div><button value="ャ"><span>ャ</span><span></span></button></div>
+
+ <div>i</div>
+ <div><button value="イ"><span>イ</span><span>i</span></button></div>
+ <div><button value="ィ"><span>ィ</span><span></span></button></div>
+ <div><button value="キ"><span>キ</span><span>ki</span></button></div>
+ <div><button value="シ"><span>シ</span><span>shi</span></button></div>
+ <div><button value="チ"><span>チ</span><span>chi</span></button></div>
+ <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
+ <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
+ <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
+ <div></div>
+ <div><button value="リ"><span>リ</span><span>ri</span></button></div>
+ <div><button value="ヰ"><span>ヰ</span><span>wi</span></button></div>
+ <div><button value="ギ"><span>ギ</span><span>gi</span></button></div>
+ <div><button value="ジ"><span>ジ</span><span>ji</span></button></div>
+ <div><button value="ヂ"><span>ヂ</span><span>dji</span></button></div>
+ <div><button value="ビ"><span>ビ</span><span>bi</span></button></div>
+ <div><button value="ピ"><span>ピ</span><span>pi</span></button></div>
+ <div></div>
+
+ <div>u</div>
+ <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
+ <div><button value="ゥ"><span>ゥ</span><span></span></button></div>
+ <div><button value="ク"><span>ク</span><span>ku</span></button></div>
+ <div><button value="ス"><span>ス</span><span>su</span></button></div>
+ <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
+ <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
+ <div><button value="フ"><span>フ</span><span>fu</span></button></div>
+ <div><button value="ム"><span>ム</span><span>mu</span></button></div>
+ <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
+ <div><button value="ル"><span>ル</span><span>ru</span></button></div>
+ <div></div>
+ <div><button value="グ"><span>グ</span><span>gu</span></button></div>
+ <div><button value="ズ"><span>ズ</span><span>zu</span></button></div>
+ <div><button value="ヅ"><span>ヅ</span><span>dyu</span></button></div>
+ <div><button value="ブ"><span>ブ</span><span>bu</span></button></div>
+ <div><button value="プ"><span>プ</span><span>pu</span></button></div>
+ <div><button value="ュ"><span>ュ</span><span></span></button></div>
+
+ <div>e</div>
+ <div><button value="エ"><span>エ</span><span>e</span></button></div>
+ <div><button value="ェ"><span>ェ</span><span></span></button></div>
+ <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
+ <div><button value="セ"><span>セ</span><span>se</span></button></div>
+ <div><button value="テ"><span>テ</span><span>te</span></button></div>
+ <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
+ <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
+ <div><button value="メ"><span>メ</span><span>me</span></button></div>
+ <div></div>
+ <div><button value="レ"><span>レ</span><span>re</span></button></div>
+ <div><button value="ヱ"><span>ヱ</span><span>we</span></button></div>
+ <div><button value="ゲ"><span>ゲ</span><span>ge</span></button></div>
+ <div><button value="ゼ"><span>ゼ</span><span>ze</span></button></div>
+ <div><button value="デ"><span>デ</span><span>de</span></button></div>
+ <div><button value="ベ"><span>ベ</span><span>be</span></button></div>
+ <div><button value="ペ"><span>ペ</span><span>pe</span></button></div>
+ <div></div>
+
+ <div>o</div>
+ <div><button value="オ"><span>オ</span><span>o</span></button></div>
+ <div><button value="ォ"><span>ォ</span><span></span></button></div>
+ <div><button value="コ"><span>コ</span><span>ko</span></button></div>
+ <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
+ <div><button value="ト"><span>ト</span><span>to</span></button></div>
+ <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
+ <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
+ <div><button value="モ"><span>モ</span><span>mo</span></button></div>
+ <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
+ <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
+ <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
+ <div><button value="ゴ"><span>ゴ</span><span>go</span></button></div>
+ <div><button value="ゾ"><span>ゾ</span><span>zo</span></button></div>
+ <div><button value="ド"><span>ド</span><span>do</span></button></div>
+ <div><button value="ボ"><span>ボ</span><span>bo</span></button></div>
+ <div><button value="ポ"><span>ポ</span><span>po</span></button></div>
+ <div><button value="ョ"><span>ョ</span><span></span></button></div>
+
+ <div></div>
+ <div></div>
+ <div><button value="ヴ"><span>ヴ</span><span>v</span></button></div>
+ <div></div>
+ <div></div>
+ <div><button value="ッ"><span>ッ</span><span></span></button></div>
+ <div><button value="ン"><span>ン</span><span>n</span></button></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div><button value="・"><span>・</span><span></span></button></div>
+ <div><button value="ー"><span>ー</span><span></span></button></div>
+ <div><button value="ヽ"><span>ヽ</span><span></span></button></div>
+ <div><button value="ヾ"><span>ヾ</span><span></span></button></div>
+ <div><button value="、"><span>、</span><span></span></button></div>
+ <div><button value="。"><span>。</span><span></span></button></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </details>
+ </div>
+ </div>
+ <div class="container">
+ <div>
+ <div class="input-with-label">
+ <label for="sub_headline_text"><h3>subtitle</h3></label>
+ <textarea id="sub_headline_text">ブリッジ・バブルス</textarea>
+ <div>
+ <label for="sub_headline_size">size</label>
+ <input type="number" id="sub_headline_size" value="14"/>
</div>
</div>
- <div class="container-background katakana-wrapper">
- <details open>
- <summary>
- katakana keyboard
- </summary>
- <div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
- <div>n</div>
- <div>w</div>
- <div>r</div>
- <div>y</div>
- <div>m</div>
- <div>h</div>
- <div>n</div>
- <div>t</div>
- <div>s</div>
- <div>k</div>
- <div></div>
- <div></div>
-
- <div><button value="ン"><span>ン</span><span>n</span></button></div>
- <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
- <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
- <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
- <div><button value="マ"><span>マ</span><span>ma</span></button></div>
- <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
- <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
- <div><button value="タ"><span>タ</span><span>ta</span></button></div>
- <div><button value="サ"><span>サ</span><span>sa</span></button></div>
- <div><button value="カ"><span>カ</span><span>ka</span></button></div>
- <div><button value="ア"><span>ア</span><span>a</span></button></div>
- <div>a</div>
-
- <div></div>
- <div></div>
- <div><button value="リ"><span>リ</span><span>ri</span></button></div>
- <div></div>
- <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
- <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
- <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
- <div><button value="チ"><span>チ</span><span>chi</span></button></div>
- <div><button value="シ"><span>シ</span><span>shi</span></button></div>
- <div><button value="キ"><span>キ</span><span>ki</span></button></div>
- <div><button value="イ"><span>イ</span><span>i</span></button></div>
- <div>i</div>
-
- <div></div>
- <div></div>
- <div><button value="ル"><span>ル</span><span>ru</span></button></div>
- <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
- <div><button value="ム"><span>ム</span><span>mu</span></button></div>
- <div><button value="フ"><span>フ</span><span>fu</span></button></div>
- <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
- <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
- <div><button value="ス"><span>ス</span><span>su</span></button></div>
- <div><button value="ク"><span>ク</span><span>ku</span></button></div>
- <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
- <div>u</div>
-
- <div></div>
- <div></div>
- <div><button value="レ"><span>レ</span><span>re</span></button></div>
- <div></div>
- <div><button value="メ"><span>メ</span><span>me</span></button></div>
- <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
- <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
- <div><button value="テ"><span>テ</span><span>te</span></button></div>
- <div><button value="セ"><span>セ</span><span>se</span></button></div>
- <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
- <div><button value="エ"><span>エ</span><span>e</span></button></div>
- <div>e</div>
-
- <div></div>
- <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
- <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
- <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
- <div><button value="モ"><span>モ</span><span>mo</span></button></div>
- <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
- <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
- <div><button value="ト"><span>ト</span><span>to</span></button></div>
- <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
- <div><button value="コ"><span>コ</span><span>ko</span></button></div>
- <div><button value="オ"><span>オ</span><span>o</span></button></div>
- <div>o</div>
- </div>
- </details>
- </div>
+ </div>
+ <div class="container-background katakana-wrapper">
+ <details open>
+ <summary>
+ katakana keyboard
+ </summary>
+ <div class="katakana" id="sub_headline_katakana" for="sub_headline_text">
+ <div></div>
+ <div></div>
+ <div>v</div>
+ <div>k</div>
+ <div>s</div>
+ <div>t</div>
+ <div>n</div>
+ <div>h</div>
+ <div>m</div>
+ <div>y</div>
+ <div>r</div>
+ <div>w</div>
+ <div>g</div>
+ <div>z</div>
+ <div>d</div>
+ <div>b</div>
+ <div>p</div>
+ <div></div>
+
+ <div>a</div>
+ <div><button value="ア"><span>ア</span><span>a</span></button></div>
+ <div><button value="ァ"><span>ァ</span><span></span></button></div>
+ <div><button value="カ"><span>カ</span><span>ka</span></button></div>
+ <div><button value="サ"><span>サ</span><span>sa</span></button></div>
+ <div><button value="タ"><span>タ</span><span>ta</span></button></div>
+ <div><button value="ナ"><span>ナ</span><span>na</span></button></div>
+ <div><button value="ハ"><span>ハ</span><span>ha</span></button></div>
+ <div><button value="マ"><span>マ</span><span>ma</span></button></div>
+ <div><button value="ヤ"><span>ヤ</span><span>ya</span></button></div>
+ <div><button value="ラ"><span>ラ</span><span>ra</span></button></div>
+ <div><button value="ワ"><span>ワ</span><span>wa</span></button></div>
+ <div><button value="ガ"><span>ガ</span><span>ga</span></button></div>
+ <div><button value="ザ"><span>ザ</span><span>za</span></button></div>
+ <div><button value="ダ"><span>ダ</span><span>da</span></button></div>
+ <div><button value="バ"><span>バ</span><span>ba</span></button></div>
+ <div><button value="パ"><span>パ</span><span>pa</span></button></div>
+ <div><button value="ャ"><span>ャ</span><span></span></button></div>
+
+ <div>i</div>
+ <div><button value="イ"><span>イ</span><span>i</span></button></div>
+ <div><button value="ィ"><span>ィ</span><span></span></button></div>
+ <div><button value="キ"><span>キ</span><span>ki</span></button></div>
+ <div><button value="シ"><span>シ</span><span>shi</span></button></div>
+ <div><button value="チ"><span>チ</span><span>chi</span></button></div>
+ <div><button value="ニ"><span>ニ</span><span>ni</span></button></div>
+ <div><button value="ヒ"><span>ヒ</span><span>hi</span></button></div>
+ <div><button value="ミ"><span>ミ</span><span>mi</span></button></div>
+ <div></div>
+ <div><button value="リ"><span>リ</span><span>ri</span></button></div>
+ <div><button value="ヰ"><span>ヰ</span><span>wi</span></button></div>
+ <div><button value="ギ"><span>ギ</span><span>gi</span></button></div>
+ <div><button value="ジ"><span>ジ</span><span>ji</span></button></div>
+ <div><button value="ヂ"><span>ヂ</span><span>dji</span></button></div>
+ <div><button value="ビ"><span>ビ</span><span>bi</span></button></div>
+ <div><button value="ピ"><span>ピ</span><span>pi</span></button></div>
+ <div></div>
+
+ <div>u</div>
+ <div><button value="ウ"><span>ウ</span><span>u</span></button></div>
+ <div><button value="ゥ"><span>ゥ</span><span></span></button></div>
+ <div><button value="ク"><span>ク</span><span>ku</span></button></div>
+ <div><button value="ス"><span>ス</span><span>su</span></button></div>
+ <div><button value="ツ"><span>ツ</span><span>tsu</span></button></div>
+ <div><button value="ヌ"><span>ヌ</span><span>nu</span></button></div>
+ <div><button value="フ"><span>フ</span><span>fu</span></button></div>
+ <div><button value="ム"><span>ム</span><span>mu</span></button></div>
+ <div><button value="ユ"><span>ユ</span><span>yu</span></button></div>
+ <div><button value="ル"><span>ル</span><span>ru</span></button></div>
+ <div></div>
+ <div><button value="グ"><span>グ</span><span>gu</span></button></div>
+ <div><button value="ズ"><span>ズ</span><span>zu</span></button></div>
+ <div><button value="ヅ"><span>ヅ</span><span>dyu</span></button></div>
+ <div><button value="ブ"><span>ブ</span><span>bu</span></button></div>
+ <div><button value="プ"><span>プ</span><span>pu</span></button></div>
+ <div><button value="ュ"><span>ュ</span><span></span></button></div>
+
+ <div>e</div>
+ <div><button value="エ"><span>エ</span><span>e</span></button></div>
+ <div><button value="ェ"><span>ェ</span><span></span></button></div>
+ <div><button value="ケ"><span>ケ</span><span>ke</span></button></div>
+ <div><button value="セ"><span>セ</span><span>se</span></button></div>
+ <div><button value="テ"><span>テ</span><span>te</span></button></div>
+ <div><button value="ネ"><span>ネ</span><span>ne</span></button></div>
+ <div><button value="ヘ"><span>ヘ</span><span>he</span></button></div>
+ <div><button value="メ"><span>メ</span><span>me</span></button></div>
+ <div></div>
+ <div><button value="レ"><span>レ</span><span>re</span></button></div>
+ <div><button value="ヱ"><span>ヱ</span><span>we</span></button></div>
+ <div><button value="ゲ"><span>ゲ</span><span>ge</span></button></div>
+ <div><button value="ゼ"><span>ゼ</span><span>ze</span></button></div>
+ <div><button value="デ"><span>デ</span><span>de</span></button></div>
+ <div><button value="ベ"><span>ベ</span><span>be</span></button></div>
+ <div><button value="ペ"><span>ペ</span><span>pe</span></button></div>
+ <div></div>
+
+ <div>o</div>
+ <div><button value="オ"><span>オ</span><span>o</span></button></div>
+ <div><button value="ォ"><span>ォ</span><span></span></button></div>
+ <div><button value="コ"><span>コ</span><span>ko</span></button></div>
+ <div><button value="ソ"><span>ソ</span><span>so</span></button></div>
+ <div><button value="ト"><span>ト</span><span>to</span></button></div>
+ <div><button value="ノ"><span>ノ</span><span>no</span></button></div>
+ <div><button value="ホ"><span>ホ</span><span>ho</span></button></div>
+ <div><button value="モ"><span>モ</span><span>mo</span></button></div>
+ <div><button value="ヨ"><span>ヨ</span><span>yo</span></button></div>
+ <div><button value="ロ"><span>ロ</span><span>ro</span></button></div>
+ <div><button value="ヲ"><span>ヲ</span><span>wo</span></button></div>
+ <div><button value="ゴ"><span>ゴ</span><span>go</span></button></div>
+ <div><button value="ゾ"><span>ゾ</span><span>zo</span></button></div>
+ <div><button value="ド"><span>ド</span><span>do</span></button></div>
+ <div><button value="ボ"><span>ボ</span><span>bo</span></button></div>
+ <div><button value="ポ"><span>ポ</span><span>po</span></button></div>
+ <div><button value="ョ"><span>ョ</span><span></span></button></div>
+
+ <div></div>
+ <div></div>
+ <div><button value="ヴ"><span>ヴ</span><span>v</span></button></div>
+ <div></div>
+ <div></div>
+ <div><button value="ッ"><span>ッ</span><span></span></button></div>
+ <div><button value="ン"><span>ン</span><span>n</span></button></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+
+ <div></div>
+ <div><button value="・"><span>・</span><span></span></button></div>
+ <div><button value="ー"><span>ー</span><span></span></button></div>
+ <div><button value="ヽ"><span>ヽ</span><span></span></button></div>
+ <div><button value="ヾ"><span>ヾ</span><span></span></button></div>
+ <div><button value="、"><span>、</span><span></span></button></div>
+ <div><button value="。"><span>。</span><span></span></button></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+ </details>
</div>
</div>
</div>