/*
Theme Name: Lightning Child（キャリアメディカル）
Template: lightning
Description: キャリアメディカル用の Lightning 子テーマ。色・文字・見出し・ボタンを docs/design-rules.md のルールに合わせて統一する。
Version: 0.2.2
Author: キャリアメディカル
Text Domain: lightning-child
*/

/* ==========================================================================
   このファイルについて
   - 親テーマ Lightning（G2モード / デザインスキン origin2）の見た目を上書きします。
   - 色・大きさは docs/design-rules.md に合わせています。
     ルールにない色を書くと、tools/check-theme.ps1 のチェックで NG になります。
   - 「!important」は、ブロックエディターで個別に付けた色（黒い帯や青いボタンなど）を
     打ち消すときだけ使っています。個別の色指定は WordPress 側で強く設定されているため、
     !important を付けないと上書きできません。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 色の変数
   -------------------------------------------------------------------------- */

/* 「html:root」と書くのは、Lightning がカスタマイズ画面の設定から出力する
   「:root { --vk-color-primary: … }」よりも優先させるため（指定の強さが一段上がる）。 */
html:root {
	/* デザインルールの色に名前を付けておく（色を変えるときは、ここだけ直せばよい） */
	--cm-primary: #2E5A4C;      /* メインカラー（深緑） */
	--cm-primary-dark: #1F3F35; /* マウスを乗せたときの濃い深緑 */
	--cm-accent: #B8936A;       /* 差し色（飾りの線だけに使う） */
	--cm-bg: #FBF9F4;           /* 背景（生成り） */
	--cm-bg-sub: #F1EDE4;       /* 背景（少し濃い生成り） */
	--cm-white: #FFFFFF;        /* カード・ヘッダー */
	--cm-text: #1F2328;         /* 本文の文字 */
	--cm-text-body: #3A4048;    /* 説明文の文字 */
	--cm-text-muted: #545B64;   /* 補足の小さな文字 */
	--cm-border: #E3E6EA;       /* 区切り線・枠線 */

	/* Lightning / VK Blocks が使う「キーカラー」も深緑にそろえる。
	   メニューの下線やブロックの初期色など、テーマ全体の青が緑に変わる。
	   ※カスタマイズ画面のキーカラーも #2E5A4C にしておくと、より確実です。 */
	--vk-color-primary: var(--cm-primary);
	--vk-color-primary-dark: var(--cm-primary-dark);
	--vk-color-primary-vivid: var(--cm-primary);
	--wp--preset--color--vk-color-primary: var(--cm-primary);
	--vk-color-text-body: var(--cm-text);
}


/* --------------------------------------------------------------------------
   2. ページ全体（背景・文字・リンク）
   -------------------------------------------------------------------------- */

body {
	background-color: var(--cm-bg);
	color: var(--cm-text);
	/* Noto Sans JP は functions.php で読み込んでいる。読み込めなかったときは端末の標準フォントで表示 */
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	line-height: 1.8;
	letter-spacing: 0.02em;
}

a {
	color: var(--cm-primary);
}

a:hover,
a:focus {
	color: var(--cm-primary-dark);
}

/* キーボード操作のとき、今どこを選んでいるかが分かるように枠を出す */
a:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--cm-primary);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   3. ヘッダー（ロゴ・メニュー）
   -------------------------------------------------------------------------- */

.siteHeader {
	background-color: var(--cm-white);
	border-bottom: 1px solid var(--cm-border);
	box-shadow: none;
}

.gMenu > li > a {
	color: var(--cm-text);
}

.gMenu > li > a:hover {
	color: var(--cm-primary);
}


/* --------------------------------------------------------------------------
   4. 記事・固定ページの上のタイトル帯（今は青い帯）
   -------------------------------------------------------------------------- */

/* 青ベタの帯をやめ、少し濃い生成りの背景＋深緑の文字にする */
.page-header {
	background-color: var(--cm-bg-sub);
	color: var(--cm-primary);
	border-bottom: 1px solid var(--cm-border);
}

.page-header h1,
.page-header .page-header_pageTitle {
	color: var(--cm-primary);
	text-shadow: none;
	font-weight: 700;
}

/* パンくずリスト（「ホーム > お知らせ > …」の部分） */
.breadSection {
	background-color: var(--cm-bg);
}


/* --------------------------------------------------------------------------
   5. 本文の見出し
   -------------------------------------------------------------------------- */

/* 黒い帯の見出し（VK Blocks の「solid_black」スタイル）を、
   デザインルールの見出し（大きめの文字＋下に短い差し色の線）に置き換える。
   ブロック側で付けた「黒背景・白文字」を打ち消すため !important が必要。
   ※文字の大きさは rem ではなく px で指定する。Lightning は基準の文字サイズが 14px のため、
     rem だとデザインルールより小さくなってしまう。 */
.entry-body h2.is-style-vk-heading-solid_black {
	position: relative;
	margin-top: 3rem;
	margin-bottom: 2rem;
	/* 左右の 16px は、画面いっぱいに広がる見出し（全幅）で文字が端にくっつく・はみ出すのを防ぐため */
	padding: 0 16px 0.75em !important;
	border: none;
	background-color: transparent !important;
	color: var(--cm-text) !important;
	font-size: 30px !important;
	font-weight: 700;
	line-height: 1.5;
}

/* 見出しの下の短い線（幅40px・太さ3px・差し色） */
.entry-body h2.is-style-vk-heading-solid_black::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 40px;
	height: 3px;
	margin-left: -20px;
	background-color: var(--cm-accent);
}

/* 中央寄せでない見出しは、線を文字の左端（左の余白 16px の位置）にそろえる */
.entry-body h2.is-style-vk-heading-solid_black:not(.has-text-align-center)::after {
	left: 16px;
	margin-left: 0;
}

/* 黒い二重線の見出し（VK Blocks の「double_～_black」スタイル）は、線を深緑に・文字を本文色にする */
.entry-body [class*="is-style-vk-heading-double"] {
	border-color: var(--cm-primary) !important;
	color: var(--cm-text) !important;
}

.entry-body [class*="is-style-vk-heading-double"]::before,
.entry-body [class*="is-style-vk-heading-double"]::after {
	border-color: var(--cm-primary) !important;
}

/* サイドバーの見出しの下線を深緑に */
.subSection-title {
	border-bottom: 2px solid var(--cm-primary);
}


/* --------------------------------------------------------------------------
   6. ボタン
   -------------------------------------------------------------------------- */

/* メインのボタン: 深緑の背景＋白文字、角丸 4px。
   ブロックごとに付けた青い背景色を打ち消すため !important が必要。 */
.wp-block-button__link,
.btn-primary {
	padding: 0.8em 2em;
	border: 1px solid var(--cm-primary) !important;
	border-radius: 4px !important;
	background-color: var(--cm-primary) !important;
	color: var(--cm-white) !important;
	font-weight: 700;
	transition: background-color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.btn-primary:hover,
.btn-primary:focus {
	border-color: var(--cm-primary-dark) !important;
	background-color: var(--cm-primary-dark) !important;
	color: var(--cm-white) !important;
}

/* サブのボタン: 白の背景＋深緑の枠線と文字。
   ・ボタンブロックのスタイルで「アウトライン」を選んだもの
   ・今のトップページにある水色のボタン（黒文字のもの）
     → フェーズ3でトップページを作り直したら、2つ目の指定は不要になる */
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.has-black-color {
	background-color: var(--cm-white) !important;
	color: var(--cm-primary) !important;
}

.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus,
.wp-block-button__link.has-black-color:hover,
.wp-block-button__link.has-black-color:focus {
	background-color: var(--cm-bg-sub) !important;
	color: var(--cm-primary-dark) !important;
}


/* --------------------------------------------------------------------------
   7. 最新の投稿の一覧
   -------------------------------------------------------------------------- */

.wp-block-latest-posts__list a {
	color: var(--cm-text);
	text-decoration: none;
}

.wp-block-latest-posts__list a:hover {
	color: var(--cm-primary);
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   8. フッター
   -------------------------------------------------------------------------- */

.siteFooter {
	border-top: 1px solid var(--cm-border);
	background-color: var(--cm-bg-sub);
	color: var(--cm-text-muted);
}

.siteFooter a {
	color: var(--cm-text);
}

.siteFooter a:hover {
	color: var(--cm-primary);
}

.copySection {
	color: var(--cm-text-muted);
}


/* --------------------------------------------------------------------------
   9. スマホ（画面の幅が 767px 以下）
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	/* 見出しが大きすぎて何行にも折り返さないよう、少し小さくする */
	.entry-body h2.is-style-vk-heading-solid_black {
		margin-top: 2rem;
		margin-bottom: 1.5rem;
		font-size: 24px !important;
	}
}


/* ==========================================================================
   10. トップページ用の部品（pages/top.html で使う「cm-○○」）
   - ページ側には色や余白を書かず、ここでまとめて指定する。
   - ブロックエディターの「高度な設定 → 追加 CSS クラス」に cm-○○ を書くと、
     ほかのページでも同じ見た目を使える。
   ========================================================================== */

/* ---- 10-1. セクション（横いっぱいの帯）と中身の幅 ---- */

/* トップに cm-hero があるページは、ヘッダーとの間のすき間をなくす
   （:has() は「中に○○を含む」という指定。古いブラウザではすき間が残るだけで崩れはしない） */
.siteContent:has(.cm-hero) {
	padding-top: 0;
}

.entry-body .cm-section {
	margin-top: 0;
	margin-bottom: 0;
	padding: 96px 16px;
}

/* 背景を交互に変えるための「少し濃い生成り」 */
.entry-body .cm-section--sub {
	background-color: var(--cm-bg-sub);
}

/* 中身は最大 1120px で中央に置く */
.entry-body .cm-inner {
	max-width: 1120px;
	margin-right: auto;
	margin-left: auto;
}

/* ---- 10-2. 見出しのセット（英語ラベル＋日本語見出し＋短い線） ---- */

.entry-body .cm-label {
	margin: 0;
	color: var(--cm-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-align: center;
}

/* Lightning の見出しの飾り（上下の線など）を消してから、ルールの形にする */
.entry-body h2.cm-heading,
.entry-body h2.cm-hero__title,
.entry-body h2.cm-cta__title,
.entry-body h3.cm-card__title {
	position: relative;
	border: none;
	background: none;
	box-shadow: none;
}

.entry-body h2.cm-heading::before,
.entry-body h2.cm-hero__title::before,
.entry-body h2.cm-cta__title::before,
.entry-body h2.cm-cta__title::after,
.entry-body h3.cm-card__title::before,
.entry-body h3.cm-card__title::after {
	display: none;
}

.entry-body h2.cm-heading {
	margin: 8px 0 48px;
	padding: 0 0 16px;
	color: var(--cm-text);
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
}

/* 見出しの下の短い線（幅40px・太さ3px・差し色） */
.entry-body h2.cm-heading::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 40px;
	height: 3px;
	margin-left: -20px;
	border: none;
	background-color: var(--cm-accent);
}

/* 左寄せ版（プロフィール欄など） */
.entry-body .cm-label--left,
.entry-body h2.cm-heading--left {
	text-align: left;
}

.entry-body h2.cm-heading--left {
	margin-bottom: 24px;
}

.entry-body h2.cm-heading--left::after {
	left: 0;
	margin-left: 0;
}

/* ---- 10-3. メインビジュアル ---- */

.entry-body .cm-hero {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: var(--cm-bg-sub);
}

.wp-block-columns.cm-hero__columns {
	align-items: center;
	gap: 48px;
}

.entry-body .cm-eyebrow {
	margin: 0 0 16px;
	color: var(--cm-primary);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.entry-body h2.cm-hero__title {
	margin: 0 0 24px;
	padding: 0 0 24px;
	color: var(--cm-primary);
	font-size: 44px;
	line-height: 1.4;
}

/* 大見出しの下の線（幅56px） */
.entry-body h2.cm-hero__title::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 56px;
	height: 3px;
	border: none;
	background-color: var(--cm-accent);
}

.entry-body .cm-hero__lead {
	margin: 0 0 36px;
	color: var(--cm-text-body);
	font-size: 17px;
}

/* 写真は枠いっぱいに表示し、顔が切れないよう上を基準にする */
.entry-body .cm-hero__photo,
.entry-body .cm-profile__photo {
	margin: 0;
}

/* 縦横比を 3:4（縦長）に固定し、幅も最大 340px に抑える。
   高さだけを決めると、横に広い画面で写真が大きく切り取られ、顔のアップになってしまうため。
   340px は、見出しや文章とのバランスを見てユーザーと決めた大きさ（2026-11-03） */
.entry-body .cm-hero__photo img {
	display: block;
	width: 100%;
	max-width: 340px;
	height: auto;
	margin-left: auto;
	border-radius: 8px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
}

/* ボタンを横に並べるときの間隔 */
.wp-block-buttons.cm-buttons {
	gap: 16px;
}

.wp-block-buttons.cm-buttons--center {
	justify-content: center;
	margin-top: 36px;
}

/* ---- 10-4. 実績の数字 ---- */

.entry-body .cm-stats {
	padding-top: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--cm-border);
}

.entry-body .cm-stat__num {
	margin: 0;
	color: var(--cm-primary);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

.entry-body .cm-stat__label {
	margin: 4px 0 0;
	color: var(--cm-text-muted);
	font-size: 14px;
	text-align: center;
}

/* ---- 10-5. カード（お悩み・サービス・はじめての方へ） ---- */

/* カードが増えたら自動で折り返す（WordPress 標準では横一列に詰まるため !important で上書き） */
.wp-block-columns.cm-cards {
	flex-wrap: wrap !important;
	gap: 32px;
}

.wp-block-columns.cm-cards > .wp-block-column {
	flex: 1 1 300px;
	margin: 0;
}

.entry-body .cm-card {
	box-sizing: border-box;
	padding: 40px;
	border: 1px solid var(--cm-border);
	border-radius: 8px;
	background-color: var(--cm-white);
}

.entry-body h3.cm-card__title {
	margin: 0 0 20px;
	padding: 0;
	color: var(--cm-primary);
	font-size: 20px;
	font-weight: 700;
}

.entry-body .cm-card__text {
	margin: 0;
	color: var(--cm-text-body);
}

/* チェックマーク付きのリスト（お悩み） */
.entry-body ul.cm-checklist,
.entry-body ul.cm-linklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-body ul.cm-checklist li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 32px;
	list-style: none;
}

/* チェックマークは画像を使わず、線を2本組み合わせて描く */
.entry-body ul.cm-checklist li::before {
	content: "";
	position: absolute;
	top: 0.35em;
	left: 6px;
	width: 7px;
	height: 13px;
	border: solid var(--cm-primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* 詳細ページへのリンク一覧（サービス） */
.entry-body ul.cm-linklist {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--cm-border);
}

.entry-body ul.cm-linklist li {
	margin: 0 0 8px;
	list-style: none;
}

.entry-body ul.cm-linklist a,
.entry-body .cm-card--link a,
.entry-body .cm-more a {
	font-weight: 700;
	text-decoration: none;
}

.entry-body ul.cm-linklist a::after,
.entry-body .cm-card--link a::after,
.entry-body .cm-more a::after {
	content: " →";
}

.entry-body ul.cm-linklist a:hover,
.entry-body .cm-card--link a:hover,
.entry-body .cm-more a:hover {
	text-decoration: underline;
}

/* 文字リンクだけのカード（はじめての方へ） */
.entry-body .cm-card--link {
	padding: 28px;
}

.entry-body .cm-card--link p {
	margin: 0;
}

/* ---- 10-6. ごあいさつ（プロフィール） ---- */

.wp-block-columns.cm-profile {
	align-items: center;
	gap: 56px;
}

/* パソコン幅では、写真の欄を 260px に固定する（何もしないと文章の欄と半分ずつになり、写真が大きくなりすぎる） */
@media (min-width: 782px) {
	.wp-block-columns.cm-profile > .cm-profile__media {
		flex: 0 0 260px;
	}
}

.entry-body .cm-profile__photo img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	border-radius: 8px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center top;
}

.entry-body .cm-profile__role {
	margin: 0 0 4px;
	color: var(--cm-text-muted);
	font-size: 14px;
}

.entry-body .cm-profile__name {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
}

.entry-body .cm-more {
	margin-top: 28px;
}

/* ---- 10-7. お知らせ・コラム（最新の投稿） ---- */

.entry-body ul.cm-news {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--cm-border);
	list-style: none;
}

.entry-body ul.cm-news li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 24px;
	margin: 0;
	padding: 20px 8px;
	border-bottom: 1px solid var(--cm-border);
	list-style: none;
}

/* 日付を題名の前に出す */
.entry-body ul.cm-news .wp-block-latest-posts__post-date {
	order: -1;
	min-width: 7em;
	color: var(--cm-text-muted);
	font-size: 14px;
}

/* ---- 10-8. お問い合わせへの案内（深緑の帯） ---- */

.entry-body .cm-cta {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: var(--cm-primary);
	color: var(--cm-white);
	text-align: center;
}

.entry-body h2.cm-cta__title {
	margin: 0 0 16px;
	padding: 0;
	color: var(--cm-white);
	font-size: 30px;
	line-height: 1.5;
	text-align: center;
}

.entry-body .cm-cta__text {
	max-width: 640px;
	margin: 0 auto;
	color: var(--cm-white);
}

/* 深緑の帯の上では、ボタンを白にする */
.cm-cta .wp-block-button__link {
	border-color: var(--cm-white) !important;
	background-color: var(--cm-white) !important;
	color: var(--cm-primary) !important;
}

.cm-cta .wp-block-button__link:hover,
.cm-cta .wp-block-button__link:focus {
	border-color: var(--cm-bg-sub) !important;
	background-color: var(--cm-bg-sub) !important;
	color: var(--cm-primary-dark) !important;
}

/* ---- 10-9. トップページでは SNS シェアボタンを出さない ---- */

/* VK ExUnit が本文の下に自動で付ける SNS ボタンは、各社の色（青や黒）で目立ちすぎるため、
   cm-hero があるページ（トップページ）だけ非表示にする。ブログ記事には今までどおり表示される。 */
.entry-body:has(.cm-hero) .veu_socialSet {
	display: none;
}

/* ---- 10-10. スマホ・タブレット（WordPress のカラムが縦に並ぶ 781px 以下） ---- */

@media (max-width: 781px) {
	.entry-body .cm-section {
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.entry-body .cm-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.entry-body h2.cm-hero__title {
		font-size: 30px;
	}

	.entry-body h2.cm-heading,
	.entry-body h2.cm-cta__title {
		margin-bottom: 32px;
		font-size: 24px;
	}

	.entry-body h2.cm-cta__title {
		margin-bottom: 16px;
	}

	/* スマホでは写真を少し小さくして、中央に置く */
	.entry-body .cm-hero__photo img {
		max-width: 280px;
		margin-right: auto;
	}

	.entry-body .cm-profile__photo img {
		max-width: 240px;
		margin-right: auto;
		margin-left: auto;
	}

	.entry-body .cm-card {
		padding: 28px;
	}
}