テンプレート汎用制御・特定要素

罫線

<hr>

アコーディオン

本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。: 本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。
本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。: 本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。

<div class="l-block-html">
	<dl class="m-accordion">
		<dt class="m-accordion__head">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dt>
		<dd class="m-accordion__body">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dd>
		<dt class="m-accordion__head">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dt>
		<dd class="m-accordion__body">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dd>
	</div>
</dl>

本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。: 本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。
本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。: 本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。

<div class="l-block-html">
	<dl class="m-accordion _faq_">
		<dt class="m-accordion__head">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dt>
		<dd class="m-accordion__body">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dd>
		<dt class="m-accordion__head">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dt>
		<dd class="m-accordion__body">本文（基本）が入ります。亀田クリニックでは待ち時間を少なくするため「予約診療」を行っています。診療を受けられる方は、はじめての方でもまず ”受診の予約” にご協力ください。</dd>
	</div>
</dl>

お問い合わせ

予約に関するお問い合せ: 04-7099-1111
※受付 8：00～17：00（日曜・祝日除く）

その他のお問い合わせ: 04-7092-2211
※受付 8：00～17：00（日曜・祝日除く）

<div class="c-grid _col2_">
	<div class="__col">
		<dl class="m-contact-box">
			<dt class="m-contact-box__head">予約に関するお問い合せ</dt>
			<dd class="m-contact-box__body">
				<a class="__link" href="tel:04-7099-1111">04-7099-1111</a>
				<div class="__txt">※受付 8：00～17：00（日曜・祝日除く）</div>
			</dd>
		</dl>
	</div>
	<div class="__col">
		<dl class="m-contact-box">
			<dt class="m-contact-box__head">その他のお問い合わせ</dt>
			<dd class="m-contact-box__body">
				<div class="__ttl">亀田総合病院（代表）</div>
				<a class="__link" href="tel:04-7092-2211">04-7092-2211</a>
				<div class="__txt">※受付 8：00～17：00（日曜・祝日除く）</div>
			</dd>
		</dl>
	</div>
</div>

お知らせ関連

KEYWORDS: #コロナ関連情報 #女性の健康 #予防医療 #先進医療 #膝関節 #治療法 #マスク

<dl class="m-purpose-filter">
	<dt class="__head">KEYWORDS</dt>
	<dd class="__body _sm-wrap_">
		<a class="e-hashtag" href="dummy">#コロナ関連情報</a>
		<a class="e-hashtag" href="dummy">#女性の健康</a>
		<a class="e-hashtag" href="dummy">#予防医療</a>
		<a class="e-hashtag" href="dummy">#先進医療</a>
		<a class="e-hashtag" href="dummy">#膝関節</a>
		<a class="e-hashtag" href="dummy">#治療法</a>
		<a class="e-hashtag" href="dummy">#マスク</a>
	</dd>
</dl>

FILTER: 全てイベント・セミナー・説明会ニュース・プレスリリースその他

<dl class="m-purpose-filter">
	<dt class="__head">FILTER</dt>
	<dd class="__body">
		<span class="e-label _is-active_">全て</span>
		<span class="e-label">イベント・セミナー・説明会</span>
		<span class="e-label">ニュース・プレスリリース</span>
		<span class="e-label">その他</span>
	</dd>
</dl>

= 患者様向け
= 医療関係者向け

<ul class="m-purpose-icon">
	<li class="m-purpose-icon__item">
		<span class="__ico"><svg aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-person"></use></svg></span>
		<span class="__txt">= 患者様向け</span>
	</li>
	<li class="m-purpose-icon__item">
		<span class="__ico"><svg aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-medical"></use></svg></span>
		<span class="__txt">= 医療関係者向け</span>
	</li>
</ul>

2022/03/01
ニュース

通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています
2022/03/01
イベント

外部リンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。外部リンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています
2021/12/06
イベント

PDFリンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。PDFリンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています
2021/12/03
その他

リンクなしのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。リンクなしのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています

<ul class="c-news-list">
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy">
			<time class="c-news-list__date" datetime="2022-03-01">2022/03/01</time>
			<div class="c-news-list__category"><span class="e-label">ニュース</span></div>
			<div class="c-news-list__ico">
				<svg class="__ico _active_" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-person"></use></svg>
				<svg class="__ico _active_" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-medical"></use></svg>
			</div>
			<div class="c-news-list__txt"><span class="__elem">通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています</span></div>
		</a>
	</li>
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy" target="_blank">
			<time class="c-news-list__date" datetime="2022-03-01">2022/03/01</time>
			<div class="c-news-list__category"><span class="e-label">イベント</span></div>
			<div class="c-news-list__ico">
				<svg class="__ico _active_" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-person"></use></svg>
				<svg class="__ico" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-medical"></use></svg>
			</div>
			<div class="c-news-list__txt"><span class="__elem">外部リンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。外部リンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています</span></div>
		</a>
	</li>
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy.pdf" target="_blank">
			<time class="c-news-list__date" datetime="2021-12-06">2021/12/06</time>
			<div class="c-news-list__category"><span class="e-label">イベント</span></div>
			<div class="c-news-list__ico">
				<svg class="__ico" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-person"></use></svg>
				<svg class="__ico _active_" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-medical"></use></svg>
			</div>
			<div class="c-news-list__txt"><span class="__elem">PDFリンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。PDFリンクのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています</span></div>
		</a>
	</li>
	<li class="c-news-list__item">
		<time class="c-news-list__date" datetime="2021-12-03">2021/12/03</time>
		<div class="c-news-list__category"><span class="e-label">その他</span></div>
		<div class="c-news-list__ico">
			<svg class="__ico" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-person"></use></svg>
			<svg class="__ico _active_" aria-hidden="true"><use xlink:href="/common/img/icon.svg#ico-medical"></use></svg>
		</div>
		<div class="c-news-list__txt"><span class="__elem">リンクなしのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています。リンクなしのサンプルです。文字の大きさ、量、字間、行間等を確認するために入れています</span></div>
	</li>
</ul>

<ul class="c-news-list">
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy">
			<div class="c-news-list__category"><span class="e-label">医師</span><span class="e-label">コメディカル</span></div>
			<div class="c-news-list__txt">通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています</div>
		</a>
	</li>
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy">
			<div class="c-news-list__category"><span class="e-label">看護師</span><span class="e-label">その他</span></div>
			<div class="c-news-list__txt">通常リンクです。文字の大きさ、量、字間、行間等を確認するために入れています</div>
		</a>
	</li>
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy" target="_blank">
			<div class="c-news-list__category"><span class="e-label">コメディカル</span></div>
			<div class="c-news-list__txt">外部リンクのサンプルです</div>
		</a>
	</li>
	<li class="c-news-list__item">
		<a class="c-news-list__link" href="dummy.pdf" target="_blank">
			<div class="c-news-list__category"><span class="e-label">コメディカル</span></div>
			<div class="c-news-list__txt">PDFファイルリンクのサンプルです</div>
		</a>
	</li>
	<li class="c-news-list__item">
		<div class="c-news-list__category"><span class="e-label">その他</span></div>
		<div class="c-news-list__txt">リンクなしのサンプルです</div>
	</li>
</ul>

左右中寄せ

インラインレベル要素左中右寄せ

class="u-al-l" インラインレベル左寄せ

class="u-al-c" インラインレベル中央寄せ

class="u-al-r" インラインレベル右寄せ

<div class="u-al-l">class="u-al-l" インラインレベル左寄せ</div>
<div class="u-al-c">class="u-al-c" インラインレベル中央寄せ</div>
<div class="u-al-r">class="u-al-r" インラインレベル右寄せ</div>

ブロックレベル要素左中右寄せ

※flex-box の概念を利用していますので、複数子要素が入る場合などは注意。

class="u-al-fl" ブロックレベル左寄せ

class="u-al-fc" ブロックレベル中央寄せ

class="u-al-fr" ブロックレベル右寄せ

<div class="u-al-fl">
	<div class="m-box _line-gray_">class="u-al-fl" ブロックレベル左寄せ</div>
</div>
<div class="u-al-fc">
	<div class="m-box _line-gray_">class="u-al-fc" ブロックレベル中央寄せ</div>
</div>
<div class="u-al-fr">
	<div class="m-box _line-gray_">class="u-al-fr" ブロックレベル右寄せ</div>
</div>

Youtube,Google Map等埋込 class="e-iframe"

<div class="l-block-html">
	<div class="e-iframe">
		<iframe src="https://www.youtube.com/embed/6s71d3hFdno" width="1280" height="720" class="__elem" allowfullscreen></iframe>
	</div>
</div>

<div class="l-block-html">
	<div class="e-iframe">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d18332.60100274925!2d139.75585805149223!3d35.68250187152156!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1487051789852" width="800" height="600" class="__elem" allowfullscreen></iframe>
	</div>
</div>

Youtube モーダルウィンドウ表示 class="e-movie"

<div class="l-block-html">
	<a class="e-movie" data-lity href="https://www.youtube.com/watch?v=6s71d3hFdno">
		<img loading="lazy" src="http://placehold.jp/800x450.png" alt="">
	</a>
</div>

テンプレート 汎用制御・特定要素

罫線

アコーディオン

お問い合わせ

お知らせ関連

左右中寄せ

インラインレベル要素左中右寄せ

ブロックレベル要素左中右寄せ

Youtube,Google Map等埋込 class="e-iframe"

Youtube モーダルウィンドウ表示 class="e-movie"

テンプレート汎用制御・特定要素