『ウマ娘 シンデレラグレイ』の生放送で私の投稿が採用されるまで─

  はじめに

 　この記事では、アニメ『ウマ娘 シングレ』の好きなシーンを応募する公式企画に投稿した経緯と、採用されるためにした工夫を紹介する。工夫の部分は、今後同様の企画に応募する際の参考になれば幸いである。

 アーカイブ

　2025年7月3日20時から放送された 「そこそこぱかライブTV Vol.46 アニメ『ウマ娘 シンデレラグレイ』振り返り生放送スペシャル！」で、以下の私の投稿が採用された（アーカイブの40分20秒あたり）。取り消し線の部分は放送ではカットされた箇所である。

▼ 私の投稿

 

第4話「フジマサマーチの静かな朝練」（0分0秒〜0分43秒）
フジマサマーチが黙々と朝練に励む冒頭のシーンが、印象に残っています。街中を走り込み、駆け上がったあと、息を整え、凛とした姿勢で佇む──そのシーンに、彼女のひたむきさが滲んでいました。
その直後に映るトレーニング表から、毎朝4時から朝練を続けていると分かり、マーチの見えない努力に気付きました。
そして、首にタオルをかけて部屋へ戻ってきたマーチが、「ふぅ」と息をつく姿を見たとき──その静かなひと息が、マーチ自身をそっと包み込んでいるように感じられて、マーチの見えない努力が、少しだけ報われたような、そんな気がしたのです。

 ウマ娘にハマったきっかけ

　『ウマ娘 シンデレラグレイ』は、まっくんさんが毎週楽しみにしていたアニメだったため、私も気になって視聴したところ、すっかり引き込まれてしまったのがきっかけである。
 

 投稿した動機

　マーチの「見えない努力」を伝えたくなったからである。

　2025年6月23日、作者のX（旧Twitter）投稿（ 投稿1 投稿2 投稿3）で「フジマサマーチは座学が苦手」という旨の書き込みを見かけ、ショックを受けた。『ウマ娘 シンデレラグレイ』第4話には、毎朝4時からの朝練に加え、毎日1.5時間の予習復習が記されたトレーニング表が映るアニメオリジナルのシーンが存在していたからである。

▼第4話『ジュニアクラウン』の27秒あたりのシーンより

　スケジュール表には、走るだけでなく、座学にも真剣に取り組んでいるマーチの様子が表れていた。だからこそ、その努力が作者本人の目にも留まっていないようで、釈然としないものがあった。
　そんな折、「『ウマ娘 シングレ』の好きなシーン」を募集する公式企画が発表された。しかも生放送にはフジマサマーチの声優さんも出走される。「これは、マーチの見えない努力を届ける千載一遇のチャンスだ」と確信した。
　人気番組だから、視聴者からの投稿はかなり多いはずである。せっかく書くなら、採用されないともったいない。そこで次の工夫をした。

 採用されるための工夫

　投稿文は6時間以上かけて推敲した。さらに、投稿フォームには特に指示はなかったが、タイムスタンプを自発的に添えた。該当シーンを探す選考スタッフの負担を減らし、少しでも目に留まりやすくするためである。
　投稿文では、あえて座学には触れなかった。理由は二つある。
    1.    作者による「マーチは座学が苦手」という掘り下げが、少しネガティブなニュアンスを含んでいたため、番組内では座学の話題には触れにくいと考えたから。
    2.    仮にこの投稿が採用されて視聴者が第4話を見直した場合、トレーニング表の中にある予習復習の存在にも自然と気づいてくれそうだから。
 

 そして、採用された

　読み上げてくれたのは、ベルノライト役の声優さんだった。読まれた瞬間、思わず両手を頬に当ててしまったのを覚えている。
　後半の文章はカットされていたが、第4話の紹介画面には「首にタオルをかけて部屋へ戻ってきたマーチ」のカットが映し出されていた。

▼「ぱかライブTV Vol.46」アーカイブの40分22秒あたりのシーンより

 

──あの「ふぅ」の瞬間も、ちゃんと伝わっていたのだ。

採用までの流れを振り返ると、フジマサマーチのこのセリフを思い出した。

▼ 『ウマ娘 シンデレラグレイ』2巻 26ページより

Ankiでfont-sizeと画像サイズを連動させる方法

 前置き

　iOS版のAnkiには、画面右下のツールアイコン（歯車アイコン）から文字サイズ（font-size）の倍率を調整する機能がある。しかし、Ankiの仕様上、この倍率を変更しても画像のサイズは変化しない。そのため、デッキのデザインによっては、文字だけが拡大されて、画像のサイズが相対的に小さく見えてしまい、デッキのデザインが崩れてしまう場合がある。

　そこで今回は、「ツールアイコンからfont-sizeの倍率を変更すると、画像もfont-sizeに合わせて自動的に拡大・縮小する方法」を紹介する。

　▼ 次のGIF画像を見ると一目瞭然である。ヘッダーにあるロゴや虫眼鏡アイコンなどは全て画像を使ってあるが、font-sizeに合わせて画像も伸縮している。

 利点

　今回紹介する方法には、主に次のような利点がある。

• AnkiのHTMLやCSSだけでは再現が難しいデザインを、画像で補えるようになる。
  
• ツールアイコンからフォントサイズを変更しても、画像を使ったAnkiデッキのデザインが崩れにくくなる。特にフォントサイズを大きくしたくなる場面の多いiPad版Ankiで効果的。
  
• 再生ボタン（svg形式の画像で出来ている）の大きさもフォントサイズに連動して自動調整できるようになる。
  
• 拡大しても画質が劣化しないsvg形式の画像を使えば、HTMLやCSSで作ったデザインとほとんど区別がつかない。つまり、svg形式の画像を使うと、デッキのデザインと馴染みやすくなる。

 具体的な手順（2つ）

❶画像の大きさを自動調整する方法

　大きさを自動調整したい画像のHTMLタグを、<img src="◯◯.jpg">から、

<img src="◯◯.jpg" style="height: 2em; font-size: 16px;">

のように変更すればよい(コードが正常に表示されない場合に備えて画像でもコードを掲載している)。16pxの部分は、「font-sizeの倍率が1.0xの時の画像サイズ」を決めるだけだから、デッキのデザインに合わせて自由に変更して構わない。

　font-size:16px;の部分を削除して、<img src="◯◯.jpg" style="height: 2em;">と書いてもよい。この場合は、cardクラスに指定されてあるfont-sizeの値が画像に適用される。

❷再生ボタンの大きさも自動調整する方法

　Ankiの再生ボタンはsvg形式の画像でできているため、「❶画像の大きさを自動調整する方法」と同じ要領で、再生ボタンの大きさを自動調整できる。その場合は、次のコードをAnkiの書式（スタイル）欄に貼り付けるだけでよい。

.replay-button svg {

  height: 2.7em;

}

 動作確認用デッキ

　次の共有デッキは、画像をデザインの一部として組み込んだ動作確認用のデッキである。ヘッダー内のロゴはjpg形式の画像。虫眼鏡や電話アイコンなどはsvg形式の画像である。

https://ankiweb.net/shared/info/1214556234?cb=1745562528284

おしまい

---

Ankiでヘッダーのみをフルスクリーンにする方法

 （更新日：2025年8月11日）

 はじめに

　Ankiデッキの周囲には、余白があるのが通常である。デッキのデザインによっては、この余白が邪魔になる場合もある。そこで今回は、余白をなくす方法（デッキのフルスクリーン化）を紹介する。次の GIF 画像を見ると、その意味が分かりやすい。

 この方法には次の利点がある。

⑴ 余分な余白を無くせるため、スマートフォンなどの小さな画面でも表示面積を広げられる。

⑵ レイアウトの自由度が向上。

⑶ クイズアプリやWeb問題集（ヘッダーがフルスクリーンになっている場合が多い）などのレイアウトもAnki上で再現しやすくなる。

なお、AnkiDroid版のAnkiではフルスクリーン化が反映されないため、PC版とiOS版Ankiが本記事の対象である。

 具体的な手順

　ヘッダーをつけたAnkiデッキを用意した上で、次の  STEP 1 ～ STEP 2 の通りに進めればよい。なお、最後の方でフルスクリーン化済みのサンプルデッキを配布しているので、そちらを利用してもよい。

STEP 1

まずはデッキ全体をフルスクリーン化

　PC版Ankiの書式（スタイル）欄に、次のCSSをコピー&ペーストすれば実現できる。cardのクラス名の中に直接「margin: 0; padding: 0;」を追加しても良い。

.card {
  margin: 0;
  padding: 0;
}

STEP 2

デッキの一部をフルスクリーン化前に戻す

　STEP 1 の方法では、問題文や答えまでもがフルスクリーン化されてしまい、画面が若干窮屈で読みづらくなる。デザインの都合上、ヘッダーのみをフルスクリーン化し、それ以外の部分は元の状態に戻したい場合がある。そのような場合は、STEP 1 のコードに加えて、次のコードをデッキの表面・裏面に追加すればよい。具体的には、問題文や答えなどのヘッダー以外のコードを、次のコードの中に挟み込むとよい。そうすると、挟み込んだ部分は元の余白がある状態になる。

※特殊文字でエスケープ処理をしてもコードが正常に表示されない場合があるので、画像で表示した。

▼ コピペ用。「●」を「<」に置き換えて使用。

●div style="max-width: 95.0%; margin: auto;">

ヘッダー以外のコード（問題と答え部分のコードなど）

●/div>

▼問題文と答えをフルスクリーン化前に戻した例（ヘッダーのみがフルスクリーンの状態）

 画像のフルスクリーンがうまくいかない場合（2025年8月11日加筆）

　同様にすれば、ヘッダー以外に画像などもフルスクリーンにできる。この方法で画像がうまくフルスクリーンにならない場合は、スタイル欄に以下のCSSを追加すると良い。

　img {
 max-width: 100%; max-height: 100%; }

▼ ヘッダーと画像をフルスクリーンにしたデッキの例（ウマ娘の英語吹き替え版来ないかな）

 ​​​​​​サンプルデッキ配布

　実際にフルスクリーン化したデッキを共有デッキとして配布している。動作確認用なので必要最低限の機能しかないが、実際の動作やコードなどを確認したい場合はこちらを使おう。Ankiwebの共有デッキは、アップロード後24時間が経過しないとリンクが有効にならない上、ダウンロード数が少ないと自動削除されるため、サンプルデッキのリンクが切れている場合がある。言ってもらえれば再度更新する。

▼サンプルデッキ(https://ankiweb.net/shared/info/1484396854) 

 

おしまい！

Ankiで物書堂の再生ボタンを再現する方法(Anki Replay Button)

 前置き

　Anki Manualを見ていたら、再生ボタンの色や大きさは変更できると書いてあるのを見つけた(英語版Ankiマニュアルの7.3. Styling & HTML

Styling & HTML - Anki Manual

)。せっかくならと、物書堂の再生ボタンの再現にチャレンジしてみたので、以下にそのコードを共有したい。ダークモード時の色の変化も物書堂と同じになるように調整してある。AnkiDroid版では正常に作動しないので、以下は全てPC版、iOS版Ankiでの話である。

▼ 実際の使用例

 物書堂再生ボタンのコード (Ankiの書式欄に張り付ける)

/*再生ボタンを『物書堂』風に＆ダークモードに対応*/

.replay-button svg circle {

  fill: #158ADA; /*▶の枠の中身の色*/

  stroke: #158ADA; /* ▶の丸い枠の色 */

}

.replay-button svg {

  width: 2.175em;

  height: 0.88em;

  border: solid 0.17em white;

  background-color: #158ADA;

  border-radius: 0.33em;

  box-shadow: 0 0 0 0.143em #158ADA;

  vertical-align: middle; 

}

.replay-button svg path {

  stroke: white; /*▶の輪郭の色*/

  fill: white;　/*▶の輪郭の中身の色*/

}

 .nightMode .replay-button svg {

   border: solid 0.17em black;   

}

 .nightMode .replay-button svg path {

  stroke: white; 

  fill: white; /*ここをblackに変えると、▶の色もダークモードになる*/

}

  ▲ iOS版Ankiの右下の歯車マーク（ツールアイコン）からフォントサイズを変更したときに、文字のサイズに連動して再生ボタンのサイズも自動で伸縮するようになっている。再生ボタンの大きさを固定したい場合は、上記のコードの「width: 2.175em;　height: 0.88em;」という部分を「width: ◯◯px; height: ◯◯px;」のように変更すればよい。

おしまい

Ankiで画像をダークモードにする方法

 画像のダークモードを実現させるには

 結論から言えば、CSSのfilter機能を用いればよい。これを使えば、画像の色を白黒反転させて、画像のダークモードを擬似的に再現できる。特に、テキストが主体の画像の場合に有効である。

 たとえば、Ankiでダークモードを使用すると画像の背景は白色のままだが...

CSSのfilterを用いれば、以下のように画像のダークモードが実現可能となる。

 コード配布

CSS(このコードをコピーしてAnkiの「書式（スタイル）」欄に張り付けると、画像のダークモードが実現できる)

---

.nightMode img {
    filter: invert(100%);
}

　ここまでが画像のダークモード化に関する記事である。以下、さらにこのダークモードを快適にする小ネタを2つ紹介する。

 小ネタ1　一部の画像にだけダークモードを適用しないようにする方法 (2024/04/27加筆)

 イラストや風景写真など、ダークモードを適用したくない画像が一部存在する場合は、その画像のコードを

<img src="〇〇.jpg">

から

<img src="〇〇.jpg" style="filter: none;">

のように変更すればよい。このようにすれば、テキスト主体の画像はダークモードにしつつも、イラストや風景画像は通常の外観を維持できる。

 小ネタ2　テキストの文字色が薄い場合の対処法 (2024/05/19加筆)

　スキャンした画像（自炊した書籍など）をダークモードにすると、そこに書かれている赤色や青色の文字が見えにくくなる場合がある。この場合も、saturateというCSSの機能を使って画像の彩度を上げてやれば解決する。

　具体的には、「コード配布」にあるコードに、saturate(7)を付け加えて以下のようにする。(7)という数字の部分は好みに合わせて変更してよいが、5～10あたりが視認性がよい。

.nightMode img {

filter: invert(100%) saturate(7);

}

▼コードを付け加えて文字が見やすくなった画像の例

おしまい！

円形(ドーナツ型)の進捗度メーターをAnkiで再現する方法

このサイト を参考に作成した。巻末でAnkiでも使いやすいように改変してあるコードを配布しているので、ぜひ使ってほしい。

巻末のコードをそのままAnkiにコピペすると以下のようなドーナツ型のメーターが出来上がる。

配布した<div class="c100 p30 small">というコードの「30」という部分を、0～100の範囲で変更すれば連動してメーターも増減する。ただし、30.5のような小数には対応していない。対応しているのは0～100までの整数のみである。

手動で数字を変更するのは大変なので、エクセルやスプレッドシートで新たにデッキを作る際は、次の①、②のようにする。

①Ankiで進捗度という名前のフィールドを作り、以下のコードを表面、裏面にコピペ

<div class="c100 p{{進捗度}} small">
    <span>{{進捗度}}%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

②進捗度の枠を追加し、=floor( (現在の問題番号 / 問題総数) * 100 )などを使って0～100の範囲で進捗度を算出する

これで進捗度メーターが稼働する準備が整った。

  既存のデッキ(配布デッキ)にメーターを追加する

すでに完成済みのデッキに、メーターを後付けで追加してもよい。以下の①～⑤を実行すればよい（エクセル/スプレッドシートのデータをすでに持っている場合は④〜⑥を実行）。

①Ankiデッキに、「進捗度」フィールドを設ける。

② ①のAnkiデッキをテキストファイル形式のノート(*.txt)で書き出す（HTMLとメディアの参照を含めるにチェックをいれる）。

③ ②のファイルをメモ帳で開いてコピーしてスプレッドシートに張り付ける。

④ スプレッドシートに進捗度の欄を設けて、=floor( (現在の問題番号 / 問題総数) * 100 )を実行して進捗度を算出。

⑤スプレッドシートを.csv形式で保存。

⑥ ⑤のcsvファイルをAnkiで読み込む。「ノートタイプ」と「デッキ」を、メーターを追加したいデッキに合わせる。さらに「最初のフィールドが一致した場合、既存のノートを更新する」になっていることも確認してAnkiに読み込む。

メーターを元のデッキのデザインに合わせて追加してみた。もちろん問題を解き進めると、メーターの部分も自動で変動する。

  配布コード

以下配布コード。コピペしてAnkiに張り付けるだけである。

HTML(このコードをコピペしてAnkiの表面、裏面の好きな場所に張り付ける。30の部分は、{{進捗度}}というフィールドに書き換えるとよい)

---

<div class="c100 p30 small">
    <span>30%</span>
    <div class="slice">
        <div class="bar"></div>
        <div class="fill"></div>
    </div>
</div>

CSS(長いが全てコピペしてAnkiの書式欄に張り付ける)

---

.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
  clip: rect(auto, auto, auto, auto);
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
  position: absolute;
  border: 0.08em solid #307bbb; /*青色の線の色と太さ*/
  width: 0.84em;
  height: 0.84em;
  clip: rect(0em, 0.5em, 1em, 0em);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}


.c100.dark {
  background-color: #777777;
}
.c100.dark .bar,
.c100.dark .fill {
  border-color: #c6ff00 !important;
}
.c100.dark > span {
  color: #777777;
}
.c100.dark:after {
  background-color: #666666;
}
.c100.dark:hover > span {
  color: #c6ff00;
}
.c100.green .bar, .c100.green .fill {
  border-color: #4db53c !important;
}
.c100.green:hover > span {
  color: #4db53c;
}
.c100.green.dark .bar, .c100.green.dark .fill {
  border-color: #5fd400 !important;
}
.c100.green.dark:hover > span {
  color: #5fd400;
}
.c100.orange .bar, .c100.orange .fill {
  border-color: #dd9d22 !important;
}
.c100.orange:hover > span {
  color: #dd9d22;
}
.c100.orange.dark .bar, .c100.orange.dark .fill {
  border-color: #e08833 !important;
}
.c100.orange.dark:hover > span {
  color: #e08833;
}


.c100 {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  float: left;
  margin: 0 0.1em 0.1em 0;
  background-color: #cccccc;
  float: right;      /*ドーナツ型進捗メーターの表示位置*/
}
.c100 *, .c100 *:before, .c100 *:after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.c100.center {
  float: none;
  margin: 0 auto;
}
.c100.big {
  font-size: 240px;
}
.c100.small {
  font-size: 70px;     /*ドーナツ型進捗メーターの大きさ*/
}
.c100 > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: black; /*%の文字の色*/
  display: block;
  text-align: center; /*%のテキストの位置*/
  font-family: "メイリオ";
  font-weight:bold;
  white-space: nowrap;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  -o-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
 .nightMode .c100 > span {
   color: #cccccc; /*ダークモード時の文字の色*/
}


.c100:after {
  position: absolute;
  top: 0.08em;
  left: 0.08em;
  display: block;
  content: " ";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  background-color: white;    /*中心の円盤の色(非ダークモード時)*/
  width: 0.84em;
  height: 0.84em;
  -webkit-transition-property: all;
  -moz-transition-property: all;
  -o-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
.nightMode .c100:after {
  background-color: black;  　/*中心の円盤の色(ダークモード時)*/
}
.c100 .slice {
  position: absolute;
  width: 1em;
  height: 1em;
  clip: rect(0em, 1em, 1em, 0.5em);
}
.c100.p1 .bar {
  -webkit-transform: rotate(3.6deg);
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -o-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
}
.c100.p2 .bar {
  -webkit-transform: rotate(7.2deg);
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -o-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
}
.c100.p3 .bar {
  -webkit-transform: rotate(10.8deg);
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -o-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
}
.c100.p4 .bar {
  -webkit-transform: rotate(14.4deg);
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -o-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
}
.c100.p5 .bar {
  -webkit-transform: rotate(18deg);
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -o-transform: rotate(18deg);
  transform: rotate(18deg);
}
.c100.p6 .bar {
  -webkit-transform: rotate(21.6deg);
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -o-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
}
.c100.p7 .bar {
  -webkit-transform: rotate(25.2deg);
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -o-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
}
.c100.p8 .bar {
  -webkit-transform: rotate(28.8deg);
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -o-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
}
.c100.p9 .bar {
  -webkit-transform: rotate(32.4deg);
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -o-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
}
.c100.p10 .bar {
  -webkit-transform: rotate(36deg);
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -o-transform: rotate(36deg);
  transform: rotate(36deg);
}
.c100.p11 .bar {
  -webkit-transform: rotate(39.6deg);
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -o-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
}
.c100.p12 .bar {
  -webkit-transform: rotate(43.2deg);
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -o-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
}
.c100.p13 .bar {
  -webkit-transform: rotate(46.8deg);
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -o-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
}
.c100.p14 .bar {
  -webkit-transform: rotate(50.4deg);
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -o-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
}
.c100.p15 .bar {
  -webkit-transform: rotate(54deg);
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -o-transform: rotate(54deg);
  transform: rotate(54deg);
}
.c100.p16 .bar {
  -webkit-transform: rotate(57.6deg);
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -o-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
}
.c100.p17 .bar {
  -webkit-transform: rotate(61.2deg);
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -o-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
}
.c100.p18 .bar {
  -webkit-transform: rotate(64.8deg);
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -o-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
}
.c100.p19 .bar {
  -webkit-transform: rotate(68.4deg);
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -o-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
}
.c100.p20 .bar {
  -webkit-transform: rotate(72deg);
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -o-transform: rotate(72deg);
  transform: rotate(72deg);
}
.c100.p21 .bar {
  -webkit-transform: rotate(75.6deg);
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -o-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
}
.c100.p22 .bar {
  -webkit-transform: rotate(79.2deg);
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -o-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
}
.c100.p23 .bar {
  -webkit-transform: rotate(82.8deg);
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -o-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
}
.c100.p24 .bar {
  -webkit-transform: rotate(86.4deg);
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -o-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
}
.c100.p25 .bar {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.c100.p26 .bar {
  -webkit-transform: rotate(93.6deg);
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -o-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
}
.c100.p27 .bar {
  -webkit-transform: rotate(97.2deg);
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -o-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
}
.c100.p28 .bar {
  -webkit-transform: rotate(100.8deg);
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -o-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
}
.c100.p29 .bar {
  -webkit-transform: rotate(104.4deg);
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -o-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
}
.c100.p30 .bar {
  -webkit-transform: rotate(108deg);
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -o-transform: rotate(108deg);
  transform: rotate(108deg);
}
.c100.p31 .bar {
  -webkit-transform: rotate(111.6deg);
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -o-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
}
.c100.p32 .bar {
  -webkit-transform: rotate(115.2deg);
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -o-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
}
.c100.p33 .bar {
  -webkit-transform: rotate(118.8deg);
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -o-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
}
.c100.p34 .bar {
  -webkit-transform: rotate(122.4deg);
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -o-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
}
.c100.p35 .bar {
  -webkit-transform: rotate(126deg);
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -o-transform: rotate(126deg);
  transform: rotate(126deg);
}
.c100.p36 .bar {
  -webkit-transform: rotate(129.6deg);
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -o-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
}
.c100.p37 .bar {
  -webkit-transform: rotate(133.2deg);
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -o-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
}
.c100.p38 .bar {
  -webkit-transform: rotate(136.8deg);
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -o-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
}
.c100.p39 .bar {
  -webkit-transform: rotate(140.4deg);
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -o-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
}
.c100.p40 .bar {
  -webkit-transform: rotate(144deg);
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -o-transform: rotate(144deg);
  transform: rotate(144deg);
}
.c100.p41 .bar {
  -webkit-transform: rotate(147.6deg);
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -o-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
}
.c100.p42 .bar {
  -webkit-transform: rotate(151.2deg);
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -o-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
}
.c100.p43 .bar {
  -webkit-transform: rotate(154.8deg);
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -o-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
}
.c100.p44 .bar {
  -webkit-transform: rotate(158.4deg);
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -o-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
}
.c100.p45 .bar {
  -webkit-transform: rotate(162deg);
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -o-transform: rotate(162deg);
  transform: rotate(162deg);
}
.c100.p46 .bar {
  -webkit-transform: rotate(165.6deg);
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -o-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
}
.c100.p47 .bar {
  -webkit-transform: rotate(169.2deg);
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -o-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
}
.c100.p48 .bar {
  -webkit-transform: rotate(172.8deg);
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -o-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
}
.c100.p49 .bar {
  -webkit-transform: rotate(176.4deg);
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -o-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
}
.c100.p50 .bar {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.c100.p51 .bar {
  -webkit-transform: rotate(183.6deg);
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -o-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
}
.c100.p52 .bar {
  -webkit-transform: rotate(187.2deg);
  -moz-transform: rotate(187.2deg);
  -ms-transform: rotate(187.2deg);
  -o-transform: rotate(187.2deg);
  transform: rotate(187.2deg);
}
.c100.p53 .bar {
  -webkit-transform: rotate(190.8deg);
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -o-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
}
.c100.p54 .bar {
  -webkit-transform: rotate(194.4deg);
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -o-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
}
.c100.p55 .bar {
  -webkit-transform: rotate(198deg);
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -o-transform: rotate(198deg);
  transform: rotate(198deg);
}
.c100.p56 .bar {
  -webkit-transform: rotate(201.6deg);
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -o-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
}
.c100.p57 .bar {
  -webkit-transform: rotate(205.2deg);
  -moz-transform: rotate(205.2deg);
  -ms-transform: rotate(205.2deg);
  -o-transform: rotate(205.2deg);
  transform: rotate(205.2deg);
}
.c100.p58 .bar {
  -webkit-transform: rotate(208.8deg);
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -o-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
}
.c100.p59 .bar {
  -webkit-transform: rotate(212.4deg);
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -o-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
}
.c100.p60 .bar {
  -webkit-transform: rotate(216deg);
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -o-transform: rotate(216deg);
  transform: rotate(216deg);
}
.c100.p61 .bar {
  -webkit-transform: rotate(219.6deg);
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -o-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
}
.c100.p62 .bar {
  -webkit-transform: rotate(223.2deg);
  -moz-transform: rotate(223.2deg);
  -ms-transform: rotate(223.2deg);
  -o-transform: rotate(223.2deg);
  transform: rotate(223.2deg);
}
.c100.p63 .bar {
  -webkit-transform: rotate(226.8deg);
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -o-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
}
.c100.p64 .bar {
  -webkit-transform: rotate(230.4deg);
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -o-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
}
.c100.p65 .bar {
  -webkit-transform: rotate(234deg);
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -o-transform: rotate(234deg);
  transform: rotate(234deg);
}
.c100.p66 .bar {
  -webkit-transform: rotate(237.6deg);
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -o-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
}
.c100.p67 .bar {
  -webkit-transform: rotate(241.2deg);
  -moz-transform: rotate(241.2deg);
  -ms-transform: rotate(241.2deg);
  -o-transform: rotate(241.2deg);
  transform: rotate(241.2deg);
}
.c100.p68 .bar {
  -webkit-transform: rotate(244.8deg);
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -o-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
}
.c100.p69 .bar {
  -webkit-transform: rotate(248.4deg);
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -o-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
}
.c100.p70 .bar {
  -webkit-transform: rotate(252deg);
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -o-transform: rotate(252deg);
  transform: rotate(252deg);
}
.c100.p71 .bar {
  -webkit-transform: rotate(255.6deg);
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -o-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
}
.c100.p72 .bar {
  -webkit-transform: rotate(259.2deg);
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -o-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
}
.c100.p73 .bar {
  -webkit-transform: rotate(262.8deg);
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -o-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
}
.c100.p74 .bar {
  -webkit-transform: rotate(266.4deg);
  -moz-transform: rotate(266.4deg);
  -ms-transform: rotate(266.4deg);
  -o-transform: rotate(266.4deg);
  transform: rotate(266.4deg);
}
.c100.p75 .bar {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
.c100.p76 .bar {
  -webkit-transform: rotate(273.6deg);
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -o-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
}
.c100.p77 .bar {
  -webkit-transform: rotate(277.2deg);
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -o-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
}
.c100.p78 .bar {
  -webkit-transform: rotate(280.8deg);
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -o-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
}
.c100.p79 .bar {
  -webkit-transform: rotate(284.4deg);
  -moz-transform: rotate(284.4deg);
  -ms-transform: rotate(284.4deg);
  -o-transform: rotate(284.4deg);
  transform: rotate(284.4deg);
}
.c100.p80 .bar {
  -webkit-transform: rotate(288deg);
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -o-transform: rotate(288deg);
  transform: rotate(288deg);
}
.c100.p81 .bar {
  -webkit-transform: rotate(291.6deg);
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -o-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
}
.c100.p82 .bar {
  -webkit-transform: rotate(295.2deg);
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -o-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
}
.c100.p83 .bar {
  -webkit-transform: rotate(298.8deg);
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -o-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
}
.c100.p84 .bar {
  -webkit-transform: rotate(302.4deg);
  -moz-transform: rotate(302.4deg);
  -ms-transform: rotate(302.4deg);
  -o-transform: rotate(302.4deg);
  transform: rotate(302.4deg);
}
.c100.p85 .bar {
  -webkit-transform: rotate(306deg);
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -o-transform: rotate(306deg);
  transform: rotate(306deg);
}
.c100.p86 .bar {
  -webkit-transform: rotate(309.6deg);
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -o-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
}
.c100.p87 .bar {
  -webkit-transform: rotate(313.2deg);
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -o-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
}
.c100.p88 .bar {
  -webkit-transform: rotate(316.8deg);
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -o-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
}
.c100.p89 .bar {
  -webkit-transform: rotate(320.4deg);
  -moz-transform: rotate(320.4deg);
  -ms-transform: rotate(320.4deg);
  -o-transform: rotate(320.4deg);
  transform: rotate(320.4deg);
}
.c100.p90 .bar {
  -webkit-transform: rotate(324deg);
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -o-transform: rotate(324deg);
  transform: rotate(324deg);
}
.c100.p91 .bar {
  -webkit-transform: rotate(327.6deg);
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -o-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
}
.c100.p92 .bar {
  -webkit-transform: rotate(331.2deg);
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -o-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
}
.c100.p93 .bar {
  -webkit-transform: rotate(334.8deg);
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -o-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
}
.c100.p94 .bar {
  -webkit-transform: rotate(338.4deg);
  -moz-transform: rotate(338.4deg);
  -ms-transform: rotate(338.4deg);
  -o-transform: rotate(338.4deg);
  transform: rotate(338.4deg);
}
.c100.p95 .bar {
  -webkit-transform: rotate(342deg);
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -o-transform: rotate(342deg);
  transform: rotate(342deg);
}
.c100.p96 .bar {
  -webkit-transform: rotate(345.6deg);
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -o-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
}
.c100.p97 .bar {
  -webkit-transform: rotate(349.2deg);
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -o-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
}
.c100.p98 .bar {
  -webkit-transform: rotate(352.8deg);
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -o-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
}
.c100.p99 .bar {
  -webkit-transform: rotate(356.4deg);
  -moz-transform: rotate(356.4deg);
  -ms-transform: rotate(356.4deg);
  -o-transform: rotate(356.4deg);
  transform: rotate(356.4deg);
}
.c100.p100 .bar {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

おしまい！

Ankiで♦型の特殊な文字修飾を再現する方法(コード配布)

♦型とは、

の

のようなおしゃれな文字修飾を意味している。試行錯誤したら再現できたので、以下Ankiでも使えるコードを配布する。コピペして張り付けるだけである。

HTML(このコードをコピペしてAnkiの表面、裏面の好きな場所に張り付ける)

---

<div class="border">
  <span>の</span>
</div>

CSS(このコードをコピペしてAnkiの書式欄に張り付ける)

---

.border {
    color: white;
    border: solid 1.2px white;    /* 内側の線になる一本線の枠線をひく*/
    background-color: black; 
    outline: solid 2px #000;    /* 外側の線になる一本線の枠線をひく*/
    outline-offset: 0px;        /* 外側の線と内側の線の空き具合を調整*/
    margin: 2px;                /* 外側の線を広げた分、要素の大きさを調整する*/
    display: inline-block;      /* 中身の幅に合わせる */
    transform: rotate(45deg);   /* 45度回転 */
    padding: 0.09em 0.37em;     /* テキストを微調整するためのパディング */
    width: fit-content;         /* 中身に合わせた幅に設定 */
    height: fit-content;        /* 中身に合わせた高さに設定 */
    font-size: 10px;            /* テキストのフォントサイズ */
}

.border > span {
  transform: rotate(-45deg) scale(1.4);  /* -45度回転＆文字のみを1.4倍に拡大 */
    display: inline-block;      /* インラインブロックに設定 */
    margin-right: 0px;          /* テキストの位置を調整 */

}

配布したコードでは、薬屋のひとりごとの特殊文字を再現してある。iPad版のAnkiMobileでも確認したが、問題なく表示された。文字を拡大してもレイアウトが崩れないようになっている。

次回は円形(ドーナツ型)の進捗度メーターをAnkiで再現する方法をご紹介する。

おしまい

米国Huluのアニメ配信予定表

以下のURLから、Hulu(米国)で配信予定の映画やアニメの情報が確認できる。吹替版アニメには、(Dubbed)という表記が付いている。今月は呪術廻戦一期や、東京リベンジャーズ一期などのDubが配信予定。

March 2024 - Hulu

おしまい

iPhoneから.mp3の音楽をバックグラウンドで連続再生できるアプリ(オフライン再生)

アップルストアから、純正アプリ「ファイル（連続再生不可）」または、「iZip（連続再生可能）」をダウンロードすればよい。いずれも無料アプリである。【完】

そうするとお手持ちのiPhoneやiPadからバックグラウンドで音楽がオフラインでも再生できる。mp4の動画の場合も同様である。

詳しいやり方(以下iPhoneでもiPadでも同様)

---

STEP 1

PCで聞きたい音楽の.mp3データを用意する。

STEP 2

PCのソフトウェア「iTunes」からmp3データを、iPhoneの「ファイル」または「iZip」アプリに移動させる。

STEP 3

iPhone/iPadからiZipを開いて好きな音楽を再生する。
※.mp4の動画も同様の手順で移動させると、動画再生ソフトとしても使える。

【おまけ】iZipの広告とポップアップを非表示にする裏技（加筆日：2025年5月23日）

①（機内モードで）iZipを開く

②ポップアップ内の「アップグレード方法を表示」をタップ

③再び出てくるポップアップを指でタップし続けながら、下にスライドさせてポップアップを消す

この後タスクキルをしない限り、広告やしつこいポップアップは常に非表示になる。機内モードを解除すると広告は表示されてしまうが、ポップアップは非表示のままである。

なお、広告が表示されてもいい場合は、①の時点で機内モードにする必要はない。その場合、ポップアップのみを無効にできる。

補足

---

ファイル管理ソフトだから、iPhone/iPadに入れた種々雑多な音楽を階層化してキレイに整理できるのが最大のメリットである。もちろんオフライン状態でのバックグラウンド再生も可能である。

純正の「ファイル」アプリは音楽を連続再生はできないが、「iZip」は連続再生可能なのでそちらをお勧めする。

App Storeにある「mp3再生」や「音楽再生」を謳うアプリは総じて使い物にならないので、この記事ではあえてファイル管理ソフトからバックグラウンドで再生する方法を紹介した。

おしまい‼️

アップルケアが反映されない問題について(AppleCare)

結論からいえば、AppleCareは購入から3〜4日後に反映される。

iPhoneなどのApple製品を購入後に端末の設定を確認すると、保証期間が購入日から1年後までの表記になっていることがある。購入しているはずのアップルケアが反映されていないように見えるが、単にAppleCareが反映されるまでタイムラグがあるだけなので安心してほしい。

さらに、購入日から3〜4日後にアップルから「AppleCare＋ 登録書」という件名のメールが届く。このメールが届けば、AppleCareに無事登録されたと考えて良い。

​おしまい