/*
 * 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: サイトヘッダー／グローバルナビ --- */
.site-header {
	background: #fff;
	border-bottom: 1px solid #eee;
}
.site-header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 70px;
}
.site-header-logo img { max-height: 48px; width: auto; }
.global-nav-list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 24px;
}
.global-nav-list li a {
	text-decoration: none;
	color: #222;
	font-weight: bold;
}
.global-nav-list li.current-menu-item a,
.global-nav-list li a:hover { color: var(--medisapo-color-key); }

.medisapo-nav-trigger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}
.medisapo-nav-trigger-bar,
.medisapo-nav-trigger-bar::before,
.medisapo-nav-trigger-bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: #222;
	position: relative;
	transition: 0.2s;
}
.medisapo-nav-trigger-bar::before { content: ""; position: absolute; top: -8px; }
.medisapo-nav-trigger-bar::after { content: ""; position: absolute; top: 8px; }

/* --- L-05: VKモバイルナビ相当 --- */
.vk-mobile-nav {
	display: none;
	background: #fff;
	border-top: 1px solid #eee;
}
.vk-mobile-nav.is-open { display: block; }
.vk-mobile-nav-menu-outer ul { list-style: none; margin: 0; padding: 0; }
.vk-mobile-nav-menu-outer li a {
	display: block;
	padding: 14px 20px;
	border-bottom: 1px solid #f0f0f0;
	text-decoration: none;
	color: #222;
}

@media (max-width: 1024px) {
	.global-nav { display: none; }
	.medisapo-nav-trigger { display: inline-flex; align-items: center; justify-content: center; }
}

/* --- 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; }
}