サブタイトル（文字小）メインタイトル（文字大）

ポップアップ

<a class="row-item full js-mdl add-clickable-txt" data-mdl="mdl_01" data-set-class="fit" href="#">
	<div id="mdl_01">
		<div class="img-wrap">
			<img src="https://seikeikai.or.jp/seikeikai/wp-content/themes/hospital_theme/assets/img/dummy/upload/dummy_wide.png" alt="">
		</div>
		<p class="cap">キャンサーボード</p>
	</div>
</a>

/* ↑↑ */
data-mdl="{ポップアップ表示するブロックのID}"
data-set-class="{ポップアップ表示するブロックのラッパーに対してクラス付与}"
→fitは画像に対して有効です。fitを指定すると、画像が画面いっぱいより大きく表示されません。
　fit無しの場合は、画面より高さのあるものは縦スクロールで表示します。
クラス：add-clickable-txtはクリックする要素でポップアップのコンテンツを囲っているときに、
ホバーアクションでテキストを表示するために付与します。
/**/

<a class="row-item js-mdl add-clickable-txt" data-mdl="mdl_02_01" data-set-class="fit" href="#">
	<div class="img-wrap" data-mh="imgWrap">
		<div id="mdl_02_01" class="img-wrap">
			<img src="https://seikeikai.or.jp/seikeikai/wp-content/themes/hospital_theme/assets/img/dummy/upload/dummy_4x3.png" alt="">
		</div>
	</div>
	<p class="cap">data-set-class="fit" これを追加することで、画像については画面にFITして表示されます。</p>
</a>

/* ↑↑ */
data-mdl="{ポップアップ表示するブロックのID}"
data-set-class="{ポップアップ表示するブロックのラッパーに対してクラス付与}"
→fitは画像に対して有効です。fitを指定すると、画像が画面いっぱいより大きく表示されません。
　fit無しの場合は、画面より高さのあるものは縦スクロールで表示します。
クラス：add-clickable-txtはクリックする要素でポップアップのコンテンツを囲っているときに、
ホバーアクションでテキストを表示するために付与します。
/**/

<a class="row-item js-mdl add-clickable-txt" data-mdl="mdl_02_02" href="#">
	<div class="img-wrap" data-mh="imgWrap">
		<div id="mdl_02_02" class="img-wrap">
			<img src="https://seikeikai.or.jp/seikeikai/wp-content/themes/hospital_theme/assets/img/dummy/upload/dummy_4x3.png" alt="">
		</div>
	</div>
	<p class="cap">キャプションが入ります。</p>
</a>

/* ↑↑ */
data-mdl="{ポップアップ表示するブロックのID}"
data-set-class="{ポップアップ表示するブロックのラッパーに対してクラス付与}"
→fitは画像に対して有効です。fitを指定すると、画像が画面いっぱいより大きく表示されません。
　fit無しの場合は、画面より高さのあるものは縦スクロールで表示します。
クラス：add-clickable-txtはクリックする要素でポップアップのコンテンツを囲っているときに、
ホバーアクションでテキストを表示するために付与します。
/**/

トグル

トグルボタン1

トグルボタン2

<p class="catch-strong"><a class="js-tgl-list-ttl" data-tgl-list="tgl_01" href="#">トグルボタン1</a></p>
<div id="tgl_01" class="js-tgl-list-obj">
	<div class="txt-wrap">
		<p>トグルされるコンテンツ1</p>
	</div>
</div>
<p class="catch-strong"><a class="js-tgl-list-ttl" data-tgl-list="tgl_02" href="#">トグルボタン2</a></p>
<div id="tgl_02" class="js-tgl-list-obj">
	<div class="txt-wrap">
		<p>トグルされるコンテンツ2</p>
	</div>
</div>

/* ↑↑ */
js-tgl-list-ttlでクリックする要素
クリックする要素にdata-tgl-list="{表示するブロックのID}"で開閉する要素のIDを指定
開閉する要素：id="{ブロックのID}" class="js-tgl-list-obj"こちらを付与
/**/

診療科概要

<div class="sec-ttl-wrap">
	<h2 class="h2 sec-ttl"><span class="ja">診療科概要</span></h2>
</div>

<div class="txt-wrap">
	<p class="catch-strong txt-c-primary-light">こども達に質の高い充実した医療を提供</p>
</div>

<div class="txt-wrap">
	<p class="catch">小児救急を中心に、小児科疾患全般の診療を行っています。</p>
	<p>予約や紹介状なしでも受診できますので、ご利用ください。</p>
</div>

<div class="txt-wrap">
	<p class="fw-bold txt-c-primary">関連リンク</p>
	<p class="txt-c-primary">大阪医科薬科大学LDセンターの連携機関として、「堺清恵会LDセンター」を平成27年10月1日に開設し、学習障害のお子さんの支援を行っています。<br>認知の偏りによる学習困難を持つお子さんを対象に、読み書き等の指導、視機能の訓練等を行います。</p>
</div>

• 堺清恵会LDセンター（学習障害支援）の情報はこちら
• 関連リンク
• 関連リンク

<ul class="box-list">
	<li><a class="link-box" href=""><span>堺清恵会LDセンター（学習障害支援）の情報はこちら</span></a></li>
	<li><a class="link-box" href=""><span>関連リンク</span></a></li>
	<li><a class="link-box" href=""><span>関連リンク</span></a></li>
</ul>

検査・治療の特徴

主な対象疾患

• 1神経疾患

  てんかん、その他の神経疾患、チックなどについて、脳波、画像検査等による診断と治療を行います。

• 2発達障害

  主として発達障害について、発達検査や問診・面談等による診断、治療・指導・カウンセリング等を行います。

• 3起立性調節障害

  起立試験などを行って診断し、生活指導、薬剤治療を行います。

• 4アレルギー疾患

  喘息の長期管理、アトピー性皮膚炎の治療、食物アレルギーの診断・食事指導・食物負荷試験等を行います。

• 5循環器疾患（心臓超音波検査）

  心疾患、不整脈、川崎病後の経過等に対応しています。

• 6内分泌疾患

  夜尿症、低身長等の内分泌疾患について、検査・診断・治療を行います。

• 7乳児検診

  1か月健診・後期健診、および発育についての相談等に対応しています。

• 8ワクチン接種

  お子様それぞれのスケジュールを提案し、予約制でワクチン接種を行っています。

<ul class="circle-num-list">
	<li>
		<p class="circle-num txt-c-primary-light"><span class="num">1</span>神経疾患</p>
		<p>てんかん、その他の神経疾患、チックなどについて、脳波、画像検査等による診断と治療を行います。</p>
	</li>
	<li>
		<p class="circle-num txt-c-primary-light"><span class="num">2</span>発達障害</p>
		<p>主として発達障害について、発達検査や問診・面談等による診断、治療・指導・カウンセリング等を行います。</p>
	</li>
	・・・・
</ul>

受診・予約について

<div class="txt-wrap">
	<p class="catch lead-circle-icon txt-c-primary-light fw-bold">受付時間</p>
</div>

<div class="txt-wrap">
	<p class="fw-bold">【午前】 8:30～11:30（診察9:00～）<br>【午後】 13:30～16:30（予約外来）</p>
	<p>午後の予約外の診察について<br>「救急受付」の窓口で受け付け、診察しています。下方に記載の「小児科　時間外・休日の救急診療」をご覧ください。</p>
</div>

• 堺清恵会LDセンター（学習障害支援）の情報はこちら

<ul class="box-list">
	<li><a class="link-box bg-grad-primary-light" href=""><span>堺清恵会LDセンター（学習障害支援）の情報はこちら</span></a></li>
</ul>

<div class="txt-wrap">
	<p class="catch lead-circle-icon txt-c-accent fw-bold">小児科 時間外・休日の救急診療</p>
</div>
<div class="txt-wrap">
	<p class="break-txt"><span class="fw-bold">【月曜日〜土曜日】</span><span class="txt-c-accent fw-bold"> 23:30まで</span><br><span class="fw-bold">【第３・５週土曜日の翌日の日曜日】</span><span class="txt-c-accent fw-bold"> 9:00〜23:30</span></p>
</div>

スタッフ紹介

構成：2カラム（ワイド+ミニ）+テーブル（ボーダー）
<div class="flex-rowrap">
	<div class="row-item min">
		<div class="img-wrap">
			<img src="https://seikeikai.or.jp/seikeikai/wp-content/themes/hospital_theme/assets/img/dummy/upload/person_img.png" alt="">
		</div>
	</div>
	<div class="row-item wide">
		<div class="txt-wrap">
			<p><span class="catch txt-c-primary-light">部長</span><br><span class="catch-strong">松島 礼子</span><br>（H3大阪医大卒）</p>
		</div>
		<div class="table-wrap js-table-scroll">
			<table class="table-line">
				<tbody>
					<tr>
						<th><p class="txt-c-primary-light">主な専門領域</p></th>
						<td><p>循環器、新生児、小児一般</p></td>
					</tr>
					<tr>
						<th><p class="txt-c-primary-light">認定資格</p></th>
						<td><p>日本小児科学会小児科専門医・指導医<br>日本小児心身医学会認定医・指導医</p></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>

学会・著書論文

• 学会・研究会発表　一覧
• 著書・論文　一覧

専門外来紹介

• 〇〇〇〇センターの情報はこちら

診療実績

<div class="table-wrap js-table-scroll">
	<table class="table-def">
		<tbody>
			<tr>
				<th class="bg-primary"></th>
				<th class="bg-primary"><p class="fw-mid txt-center txt-c-white">2020年度</p></th>
				<th class="bg-primary"><p class="fw-mid txt-center txt-c-white">2021年度</p></th>
				<th class="bg-primary"><p class="fw-mid txt-center txt-c-white">2022年度</p></th>
				<th class="bg-primary"><p class="fw-mid txt-center txt-c-white">2023年度</p></th>
				<th class="bg-primary"><p class="fw-mid txt-center txt-c-white">2024年度</p></th>
			</tr>
			<tr>
				<th class="bg-base"><p class="fw-mid txt-center txt-c-white">一般外来</p></th>
				<td class="bg-white"><p class="txt-c-primary fw-mid txt-center">0,000</p></td>
				<td class="bg-white"><p class="txt-c-primary fw-mid txt-center">0,000</p></td>
				<td class="bg-white"><p class="txt-c-primary fw-mid txt-center">0,000</p></td>
				<td class="bg-white"><p class="txt-c-primary fw-mid txt-center">0,000</p></td>
				<td class="bg-white"><p class="txt-c-primary fw-mid txt-center">0,000</p></td>
			</tr>
			・・・・
		</tbody>
	</table>
</div>
※th、tdに関して、文章が長すぎて表示っ崩れ（PC時のスクロール発生）の場合は改行で調整

コラム

• 〇〇〇〇〇〇〇〇〇〇〇〇

その他（予防接種・ワクチンについて）

予防接種

ワクチンのご相談

実施

• ご予約のお電話はこちらから（受付時間00：00〜00：00）

定期接種（健康保険対象）

任意接種（健康保険対象外）

リスト

• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト

• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト

• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト
• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト

• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト
• ドットリスト
  • ドットリスト
  • ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト
  • ドットリスト
• ドットリスト

<ul class="dot-list">
	<li>ドットリスト
		<ul class="num-list">
			<li>ドットリスト</li>
			<li>ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト</li>
			<li>ドットリスト</li>
		</ul>
	</li>
	<li>ドットリスト</li>
</ul>
<ul class="num-list">
	<li>ドットリスト
		<ul class="dot-list">
			<li>ドットリスト</li>
			<li>ドットリストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストストスト</li>
			<li>ドットリスト</li>
		</ul>
	</li>
	<li>ドットリスト</li>
</ul>

汎用性クラス

/*text*/
テキスト関連
.fw-mid {
	font-weight: 500;
}
.fw-bold {
	font-weight: 700;
}
.txt-center {
	text-align: center;
}
.txt-right {
	text-align: right;
}
縦書き
.txt-vertical-writing {
	display: flex;
	flex-flow: row-reverse;
	justify-content: flex-start;
	align-items: flex-start;
	p {
		writing-mode: vertical-rl;
	}
}
テキストの自動改行1：自動で改行させたい文章に.breakを付与した時
.break-wrap {
	span {
		&.break {
			display: inline-block;
		}
	}
}
テキストの自動改行2：自動的に改行したい要素を<span>で囲った時
.break-txt {
	> span {
		display: inline-block;
	}
}
テキストの自動改行3：文字間を1文字分開けるとき
.flex-wrap-txt {
	display: flex;
	flex-flow: wrap;
	justify-content: flex-start;
	align-items: baseline;
	gap: 1em;
}
/*text end*/

/*color*/
テキスト色関連
.txt-c-primary {
	color: var(--c_primary);
}
.txt-c-primary-light {
	color: var(--c_primary_light);
}
.txt-c-accent {
	color: var(--c_accent);
}
/*color end*/

/*background*/
背景色関連
.bg-primary {
	background: var(--c_primary);
	> * {
		color: var(--c_white);
	}
}
.bg-accent {
	background: var(--c_accent);
	> * {
		color: var(--c_white);
	}
}
.bg-base {
	background: var(--bg_base);
}
.bg-grad-primary {
	background: bgGradientPrimary();
	> * {
		color: var(--c_white);
	}
	@include bgGradientPrimaryAngle();
}
.bg-grad-primary-light {
	background: bgGradientPrimaryLight();
	> * {
		color: var(--c_white);
	}
	@include bgGradientPrimaryLightAngle();
}
.bg-grad-accent-light {
	background: bgGradientAccentLight();
	> * {
		color: var(--c_white);
	}
	@include bgGradientAccentLightAngle();
}
.bg-white {
	background: var(--c_white);
}