@charset "UTF-8";
/*
 * HA SEO Lite — スマホ・タブレット幅用 CSS（zao-kai.com テーマ zaoukai 向け）
 *
 * - 全ルールを max-width の @media 内に閉じる＝幅1050px以上（PC）には1行も効かない（tests/run.php が機械検査）。
 *   読込側の <link media> も同じ条件で二重に絞っている。
 * - テーマは改変しない。読込順はテーマ style.css → 本ファイル（wp_head）→ テーマ css/reset.css。
 *   reset.css（要素セレクタの margin/padding 0）に負けないよう、要素だけのセレクタには body を前置する。
 * - 表は表のまま収める（横スクロール・行のカード化はしない）。列の多い診療時間表は転置する。
 * - 対象セレクタの出どころ: Step1 の実測（全236ページ・幅375px）の一覧。
 */

@media screen and (max-width: 1049px) {

	/* ---------- 土台 ---------- */
	body {
		-webkit-text-size-adjust: 100%;
	}
	body img {
		max-width: 100%;
		height: auto;
	}
	body iframe,
	body video,
	body embed,
	body object,
	body table,
	body .wp-caption {
		max-width: 100%;
	}
	body input,
	body textarea,
	body select {
		max-width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* ---------- ヘッダー（#head 1314px・#head_navi 829px・#navi 854px） ---------- */
	#head {
		width: auto;
		padding: 12px 12px 8px;
	}
	#head_logo01,
	#head_navi,
	#head_inqu {
		float: none;
		width: auto;
		margin: 0 auto;
	}
	#head_navi h1 {
		width: auto;
		height: auto;
		margin: 6px 0;
		font-size: 14px;
		line-height: 1.5;
	}
	#navi {
		width: auto;
		height: auto;
		margin: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
	}
	#navi li {
		float: none;
		height: auto;
		margin: 3px;
	}
	#head_inqu {
		margin-top: 8px;
	}

	/* ---------- 本文枠（#contents 1050px ほか） ---------- */
	#contents {
		width: auto;
		margin: 0 0 40px;
		padding: 20px 12px 0;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	hr,
	.img_header,
	.img_1050,
	.head_comm,
	.text,
	.top_seo,
	.top_news,
	.recruit_top_img,
	.contact_tel,
	.voice_comm,
	.voice_comm2 {
		width: auto;
	}
	.top_seo {
		margin-left: 12px;
		margin-right: 12px;
	}
	/* 記事本文で全角スペースを数十個並べて左右へ寄せた段落（「敬具」「院長」行など）は折り返せず横にはみ出す。
	 * 寄せ指定のある段落に限って任意位置での改行を許す（通常の段落の禁則は崩さない）。 */
	#contents p[style*="text-align"] {
		line-break: anywhere;
	}

	/* ---------- 2カラムの float を縦積みに ---------- */
	.top_left,
	.top_right,
	.top_consult_l,
	.top_consult_r,
	.top_consult_all,
	.top_recruit_l,
	.top_recruit_r,
	.top_reserve_l,
	.top_reserve_r,
	.top_access_l,
	.top_access_r,
	.top_intro_img1,
	.top_intro_img2,
	.about_tab1,
	.about_tab3,
	.about_tab3aa,
	.about_img_l,
	.about_img_r,
	.about_text,
	.consult_img_l,
	.consult_img_r,
	.consult_text,
	.consult_tab1,
	.admission_text,
	.admission_text_02,
	.admission_text_03,
	.admission_text_04,
	.floor_img1_l,
	.floor_img1_r,
	.floor_img1,
	.floor_img2_l,
	.floor_img2_r,
	.floor_img2_r1,
	.floor_img2_r2,
	.floor_img2a,
	.floor_img3_l,
	.floor_img3_r,
	.outline_text,
	.outline_r,
	.outline_img_r,
	.recruit_text,
	.recruit_text_nl,
	.recruit_l,
	.recruit_r,
	.recruit_img {
		float: none;
		width: auto;
		max-width: 640px;
		margin-left: auto;
		margin-right: auto;
	}
	.top_intro_img1,
	.top_intro_img2 {
		margin-bottom: 10px;
	}
	.admission_text p {
		padding-left: 0;
	}

	/* ---------- 画像に絶対配置で重ねた文字を画像の下へ ---------- */
	.top_right_text,
	.top_consult_text,
	.top_consult_text_all,
	.top_recruit_r_text,
	.recruit_top_img_text,
	.about_tab1_text,
	.about_tab3_text,
	.about_tab3aa_text,
	.consult_tab1_text,
	.admission_tab1_text,
	.contact_tel_in {
		position: static;
		width: auto;
		height: auto;
	}
	/* 白文字は画像の上でしか読めない＝画像の直下へ、その画像と同じ色の帯で続けて1枚の箱に見せる。
	 * 下部が単色の空き地になっている画像（精神科・認知症・新患の方へ）は空き地の手前で切る。
	 * 色・切り出し比は画像から実測（link_back01 単色 #69ba00 が y241〜/幅513、link_back02_b #faaf3b が y239〜/513、
	 * back_yoyaku 見出し枠の下端 y68/幅525・地は #f9a632→#f6921d、link_back05 左パネル #00bcd1、
	 * link_back04_b 地 #23a8eb、recruit/link_back 地 #00bb00）。 */
	.top_right_text,
	.top_consult_text,
	.top_consult_text_all,
	.top_recruit_r_text,
	.recruit_top_img_text {
		padding: 12px 14px 14px;
		border-radius: 0 0 6px 6px;
		color: #fff;
	}
	.top_consult_l .top_consult_text {
		background-color: #69ba00;
	}
	.top_consult_r .top_consult_text {
		background-color: #faaf3b;
	}
	.top_consult_all .top_consult_text_all {
		background-color: #00bcd1;
	}
	.top_right_text {
		background-color: #f9a632;
		background-image: linear-gradient(#f9a632, #f6921d);
	}
	.top_recruit_r_text {
		background-color: #23a8eb;
	}
	.recruit_top_img_text {
		background-color: #00bb00;
	}
	.top_consult_l img[src*="link_back01"],
	.top_consult_r img[src*="link_back02"],
	.top_right img[src*="back_yoyaku"] {
		display: block;
		width: 100%;
		object-fit: cover;
		object-position: top;
	}
	.top_consult_l img[src*="link_back01"] {
		aspect-ratio: 513 / 241;
	}
	.top_consult_r img[src*="link_back02"] {
		aspect-ratio: 513 / 239;
	}
	.top_right img[src*="back_yoyaku"] {
		aspect-ratio: 525 / 68;
	}
	/* 新患の方へ・採用は HTML 上で文字が画像より前＝画像→文字の順に並べ替える */
	.top_right,
	.top_recruit_r {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.top_right_text,
	.top_recruit_r_text {
		-webkit-order: 2;
		order: 2;
	}
	.top_right > p,
	.top_recruit_r > p {
		margin: 0;
	}

	/* ---------- 画像の枠（タブ見出し付き）に文字を重ねた箱: 診療「病名」等・当院について「理念」等 ----------
	 * 枠の画像は高さ固定で、幅を縮めると文字が収まらない。画像は上端（タブ見出し＋上辺）だけを切り出して見出しにし、
	 * 左右と下の辺は画像と同じ色の線を CSS で引いて、文字の量に合わせて枠を下へ延ばす。
	 * 切り出し比 = 上辺の下端 / 画像の幅（画像から実測: about tab_01/02 50/276・tab_03 50/479・consult tab_01x 32/512・tab_02x 29/512）。 */
	.about_tab1 {
		max-width: 276px;
	}
	.about_tab3 {
		max-width: 479px;
	}
	.consult_tab1 {
		max-width: 512px;
	}
	.about_tab1 img,
	.about_tab3 img,
	.consult_tab1 img {
		display: block;
		width: 100%;
		object-fit: cover;
		object-position: top;
	}
	.about_tab1 img {
		aspect-ratio: 276 / 50;
	}
	.about_tab3 img {
		aspect-ratio: 479 / 50;
	}
	.consult_tab1 img[src*="tab_01"] {
		aspect-ratio: 512 / 32;
	}
	.consult_tab1 img[src*="tab_02"] {
		aspect-ratio: 512 / 29;
	}
	.about_tab1_text,
	.about_tab3aa_text,
	.consult_tab1_text {
		margin-bottom: 16px;
		padding: 8px 14px 14px;
		border: 2px solid #69ba00;
		border-top: 0;
		border-radius: 0 0 8px 8px;
		font-size: 16px;
		line-height: 1.6;
		text-align: left;
	}
	.consult_tab1 img[src*="tab_02"] + .consult_tab1_text {
		border-color: #f6921e;
	}

	/* ---------- トップのお知らせ（.top_news 1048px・タブ絶対配置） ---------- */
	.top_news {
		height: auto;
		position: static;
	}
	.top_news_tab1,
	.top_news_tab2,
	.top_news_tab3,
	.top_news_tab4 {
		position: static;
		float: left;
		width: 50%;
	}
	.top_news dl {
		clear: both;
		padding-top: 10px;
		text-align: left;
	}
	.top_news dt {
		float: none;
		width: auto;
		height: auto;
		padding-top: 10px;
		line-height: 1.6;
		font-size: 14px;
	}
	.top_news dd {
		float: none;
		width: auto;
		height: auto;
		line-height: 1.6;
		padding-bottom: 10px;
	}
	.top_news .news,
	.top_news .kensyu,
	.top_news .sonota {
		display: inline-block;
		height: auto;
		padding: 0;
		line-height: 2;
		font-size: 14px;
		background-position: center;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	/* ---------- お知らせ一覧（.n_list）の固定高さ ---------- */
	.n_list dt,
	.n_list dd,
	.n_list .news,
	.n_list .sonota,
	.news_list .kensyu {
		height: auto;
		line-height: 1.6;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.n_list .news,
	.n_list .sonota,
	.news_list .kensyu {
		font-size: 14px;
	}

	/* ---------- トップの診療時間表（8列）を転置: 行=曜日 / 列=時間帯（午前・午後） ----------
	 * tr/thead/tbody を display:contents にしてセルを grid の直下へ出し、列方向に流す。
	 * 先頭8セル（時間・月〜日）が1列目、午前の8セルが2列目、午後の8セルが3列目になる。 */
	.top_time table {
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		grid-template-rows: repeat(8, auto);
		grid-auto-flow: column;
		width: 100%;
	}
	.top_time thead,
	.top_time tbody,
	.top_time tr {
		display: contents;
	}
	.top_time thead th,
	.top_time thead td,
	.top_time tbody th,
	.top_time tbody td {
		width: auto;
		padding: 6px;
		font-size: 16px;
		line-height: 1.5;
	}

	/* ---------- 記事系（.main_right 820px・#sidebar） ---------- */
	.main_right,
	#sidebar {
		float: none;
		width: auto;
		margin: 0 0 30px;
	}
	.archive,
	.post_title,
	.contents_title {
		width: auto;
		height: auto;
	}
	.archive {
		padding: 12px;
	}
	.post_title,
	.contents_title {
		min-height: 32px;
		line-height: 1.6;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	/* ---------- 2列の表（病院概要・お問い合わせ・ご意見箱）: 表のまま列幅を配分 ---------- */
	.outline_table,
	.inqu_table,
	.voice_table {
		width: auto;
		padding: 12px;
	}
	/* .outline_table / .inqu_table は表を包む div（padding 付き）＝幅指定は中の table にだけ当てる */
	.outline_table table,
	.inqu_table table,
	.voice_table table {
		width: 100%;
		table-layout: fixed;
	}
	.outline_table thead th,
	.outline_table tbody th,
	.inqu_table th,
	.voice_table .table1 th,
	.voice_table .table2 th {
		width: 30%;
		font-size: 15px;
		line-height: 1.5;
	}
	.outline_table thead td,
	.outline_table tbody td,
	.inqu_table td,
	.inqu_table .nb,
	.voice_table .table1 td,
	.voice_table .table2 td,
	.voice_table .table3 th,
	.voice_table .table3 td {
		width: auto;
		padding-left: 8px;
		font-size: 15px;
		line-height: 1.5;
	}
	.voice_table .table2 th,
	.voice_table .table2 td,
	.voice_table .table3 th,
	.voice_table .table3 td {
		float: none;
	}
	.voice_table .table1,
	.voice_table .table2,
	.voice_table .table3 {
		width: 100%;
		padding: 12px 0;
	}
	.voice_table .form_style1,
	.voice_table .form_style2,
	.voice_table .form_style_tarea {
		width: 100%;
	}

	/* ---------- フッター（#footer_in 1130px） ---------- */
	#footer_in,
	#footer_link {
		width: auto;
	}
	#footer_link {
		height: auto;
		padding: 10px 12px;
		font-size: 16px;
		line-height: 2;
	}
	#footer_copy {
		height: auto;
		padding: 10px 12px;
		font-size: 14px;
		line-height: 1.6;
	}
	.page_top {
		width: 56px;
	}

	/* ---------- 文の途中の改行（sp-text.js が印を付けた <br> だけ） ----------
	 * 本文の一部は PC の行幅に合わせて <br> で折ってあり、狭い幅では「慣れて／いる場所」のように文の途中で行が切れる。
	 * 「。」で終わる行・箇条書き・住所・時刻の改行は印が付かない＝残る。 */
	#contents br.ha-sp-soft {
		display: none;
	}

	/* ---------- 文字を描いた画像 → 同じ文言のテキスト（sp-text.js が直後に hidden で差し込む） ----------
	 * 幅375pxでは横1050px前後の画像が1/3に縮み、描かれた文字は 9px 前後になる。画像を隠し、テキストで出す。 */
	body img.ha-sp-imgtext {
		display: none;
	}
	.ha-sp-alt {
		display: block;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		width: 100%;
		text-align: left;
	}
	.ha-sp-alt__line {
		display: block;
	}
	/* 見出し: 画像の見出し帯（白地・濃い文字・下に罫線）を文字で。ページ題名（写真の上の緑帯）は sp-text.js が地色を指定する */
	.ha-sp-alt--heading {
		margin: 0 0 12px;
		padding: 10px 4px 6px;
		border-bottom: 2px solid #69ba00;
		color: #231815;
		font-size: 20px;
		font-weight: bold;
		line-height: 1.4;
	}
	.img_header .ha-sp-alt--heading {
		margin: 0;
		padding: 14px;
		border-radius: 10px;
		font-size: 22px;
	}
	.ha-sp-alt--info {
		margin: 0 0 12px;
		padding: 12px 14px;
		border-radius: 6px;
		font-size: 16px;
		line-height: 1.6;
		text-align: center;
	}
	.ha-sp-alt--info .ha-sp-alt__lead {
		margin-bottom: 4px;
		font-size: 18px;
		font-weight: bold;
	}
	/* 電話・受付時間の箱: 1行目を画像と同じ色の帯にする */
	.ha-sp-alt--info .ha-sp-alt__band {
		margin: -12px -14px 8px;
		padding: 8px 14px;
		border-radius: 6px 6px 0 0;
		color: #fff;
	}
	/* 症状の吹き出し: 白い札に地色の文字で並べる */
	.ha-sp-alt__items {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-justify-content: center;
		justify-content: center;
		margin-top: 6px;
	}
	.ha-sp-alt__item {
		margin: 4px;
		padding: 4px 12px;
		border-radius: 16px;
		background-color: #fff;
		font-weight: bold;
	}
	a .ha-sp-alt--info {
		text-decoration: underline;
	}

	/* ---------- 14px 未満の文字 ---------- */
	.font12,
	.font13,
	.about_text_box1,
	.about_table_td,
	.about_table_tdb {
		font-size: 14px;
	}
}