スライドイン

スクロールにより、事前に設定された位置にコンテンツが表示された時点で、コンテンツをスライドインさせます。

Example code
<div class="container">
    <section class="section">
        <h3 class="section__hl fontYuGothic effect d_02">スライドイン</h3>
        <p class="aCenter effect d_04">スクロールにより、事前に設定された位置にコンテンツが表示された時点で、コンテンツをスライドインさせます。</p>
        <div class="rowBox__2elem effect d_08">
            <div class="boxInner">
                <p class="btnwrap-w400"><a class="btn" href="">もっと読む</a></p>
                <p class="aCenter">400px幅</p>
            </div>
            <div class="boxInner">
                <p class="btnwrap-w300"><a class="btn" href="">もっと読む</a></p>
                <p class="aCenter">300px幅</p>
            </div>
        </div>
    </section>
</div>

Example code
<h3 class="effect d_02">サンプル</h3>

<h3 class="effect d_04">サンプル</h3>

<h3 class="effect d_06">サンプル</h3>

<h3 class="effect d_08">サンプル</h3>

スライドインさせたいコンテンツに「effect」をクラス指定します。併せて「d_02」と指定するとスライドインエフェクトの開始を0.2秒遅らせます。「d_04」は0.4秒、「d_08」は0.8秒という具合です。

動画（youtube）埋め込み

youtubeの動画コンテンツを埋め込みます。

Example code
<div class="video">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/*****" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

youtubeの「共有」ボタンから「埋め込み」を選択、表示された<iframe>コードをコピーし、「video」をクラスで囲みます。
表示エリアのサイズに併せて、動画表示画面がアスペクト比を守ったまま伸長します。
動画表示画面の最大サイズを指定したい場合は、「video」クラスの外をdivで囲い、style="max-width:600px; margin:0 auto;"などのスタイルを当てれば、以下のように表示されます。