/*
 * medisapo 基本レイアウトCSS（パドルシップ独自実装）。
 *
 * Lightning本体のCSS（themes/lightning/design-skin/等）は一切参照・複製していない。
 * L-01〜L-19のマークアップ（Phase 1実測）に対して、独立に設計したスタイルを当てる。
 * 色・余白等の細部の見た目一致はPhase 4のSTG実測比較で確認・調整する
 * （本ファイルはPhase 3時点でのベストエフォート版）。
 */

:root {
	--medisapo-color-key: #3461ac; /* Phase 0確認のlightning_theme_options.color_key */
	--medisapo-color-key-dark: #2e6da4;
	--medisapo-content-width: 1140px;
}

* { box-sizing: border-box; }

/*
 * FIX-01（Phase 4B Fix Cycle 1, medisapo 1.0.2）：汎用レスポンシブ画像制約。
 * Lightning本体のCSS（_g3/assets/css/style-theme-json.css）は参照・複製せず、
 * パドルシップ独自の低詳細度ルールとして独立実装する。投稿コンテンツに直接
 * 埋め込まれたインライン固定幅画像（style="width:850px"等）がコンテナ幅を
 * 超えて横方向にはみ出すことを防ぐ。width:100%は使わず、意図しない拡大
 * （小さい画像が親幅いっぱいに引き伸ばされること）を避ける。
 */
img {
	max-width: 100%;
	height: auto;
}

/*
 * FIX-01b（Phase 4B Fix Cycle 1, medisapo 1.0.2。ChatGPT追加承認済み）：
 * `img{max-width:100%}`だけでは解消しないSP横はみ出しが残ることをSTG実機での
 * client-side CSS注入テストで実証した（根本原因＝本文中の長い連続文字列、例：
 * 折り返し記号を含まない長いURLテキストが`.entry-body`の横幅を押し広げるケース。
 * 例：/lifestyle-related-disease-.../のPDF直リンクURL）。
 * overflow-wrapは継承プロパティのため、子孫への一括指定（`.entry-body *`）は
 * 最後の手段とし、まず親要素`.entry-body`1箇所のみに指定する（ChatGPT指示）。
 * 1.0.2実ファイルでの再検証（03_出力/Phase4B_FixCycle1_20260906/fix01_evidence/
 * fix01_final_verify.py, element_check_extra/element_check.py）で
 * SP390 10/10 PASS・PC1440新規overflow0・表/画像/長文の要素単位で崩れ0を確認済み。
 * `.entry-body`単独で全件解消したため、子要素個別セレクタの追加は不要だった。
 *
 * 【検証メモ】Gutenbergの固定レイアウトテーブル（table.has-fixed-layout）に
 * table-layout:auto;width:100%を当てる案も検討したが、STG実機での属性別切り分け
 * テスト（img単独／img+stretch／img+stretch+overflow-wrap／img+stretch+table の
 * 4パターンをFIX-01対象10ページ全件に適用し比較）の結果、このtableルールは
 * 10ページのいずれに対しても単独では解消効果がなく（部分改善に留まるか無効）、
 * overflow-wrapの追加だけで10/10ページが解消することを確認したため、ChatGPT
 * 指示により不採用で確定（1.0.2へは実装しない）。
 */
.entry-body {
	overflow-wrap: anywhere;
}

body {
	margin: 0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	color: #222;
	line-height: 1.7;
}

/* 注意：DOM上は本番互換のため「container」クラスも維持するが、CSSは
   「medisapo-container」側にのみ当てる（vk-blocks等が読み込むBootstrapの
   汎用.containerと衝突させないため。ChatGPT指示による名前空間分離）。 */
.medisapo-container {
	max-width: var(--medisapo-content-width);
	margin: 0 auto;
	padding: 0 20px;
}

a { color: var(--medisapo-color-key); }

/* --- L-03: サイトヘッダー／グローバルナビ ---
   2026-10-09 ヘッダー統一：旧.site-header系（下層ページ専用デザイン）を、
   公開TOP（front-page.php）の .header 系マークアップ・CSSへ統一して置き換えた。
   以降はTOP・下層ページともに template-parts/site-header.php が出力する同一マークアップを使う。
   色・サイズの値は、TOP専用 frontpage.css の :root 変数（--white/--text-dark/--main-orange）を
   実値へ展開したもの（assets/css/top-review.css と同じ既存の展開ルールに合わせた）。 */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #ffffff;
	z-index: 1000;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* h1既定のブラウザマージン（0.67em相当）がヘッダーの高さを押し広げるのを防ぐ。
   TOP（body.frontpage）は body.frontpage *{margin:0} の全称リセットで既に防がれているが、
   下層ページには同等のリセットがないため、ここで明示する。
   line-height:1.6 は、TOP側の body.frontpage{line-height:1.6}（本ファイルのbody{line-height:1.7}とは
   別の値）と同じ行送りをロゴ周りだけ再現し、ヘッダー高さをTOPと一致させるためのもの。
   font-size:2em は、2026-10-09の残課題修正（template-parts/site-header.php 側でTOP以外のロゴを
   h1からdivへ変更）に伴う補正。h1の既定font-sizeが2emのため、タグをdivに変えると明示しない限り
   1em（16px相当）に縮み、ヘッダー高さが約11px縮小する（13_訪問診療最終監査セッションで実測確認）。
   TOP（h1のまま）ではこの指定は値として同じになるため見た目への影響はない。 */
.header-logo { margin: 0; line-height: 1.6; font-size: 2em; }
.header-logo a { display: block; }
.header-logo img { height: 40px; width: auto; vertical-align: bottom; }

.nav-list {
	display: flex;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-list a {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	transition: color 0.3s ease;
}
.nav-list a:hover { color: #f8a538; }

/* 2026-10-09 下線修正：TOP（body.frontpage）は frontpage.css の
   body.frontpage a{text-decoration:none} でヘッダーを含む全リンクの下線が
   既に消えているが、下層ページには同等の指定が無く、ブラウザ既定の下線が
   .nav-list a に表示されていた（通常・hover・focus・visited・active の
   全状態がブラウザ既定のtext-decoration:underlineを共有しているため、
   このプロパティ1行で全状態に効く）。.header .nav-list a に限定し、
   本文中のリンク（a{color:...}のみでtext-decorationは無指定のまま）には
   影響させない。 */
.header .nav-list a { text-decoration: none; }

/* ハンバーガーメニュー */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 30px;
	height: 22px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1001;
}
.hamburger-line {
	display: block;
	width: 100%;
	height: 3px;
	background-color: #333333;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* 2026-10-09 訪問診療リンク追加：7項目（「訪問診療のレセプト代行について」追加）になった
   ことで、PC幅のインライン表示ではnav-listの折り返し・ロゴの圧縮（flex-shrinkにより
   .header-logoも一緒に縮む）が発生することを実測で確認したため、ハンバーガーメニューへの
   切替幅を768pxから変更した。
   初回修正時は1024pxへ変更したが、依頼文の離散幅リスト（1440/1280/1200/1024/900/769px）の
   「間」である1025〜1167px帯を見落としており、この帯域では切替前のまま折り返し・ロゴ圧縮が
   残っていた（logoとnavの隙間が1200px時点の31.78pxから1pxずつ減り、1168px未満で0になって
   flex-shrinkが発生する実測構造。iPad横向き1080px/1180px相当が直撃する）。
   .header-innerの max-width:1200px（下記.header-inner定義）と同じ1200pxへ切替幅を揃えることで、
   1200px以上では常にheader-inner幅が1200pxに固定され、logo110px+nav自然幅1018px+左右padding40pxに
   対して余白32pxが一定して確保される設計にし、1200px未満は全てハンバーガー表示に統一した
   （15_ヘッダー訪問診療リンク追加_20261009 参照）。 */
@media (max-width: 1200px) {
	.header-inner {
		flex-direction: row;
		justify-content: space-between;
	}
	.hamburger { display: flex; }
	.header-nav {
		position: fixed;
		top: 70px;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease, padding 0.3s ease;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	/* max-height: 460pxは、7項目合計の実測navScrollHeight（下層ページで最大423px、TOPで413px）
	   に対して十分な余裕を持たせた値。400pxのままだと7項目目がmax-heightで切れて
	   タップできなくなることを実測で確認した（15_ヘッダー訪問診療リンク追加_20261009 参照）。 */
	.header-nav.active {
		max-height: 460px;
		padding: 20px 0;
	}
	.nav-list {
		flex-direction: column;
		align-items: center;
		gap: 0;
	}
	.nav-list li { width: 100%; text-align: center; }
	.nav-list a {
		display: block;
		padding: 15px 20px;
		border-bottom: 1px solid #eee;
	}
	.nav-list li:last-child a { border-bottom: none; }
}

/* 2026-10-09 ヘッダー統一：.header が position:fixed になったため、
   下層ページ（TOP以外）側にヘッダー高さ分の上余白を確保する。
   TOP（body.frontpage）は frontpage.css 側の .hero{padding-top:70px} で
   既に同じ70pxを確保しているため対象から除外する（二重確保を避ける）。 */
body:not(.frontpage) { padding-top: 70px; }

/* --- L-01: page-header --- */
.page-header {
	background: #f7f7f7;
	padding: 32px 0;
	text-align: center;
}
.page-header-title { margin: 0; font-size: 1.6em; }

/* --- L-02: パンくず --- */
.breadcrumb { padding: 12px 0; font-size: 0.85em; }
.breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.breadcrumb-list__item:not(:last-child)::after { content: "/"; margin-left: 6px; color: #999; }
.breadcrumb-list__item a { color: #666; text-decoration: none; }
.breadcrumb-list__item--home i { margin-right: 4px; }

/* --- main / サイドバー --- */
.site-body { padding: 40px 0; }
.site-body-container { display: flex; gap: 40px; align-items: flex-start; }
.main-section { flex: 1 1 auto; min-width: 0; }
.sidebar { flex: 0 0 300px; }
@media (max-width: 900px) {
	.site-body-container { flex-direction: column; }
	/*
	 * FIX-01c（Phase 4B Fix Cycle 1, medisapo 1.0.2。ChatGPT追加承認済み）：
	 * flex-directionをcolumnへ切り替えると、align-items（cross軸の揃え方）の軸も
	 * 垂直→水平へ回転する。PC用に設定していた.site-body-containerのalign-items:
	 * flex-start宣言（2カラムの上端を揃える目的）がそのまま残っていたため、SPでは
	 * .main-sectionが「幅いっぱいに広がる（stretch）」のではなく「自身のコンテン
	 * ツの最大幅に縮小する（flex-start）」挙動になり、コンテンツ由来の最大幅が
	 * そのままビューポート幅を超えて横はみ出す原因になっていた（STG実機でのCSS
	 * 注入テストで実証。この1行のみでは10ページ中5ページがscrollWidth<=clientWidth
	 * を満たし、FIX-01・FIX-01bの他ルールと合わせて初めて10/10になることを確認済み。
	 * 単独で全件解消するわけではない）。
	 * このルールを含むFIX-01b/cはPhase 4B Fix Cycle 1承認時点のChatGPT指示
	 * （img{max-width:100%;height:auto}の1行のみ）を超える追加対応だが、
	 * PHASE_4B_FIX_CYCLE_1_FIX01_EXTENSION = APPROVEDにより1.0.2へ実装確定。
	 */
	.site-body-container { align-items: stretch; }
	.sidebar { flex-basis: auto; width: 100%; }
}

/* --- L-15: entry-meta --- */
.entry-header { margin-bottom: 24px; }
.entry-title { font-size: 1.6em; margin: 0 0 12px; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.85em; color: #666; align-items: center; }
.entry-meta-item i { margin-right: 4px; }
.entry-meta-item-author-image img { width: 24px; height: 24px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }

/* --- L-16: next-prev --- */
.vk_posts.next-prev { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
@media (max-width: 600px) { .vk_posts.next-prev { grid-template-columns: 1fr; } }
.vk_posts.next-prev .card { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.vk_posts.next-prev .card-intext-inner { display: block; text-decoration: none; color: inherit; }
.vk_post_imgOuter { position: relative; aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.vk_post_imgOuter_singleTermLabel {
	position: absolute; top: 8px; left: 8px;
	background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7em; padding: 2px 8px; border-radius: 3px;
}
.vk_post_imgOuter_img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vk_post_body { padding: 16px; }
.vk_post_title { font-size: 1em; margin: 0 0 8px; }
.vk_post_date { font-size: 0.8em; color: #999; }

/* --- L-17: entry-footer（カテゴリー・タグ） --- */
.entry-footer { margin-top: 32px; border-top: 1px solid #eee; padding-top: 16px; }
.entry-meta-data-list dl { display: flex; gap: 8px; margin: 0 0 8px; }
.entry-meta-data-list dt { font-weight: bold; }
.entry-meta-data-list dd { margin: 0; }

/* --- アーカイブ一覧カード --- */
.archive-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.archive-post-list .vk_post { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }

/* --- L-04/L-19: サイトフッター --- */
.site-footer { background: #f5f5f5; margin-top: 60px; padding: 40px 0 0; }
.site-footer-content .medisapo-row { display: flex; flex-wrap: wrap; }
.site-footer-content .medisapo-col-4 { flex: 1 1 33.33%; padding: 0 16px 24px; }
.site-footer-copyright { text-align: center; padding: 20px 0; border-top: 1px solid #e0e0e0; font-size: 0.85em; }
.site-footer-copyright p { margin: 4px 0; }

.widget-title { font-size: 1em; margin: 0 0 12px; }

.skip-link.screen-reader-text {
	position: absolute; left: -9999px; top: 0;
}
.skip-link.screen-reader-text:focus {
	left: 0; background: #fff; padding: 8px 16px; z-index: 1000;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* --- スマホ用固定フッターCTA（1.0.3で追加） --- */
.medisapo-sp-fixed-footer { display: none; }
@media (max-width: 600px) {
	.medisapo-sp-fixed-footer {
		display: block;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9990;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
	}
	/* 背景・文字色はTOPの .hero-btn（お問い合わせはこちら）と同じ配色に合わせる
	   （frontpage.css --main-orange/--white はTOP専用CSSのためbase.css側では値を直書き）。
	   colorに!important必須：TOPページには frontpage.css の `body.frontpage a { color: inherit; }`
	   があり、これがclass単体セレクタより詳細度が高く白指定を上書きしてしまう（TOPページでのみ再現）。 */
	.medisapo-sp-fixed-footer-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		height: 52px;
		border-radius: 0;
		background: #f8a538;
		color: #ffffff !important;
		font-weight: bold;
		font-size: 15px;
		text-decoration: none;
	}
	/* 固定フッターの分だけ、コンテンツ末尾が隠れないよう余白を確保する。
	   バー52px＋24pxのクリアランス。TOP（body.frontpage）はfrontpage.css側の
	   `body.frontpage{padding:0}`（詳細度0-1-1）に負けるため、同じ値をfrontpage.css末尾でも指定している。 */
	/* 1.1.5：固定CTAを出さないページ（body.medisapo-no-fixed-cta、現在は/contact/のみ）では
	   この余白もページトップボタンの退避も外し、テーマ外CSSの既定位置へ戻す。 */
	body:not(.medisapo-no-fixed-cta) { padding-bottom: 76px; }
	/* サイト共通の「ページトップに戻る」ボタン（.page_top_btn、本テーマ外由来・z-index:99999）が
	   このバーに重なるため、SPのみ位置を上へ逃がす。STG実機確認で重なりがないか要確認。 */
	body:not(.medisapo-no-fixed-cta) .page_top_btn { bottom: 84px !important; }

	/* --- 1.1.4: SP通常フッターを1カラム・左揃えにする ---
	   footer.phpは3つのウィジェットエリアを .medisapo-col-4（flex:1 1 33.33%）で並べるが、
	   実際に中身があるのは2番目だけ。SPでもflexのまま3分割されるため、左側175pxが空いたまま
	   会社情報が右へ寄っていた。SPではrowをblockにして各カラムを幅100%・padding0にする。
	   中身が空のカラムはpaddingを持たないので高さ0になり、余分な空白も出ない。
	   PC（601px以上）のレイアウトはこのメディアクエリの外にあるので影響しない。 */
	.site-footer { padding: 32px 0 0; }
	.site-footer-content .medisapo-row {
		display: block;
		padding-bottom: 24px;
	}
	.site-footer-content .medisapo-col-4 {
		width: 100%;
		padding: 0;
		text-align: left;
	}
	.site-footer-content .widget { margin-bottom: 20px; }
	.site-footer-content .widget:last-child { margin-bottom: 0; }
}

/* --- PC用固定CTA（右端・丸型アイコンボタン） ---
   1.1.4では幅300pxの横長ボタンだったが、本文幅1140px（TOPは1160px）中央寄せのレイアウトでは
   右余白が (vw-本文幅)/2 しかなく、1280〜1440pxで本文テキストやリンクに最大264px重なっていた
   （Batch 2.1の交差監査で実測）。1.1.6で48px丸型へ変更し、右余白に完全に収める。

   表示条件（最終仕様）：
     〜600px      … SP全幅バー（.medisapo-sp-fixed-footer）
     601〜1279px  … 固定CTAなし（右余白が48pxに満たず本文へ重なるため）
     1280px〜     … この丸型CTA
     /contact/    … 全幅で非表示（body.medisapo-no-fixed-cta）

   右余白の計算（TOPが最も厳しい。本文1160px中央寄せ）：
     CTA左端 = W - right - 48 、 本文右端 = (W + 1160) / 2   ※Wはレイアウト幅
     交差しない条件 → W ≥ 1160 + 2*right + 96
   right:8px だとW≥1272で、ビューポート1280pxちょうど・スクロールバーなしなら余裕4pxしかない。
   クラシックスクロールバー（幅15px前後）の環境ではメディアクエリは1280pxを満たす一方
   レイアウト幅は1265px程度まで縮み、8pxでは本文へ数px重なる。
   そのため **right:4px**（W≥1264で成立）とし、1280px環境のスクロールバー有無を吸収する。
   right を広げると1280pxでTOP本文に重なるので広げないこと。

   .medisapo-pc-fixed-cta-btn 側の指定は必ず2クラス（詳細度0-2-0）で書くこと：
   TOPには frontpage.css の `body.frontpage *{margin:0;padding:0}`（0-1-1）があり、
   1クラス指定ではpaddingを潰される。colorの!importantも同ファイルの
   `body.frontpage a{color:inherit}` 対策でSPバーと同じ理由。 */
.medisapo-pc-fixed-cta { display: none; }
@media (min-width: 1280px) {
	.medisapo-pc-fixed-cta {
		display: block;
		position: fixed;
		right: 4px;
		bottom: 24px;
		z-index: 9990;
	}
	.medisapo-pc-fixed-cta .medisapo-pc-fixed-cta-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border-radius: 50%;
		background: #f8a538;
		color: #ffffff !important;
		font-size: 18px;
		line-height: 1;
		text-decoration: none;
		box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	}
	.medisapo-pc-fixed-cta .medisapo-pc-fixed-cta-btn:hover,
	.medisapo-pc-fixed-cta .medisapo-pc-fixed-cta-btn:focus {
		background: #e8912a;
	}
	/* ページトップボタン（既定 bottom:27px）が丸型CTAと重なるため、縦に並ぶよう上へ逃がす。
	   CTAは bottom24〜72px を占めるので、その上の92pxへ置く（間隔20px）。
	   固定CTAを出さないページ（/contact/）では退避も不要なので既定位置へ戻す。 */
	body:not(.medisapo-no-fixed-cta) .page_top_btn { bottom: 92px !important; }
}