図表・メディア

図表

図表 デフォルト

★★★
キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。
<figure class="c-figure">
<img src="https://placehold.jp/768x432.png" alt="★★★" width="768" height="432" loading="lazy">
<figcaption class="c-figure_caption">キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。</figcaption>
</figure>

図表 幅変更

幅を変更するには、ヘルパークラスu-w-*を使用してください。詳細はヘルパークラスwidthをご覧ください。
★★★
キャプションが入ります。キャプションが入ります。キャプションが入ります。
<figure class="c-figure sm:u-w-80%">
<img src="https://placehold.jp/768x432.png" alt="★★★" width="768" height="432" loading="lazy">
<figcaption class="c-figure_caption">キャプションが入ります。キャプションが入ります。キャプションが入ります。</figcaption>
</figure>

メディア（動画・地図）

動画

<div class="c-media">
<iframe src="https://www.youtube.com/embed/kIsiitITIes?si=e2V0ZjcWrXdFqyRy" title="YouTube video player" width="768" height="432" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen referrerpolicy="strict-origin-when-cross-origin"></iframe>
</div>

地図

<div class="c-media">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.6680410866384!2d139.74842213488762!3d35.685175!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0d02d8064d%3A0xd11a5f0b379e6db7!2z55qH5bGF!5e0!3m2!1sja!2sjp!4v1745923403144!5m2!1sja!2sjp" title="google map" width="768" height="432" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="border:0;"></iframe>
</div>