テンプレート 画像

<div class="m-img-block">
	<figure class="m-img-block__figure">
		<img loading="lazy" src="https://placehold.jp/1040x500.png" alt="">
		<figcaption class="e-caption">キャプションが入ります。キャプションが入ります。</figcaption>
	</figure>
</div>
<div class="m-img-block">
	<figure class="m-img-block__figure">
		<a class="__link" href="dummy"><img loading="lazy" src="https://placehold.jp/760x420.png" alt=""></a>
		<figcaption class="e-caption">リンクつき画像のサンプルです。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。キャプションが入ります。</figcaption>
	</figure>
</div>

<div class="m-img-block _mt-s_">
	<figure class="m-img-block__figure">
		<img loading="lazy" src="https://placehold.jp/400x250.png" alt="">
		<figcaption class="e-caption">（上マージン 小）キャプションが入ります。</figcaption>
	</figure>
</div>
<div class="m-img-block _mt-m_">
	<figure class="m-img-block__figure">
		<img loading="lazy" src="https://placehold.jp/400x250.png" alt="">
		<figcaption class="e-caption">（上マージン 中）キャプションが入ります。</figcaption>
	</figure>
</div>
<div class="m-img-block _mt-l_">
	<figure class="m-img-block__figure">
		<img loading="lazy" src="https://placehold.jp/400x250.png" alt="">
		<figcaption class="e-caption">（上マージン 大）キャプションが入ります。</figcaption>
	</figure>
</div>

<div class="c-grid _col2_">
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
</div>

<div class="c-grid _col3_">
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
</div>

<div class="c-grid _col4_">
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
	<div class="__col">
		<div class="m-img-block">
			<figure class="m-img-block__figure">
				<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
				<figcaption class="e-caption">キャプションが入ります。</figcaption>
			</figure>
		</div>
	</div>
</div>

<div class="c-flex _left_">
	<figure class="c-flex__item">
		<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
		<figcaption class="e-caption">キャプションが入ります。キャプションが入ります。</figcaption>
	</figure>
	<div class="c-flex__body">
		<p>亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</p>
	</div>
</div>

<div class="c-flex _right_">
	<figure class="c-flex__item">
		<img loading="lazy" src="https://placehold.jp/640x480.png" alt="">
		<figcaption class="e-caption">キャプションが入ります。キャプションが入ります。</figcaption>
	</figure>
	<div class="c-flex__body">
		<p>亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</p>
	</div>
</div>