@charset "utf-8";
/**
 * WordPress組み込み用の打ち消しCSS
 *
 * デザイナー版モックのCSS（style.css / subpages.css）は一切変更せず、
 * 「既存テーマのCSSが新デザインのマークアップに当たってしまう分」だけをここで打ち消す。
 * モックが更新されても、このファイルは影響を受けない。
 *
 * ── なぜ必要か ────────────────────────────────
 * クラス名は kf- 接頭辞を付けて衝突ゼロにしたが、既存テーマ project.css には
 * 「要素セレクタ」での指定が残っており、そちらはクラス名では回避できない。
 *   header  { position: fixed; height: 88px; z-index: 10000; }
 *   section { min-height: 600px; background: rgba(255,240,192,.3); }
 * 新デザインは <header class="section-heading"> をセクション見出しに使うため、
 * 前者により全ての見出しが画面最上部に重なって固定されてしまう。
 *
 * ── 適用範囲 ────────────────────────────────
 * 新テンプレートのコンテンツ領域 #main-content の内側だけに限定する。
 * サイト共通ヘッダー(.kf-header)と、お知らせ・導入事例など既存ページの
 * レイアウトには影響させない（「現状ママ」を守るため）。
 */

/**
 * ★打ち消しは必要最小限にとどめること。
 *   ここは #main-content（id）を含むため詳細度が高く、
 *   書きすぎるとデザイナー側CSSのクラス指定（.section-band--pale 等）に勝ってしまい、
 *   背景や幅を意図せず潰す。実際に background/width を入れて背景が消える事故を起こした。
 *   → 旧CSSが有害に設定している値だけを、狙って戻す。
 */

/*
 * 見出し用の <header> に旧サイトヘッダーの指定が当たるのを解除。
 * 旧 project.css の該当ルールは以下（width と display は新デザイン側と競合しうるため触らない）:
 *   header { position:fixed; top:0; left:0; display:block; width:100%;
 *            height:88px; z-index:10000; min-width:1180px; background:#FFF; }
 * デザイナー側は .section-heading / .subpage-heading に背景を指定していないため、
 * background は透明へ戻すのが正しい（白のままだと見出しだけ白帯になる）。
 */
#main-content header {
	position: static;
	top: auto;
	left: auto;
	height: auto;
	min-width: 0;
	z-index: auto;
	background: transparent;
}

/*
 * 補足: project.css 冒頭の section{min-height:600px} は実際にはコメントアウト済みで無効だった。
 * 下層ページの padding 潰れは body:not(#frontpage) section{padding:40px 0 0} が原因で、
 * こちらは project.css 側に :not(.subpage) を足して範囲を狭めることで解消している
 * （打ち消しCSSで値を二重管理しないため）。
 */

/**
 * サイト共通ヘッダー（#main-content の外側）への打ち消し
 *
 * 旧 project.css の `header { min-width: 1170px; }` が新ヘッダーにも当たり、
 * タブレット幅(768px)で body ごと横スクロールが発生していた。
 * 新デザインはレスポンシブなので下限幅は不要。
 */
.kf-header {
	min-width: 0;
}

/**
 * 新デザイン3ページ（TOP／サービス紹介／改善ナレッジ）の body 打ち消し
 *
 * 旧 project.css は `body { min-width: 1170px; padding-top: 88px; }` を指定している。
 * 旧サイトは1170px固定幅・固定ヘッダー分を押し下げる設計だったため。
 * 新デザインはレスポンシブで、かつコンテンツが固定ヘッダーの下に潜る前提なので両方外す。
 *
 * ★お知らせ・導入事例には .kf-renewal が付かないので影響しない（「現状ママ」を守る）。
 *   タブレット幅(768px)で body が1170pxになり横スクロールが出ていた事象の対処。
 */
body.kf-renewal {
	min-width: 0;
	padding-top: 0;
}

/**
 * 「現状ママ」ページのヘッダー押し下げが二重になるのを解消（-119）
 *
 * 固定ヘッダー分の押し下げは、新デザインの `main { padding-top: var(--header-height) }`
 * （style.css）が既に持っている。そこへ旧 project.css の `body { padding-top: 88px }` が
 * 加算され、お知らせ・導入事例ではヘッダー下端とパンくずの間に 88px の空白ができていた
 * （実測: header bottom=88px / .bread-list top=176px）。
 * .kf-renewal が付く3ページは上で body を 0 にしているため元から正常。
 * ここでは付かない側の body 側を落とし、押し下げを main の1回だけにする。
 */
body:not(.kf-renewal) {
	padding-top: 0;
}

/**
 * 「現状ママ」ページの基準フォントを現行サイトへ戻す（-139 お知らせ / -140 導入事例）
 *
 * デザイナー版 style.css の
 * `body { font-size:16px; font-weight:500; line-height:1.85; letter-spacing:0.045em }` が
 * 旧 project.css の `body { line-height:1.7 }` を上書きし、現行サイトと差が出ていた。
 *   現行 kaizenfarm.jp : weight 400 / line-height 1.7（16px→27.2px）/ letter-spacing normal
 *   テストサイト       : weight 500 / line-height 1.85（16px→29.6px）/ letter-spacing 0.72px
 *
 * 花尻さんの指摘値はすべて比率 1.85÷1.7＝1.088 で説明できるため、
 * 見出しごとの個別指定ではなく body の値を戻すだけで揃う。
 *   基本テキスト 27.2→29.6px(指摘30px) / 記事タイトル 54→58.8px(指摘59px)
 *   会社名 31→33.7px(指摘33px) / 見出し 44→47.9px(指摘48px)
 *
 * letter-spacing は字間が広がる差（0.045em＝16pxで0.72px）として現れる。
 * color も現行が純黒 #000 なのに対し新デザインは --ink（#151a22）で差があるため戻す
 * （body の全プロパティを現行サイトと総当たりで照合して洗い出した）。
 * font-size は両者とも16pxで差がないため触らない。
 * overflow-x:hidden は横溢れの保険として新デザイン側の指定を活かす（オーナー判断）。
 * 新デザイン側の .section-heading h2 等の個別指定はそのまま活かす。
 */
body:not(.kf-renewal) {
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	color: #000;
}

/**
 * デザイナーが個別指定していない見出しのマージン復元
 *
 * モックには全称リセットが無く、CSSを当てていない見出しは
 * ブラウザ既定のマージン（h4 なら 1.33em 上下）で表示されていた。
 * 旧 library.css の `* { margin:0; padding:0 }` が効くとこれが消える。
 *
 * 全称リセットごと外すと影響範囲が大きすぎるため、
 * 実際に差異が出た箇所だけを狙って戻す。
 * （3ページ全要素のスタイル突合で、影響を受けていたのはここだけと確認済み。
 *   サービス紹介の本文が 51px＝25.536px×2 短くなっていた原因）
 */
#main-content .service-feature-copy h4 {
	margin-top: 1.33em;
	margin-bottom: 1.33em;
}

/**
 * 下層ページヒーロー（杉山さん納品コンポーネント）の基準フォント復元
 *
 * ヒーローのCSSは、自身では基準フォントを宣言せず、ブラウザ既定
 * （16px / line-height:normal）が継承される前提で余白が組まれている。
 * WordPress側では旧テーマの body 指定が継承され、SP幅で
 *   font-size 16px → 15px, line-height normal → 27.75px
 * となり、円モチーフやコピー枠の高さがモックより 4px 高くなっていた。
 *
 * ヒーローのルート要素にだけ既定値を戻す。
 * 子要素は自前で font-size を持つため影響を受けない
 * （SP 390px で全54要素の位置・寸法を突合し、差分が解消することを確認）。
 *
 * .kf-hero  … サービス紹介
 * .kfk-hero … 改善ナレッジ（別プレフィックスの独立コンポーネント）
 */
.kf-hero,
.kfk-hero {
	font-size: 16px;
	line-height: normal;
}

/**
 * 改善ナレッジ「04_改善を仕組みへ」のフロー図画像
 *
 * 社内Backlog -102: HTML/CSS実装のフロー（.system-progress）を
 * CMC様支給の画像（3866×1169）へ差し替えたことに伴う表示ルール。
 * デザイナー側CSS（subpages.css）は静的モックとの共通ファイルのため触らず、
 * WP組み込み側のこのファイルに置く。余白は旧 .system-progress の
 * margin: 50px auto 0 を踏襲する。
 */
.system-progress-image {
	display: block;
	width: 100%;
	max-width: 880px;
	height: auto;
	margin: 50px auto 0;
}

/**
 * 改善ナレッジ 03「共通して重要なのは可視化」の図（-103）。
 * CSSで組んでいた .visualization-map を CMC様支給画像へ差し替えたため、
 * 旧ルールと同じ最大幅・中央寄せを画像側で踏襲する。
 * 上下の間隔は .visualization-panel の gap が持つので margin は左右のみ。
 */
.visualization-image {
	display: block;
	width: min(100%, 960px);
	height: auto;
	margin-inline: auto;
}

/**
 * お知らせ記事本文のリンク色（-126）。
 * 現行サイトの旧 project.css は a に color を指定しておらず、本文リンクは
 * ブラウザ既定の青で表示されていた。デザイナー版 style.css が
 * `a { color: inherit }` を持ち込んだため青が消えた回帰を戻す。
 * 対象は the_content() が出す装飾なしのリンクのみ。
 * .btn.back などクラスを持つ装飾リンクは :not([class]) で除外する。
 */
#news .article a:not([class]) {
	color: #0000ee;
}

/**
 * 導入事例カードの矢印をカード枠内の右下へ固定（-134 PC / -135 SP）
 *
 * 旧 case.css は矢印 span を .card_contents 基準の `bottom: -30px` に置いている。
 * 抜粋が短いTOPではカード内に収まるが、抜粋が長い導入事例一覧では枠外へはみ出す
 * （イオンファンタジー・ブラザー工業・新明工業）。PC・SPとも同じ原因。
 * 位置の基準を .card へ移し、矢印の居場所を padding-bottom で確保した上で右下に固定する。
 * TOPは「正しい」とされているため #case 配下だけに限定し、top.css には触れない。
 */
#case .case .card {
	position: relative;
}

#case .case .card .card_contents {
	position: static;
	padding-bottom: 46px;
}

#case .case a .card .card_contents span {
	bottom: 18px;
	right: 20px;
}

/**
 * SPで矢印をPCと同じ「枠内の右下」にする（-135 再修正・小林さん 8/5 14:48 指摘）
 *
 * 旧 case.css は `#case .case .card { height: 450px }` を全幅で固定している。
 * PCは1枚あたり270px幅で本文が450pxに収まるため、本文の下に余白が残り
 * 矢印が単独で右下に見える。
 * SPはカードが画面幅まで広がって本文が長くなり、450pxに収まらず溢れていた
 * （実測: .card_contents の下端がカード下端より85px下）。
 * 矢印はカード基準の絶対配置なので枠内（下18px）に留まり、
 * 結果として溢れた本文の途中に重なって見えていた。
 *
 * SPだけカード高さを内容に追従させ、あわせて矢印の居場所を確保する。
 * PC（768px以上）の見た目は変えない。
 */
@media screen and (max-width: 767px) {
	#case .case .card {
		height: auto;
	}

	#case .case .card .card_contents {
		padding-bottom: 62px;
	}
}

/**
 * 改善ナレッジ ヒーロー下ナビの番号を本文側と同じ角丸へ（-141）
 *
 * 本文の見出し番号 .subpage-heading-number は border-radius:999px のピル形だが、
 * ヒーロー下のページ内ナビ .kfk-hero__nav-number は角丸なし（0）で形が揃っていなかった。
 * 黄色も本文側が #fff600、ナビ側が #ffec00 とわずかに違っていたため合わせる。
 * 左右の余白は、角丸にすると数字が端に寄って見えるぶんだけ広げている。
 */
.kfk-hero__nav-number {
	border-radius: 999px;
	padding-left: 8px;
	padding-right: 8px;
	background: #fff600;
}

/**
 * TOPページの背景を「白／うす水色の交互」へ（-138 / 社外-88 で林様が確定指示）
 *
 * サービス紹介・改善ナレッジで先に適用した方針をTOPにも揃える。
 * 濃いエメラルド(#0dacb5)とベージュ(#f1f0ec)は使わない。
 * うす水色は色参考として示されたサービス紹介 .subpage-section--pale と同じ #edf8f9。
 *
 *   #use-scenes       こんなシーンで活用 → うす水色
 *   #improvement-flow 理想的な改善フロー → 白（変更なし）
 *   #hybrid-service   ハイブリッド型サービス → うす水色
 *   .news-section     お知らせ → 白
 *   .cases-section    導入事例 → うす水色
 *   #top-qanda        よくあるご質問 → 現状ママ（グラデーション）のため対象外
 *
 * 背景が明るくなるので、白抜き前提だった文字色を既定へ戻す。
 */
#use-scenes,
#hybrid-service {
	color: inherit;
	background: #edf8f9;
}

.news-section {
	background: var(--white);
}

.cases-section {
	background: #edf8f9;
}

/**
 * 見出しを黒へ（-138）。
 * 白背景と白文字が重複するため、他ページと揃えて黒にする方針を
 * 小林さんがCMC様へ回答済み。
 */
#use-scenes .section-heading h2,
#hybrid-service .section-heading h2,
#hybrid-service .section-heading > p:last-child {
	color: #000;
}

/**
 * TOPお知らせの「一覧はこちら」をSPで中央へ（-136）
 *
 * PCでは .news-section .section-action が text-align:center だが、
 * @media (max-width:820px) が text-align:right で上書きしており、
 * SPだけボタンが右に寄っていた（実測 左50px / 右17px）。
 * PC側の見た目は変えず、SP幅のみ中央に戻す。
 */
@media (max-width: 820px) {
	.news-section .section-action {
		text-align: center;
	}
}

/**
 * TOPメインビジュアルの中央寄せ（1920px超のワイド画面対応）
 *
 * モックは <a> ラッパー（.hero-slide--existing > a）の justify-content:center
 * で画像を中央寄せしているが、MVのリンクは「未設定」で確定したため
 * （社外Backlog -87: 後からCMC様が管理画面で設定可能）、リンクが無いスライドは
 * <picture> が直下に来てラッパーの中央寄せが効かず、画像（max-width:1920px）が
 * 左に寄る。picture 側にも同じ寄せを持たせて両ケースで揃える。
 * リンク有りの場合は flex の中央寄せが二重にかかるだけで無害。
 */
.hero-slide--existing picture {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/**
 * ヒーローのページ内リンクメニューの最大幅制限（ワイド画面対応）
 *
 * ナビは白帯＋4等分グリッドで幅100%にスパンしており、2000px超の画面では
 * 項目同士が極端に離れて間延びする（オーナー指摘 2026-08-04）。
 * 白帯（背景・上下ボーダー）は全幅のまま、項目の並びだけを本文セクションと
 * 同じ --container-wide(1360px) に収めて中央寄せする。
 * 1360px以下のビューポートでは padding が 0 になり従来表示と完全に同一。
 * ※ モック側（西川さん/杉山さん）への還元候補。
 */
.kf-hero__local-nav,
.kfk-hero__local-nav {
	padding-inline: max(0px, calc((100% - var(--container-wide, 1360px)) / 2));
}

/**
 * サービス紹介のページ内メニューを3等分に（社外-74）
 *
 * 「02_改善活動の進め方」をセクション01へ統合したため、セクションは3つ。
 * メニュー項目も3つに減らし（page-service.php）、杉山さん製ヒーローCSSの
 * repeat(4, 1fr) をここで上書きする（デザイナーCSSは直接触らない運用）。
 * SP(766px以下)は1列縦積みのままなので min-width でスコープする。
 */
@media (min-width: 767px) {
	.kf-hero__local-nav {
		grid-template-columns: repeat(3, 1fr);
	}
}

/**
 * ハイブリッド型サービスの「サービスの詳細はこちら」を導入事例と同じボタンに（社外-90）
 *
 * style.css の #hybrid-service 用ボタンは白文字・白枠（濃色背景だった頃の前提）。
 * -138 の背景変更でこのセクションはうす水色 #edf8f9 になったため、
 * 白いボタンが背景と同化していた。導入事例セクションと同じ既定スタイル
 * （グレー枠 → hover でエメラルド）へ戻す。
 */
#hybrid-service .section-action .kf-btn {
	color: #666;
	border-color: #666;
}

#hybrid-service .section-action .kf-btn.kf-arrow::after {
	border-color: #666;
}

#hybrid-service .section-action .kf-btn:hover,
#hybrid-service .section-action .kf-btn:focus-visible {
	color: #fff;
	background: #0dacb5;
	border-color: #0dacb5;
}

#hybrid-service .section-action .kf-btn:hover::after,
#hybrid-service .section-action .kf-btn:focus-visible::after {
	border-color: #fff;
}