miitobow.comの動き、
なんて呼べばいいんだっけ。

ヒーローセクションだけ画面幅いっぱいに広げて、右端にキャラクターを配置して。
本文は今までどおり中央寄せの最大幅コンテナのままでいい。
超ワイド画面で見たとき、本文とキャラの間の余白が際限なく開かないように、
キャラの位置を本文コンテナの伸び方に合わせて調整して。

同じ位置にキャラクターの画像を2枚重ねて配置して。
普段は1枚目を表示、カーソルを合わせたら2枚目にふわっとクロスフェードで切り替わるようにして。
2枚とも足元（下端）を基準に揃えて、ホバーしたときにキャラの大きさが変わって見えないようにして。

吹き出しを作って。角丸の四角ではなく、楕円形（border-radius: 50% / 62%くらいの比率）にして。
右下に疑似要素（::after）で小さい円を1つ作り、-25度くらい回転させて尻尾に見せて。
画像は使わずCSSだけで作って。

JavaScriptを使わずにCSSだけでモーダル（ポップアップ）を作って。
非表示のcheckboxと、それに対応するlabelの組み合わせで開閉を管理して。
閉じるボタンにhref="#"は使わないで（ページの一番上にジャンプしてしまうため）。
labelのfor属性を使って同じcheckboxを開く用・閉じる用の両方から操作して。

この枠（フッターの罫線など）にカーソルを合わせたときだけ、
キャラクターが線の上からひょっこり顔を出すようにして。
普段はopacity:0で透明にして少し下にずらしておき、
ホバーしたら上にスライドしながらフェードインさせて。

カードにカーソルを合わせたときだけ、右下にそのカードの内容に合ったイラストが
ふわっと出てくるようにして。
文章の横幅は、ホバーしていないときから最初から少し狭めに固定しておいて。
イラストが出てきたタイミングで文字とかぶってレイアウトが動かないようにして。

この要素のサイズ（文字の大きさ・余白）を画面幅に応じてなめらかに変えて。
狭い画面のときの最小サイズと、広い画面のときの最大サイズを決めて、
font-sizeやpaddingをclamp(最小値, 可変値, 最大値)の形で指定して。

一覧をクリックで開閉できるようにして。
JavaScriptは使わず、HTML標準のdetails要素とsummary要素を使って実装して。
開閉を示す矢印マークはブラウザ標準のものを消して、自分でCSSでデザインして。

このボタンは普段は黒文字・グレーの枠だけの控えめなデザインにして、
カーソルを合わせたときだけブランドカラーの緑に変わるようにして。
一番押してほしいボタンだけは、最初から緑背景・白文字にして目立たせて。