@charset "UTF-8";
/* ===========================================================================
   株式会社LM 共通サイトChrome（HEADER / FOOTER）
   対象：固定ページ ID 472 / 474 / 476 / 478 のみ
   2026-08-25

   ---------------------------------------------------------------------------
   これは新しいデザインではない

   ID472 TOPで正式確定済みの

     ・新HEADER（SWELL標準ヘッダーをPHPフィルタ＋CSSで加工したもの）
     ・S14 FOOTER

   を、下層3ページ（ABOUT / CONTACT / PRIVACY）にも同じ見た目・同じ文言で
   出すためのファイル。新しいnav・新しいコピー・新しい配色・新しい装飾は
   一切足していない。値はすべて lm-home-renewal.css の 11章（HEADER）と
   35章（S14 FOOTER）から移したもので、同一である。

   ---------------------------------------------------------------------------
   HEADER の考え方

   ID472のヘッダーは `#header` を position:absolute・背景透過・白文字にして
   Deep Navyのヒーローへ重ねている。下層3ページにはヒーローが無く地が白なので、
   **重ねる指定は持ち込まない**。ID472が追従ヘッダー（#fix_header・白背景）向けに
   すでに確定させている「濃いネイビーの文字色」の組を、そのまま下層ページの
   通常ヘッダーへ適用する。つまり色以外（ロゴの中身・字送り・CTAの形・
   キャッチフレーズ帯の非表示・検索の非表示・左右の余白）はTOPと同一になる。

   ID472のヘッダーCSS（lm-home-renewal.css 11章）には手を触れていない。
   このファイルのヘッダー指定は `.lm-sub-chrome`（474 / 476 / 478）限定で、
   ID472には一切当たらない。

   ---------------------------------------------------------------------------
   FOOTER の考え方

   S14はこれまでID472の本文（Gutenbergブロック）にあったため、CSSは
   `.post_content > .lm-home-footer` や `.wp-block-group__inner-container` を
   相手にしていた。共通化にあたりPHPが出力する素のHTMLへ変わるので、
   その分の打ち消しは不要になった（`!important` も要らなくなった）。
   **見た目の値・文言・並びはS14のまま**で、選択子だけが素直になっている。

   共通フッターは SWELL の footer.php が `#all_wrapp` を閉じた後に呼ぶ
   `wp_footer` で出力する。そのため `#body_wrap` の外に出る＝ボディクラスを
   祖先セレクタに使えない。代わりに、この専用コンポーネント名
   `.lm-sitefooter` 自体をスコープにしている。漏れないことは三重に担保している。

     1. このCSSは inc/lm-site-chrome.php が対象4ページでしか読み込まない
     2. `.lm-sitefooter` 要素も対象4ページでしか出力されない
     3. クラス名がこのコンポーネント専用で、他のどこにも存在しない

   ---------------------------------------------------------------------------
   触っていないもの

   lm-home-renewal.css / lm-about.css / lm-contact.css / lm-privacy.css
   SWELL親テーマ・カスタマイザー・メニュー（DB）・ロゴ設定
   ID156（このCSSは配信されない）

   JavaScriptは追加していない。ハンバーガー・追従ヘッダー・ドロワーは
   SWELL標準の実装がそのまま動く。
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. 変数
   --------------------------------------------------------------------------- */
.lm-site-chrome {
	/* ヘッダーの左右余白。ID472の --lm-hero-gutter と同値。
	   これで4ページともロゴ左端の位置が1pxも変わらない。 */
	--lm-sc-gutter: clamp(48px, 6.2vw, 116px);

	/* 明るい背景のヘッダー用。ID472が #fix_header 向けに確定させた値。 */
	--lm-sc-ink:      #0a2337;
	--lm-sc-ink-mute: #33465c;
	--lm-sc-cta:      #005090;
	--lm-sc-cta-hov:  #0099E0;
}


/* ===========================================================================
   2. HEADER（下層3ページ ＝ ID474 / 476 / 478 のみ）

   ID472は lm-home-renewal.css 11章の指定をそのまま使う。
   ここは `.lm-sub-chrome` スコープなのでID472には当たらない。
   =========================================================================== */

/* 2-1. キャッチフレーズ帯を隠す。
        ID472の 11-1b と同じ。SWELLカスタマイザー（phrase_pos）は変更していない。
        帯は .pc_ なので959px以下では元から非表示。 */
.lm-sub-chrome #header .l-header__bar {
	display: none;
}

/* 2-2. 検索アイコンを隠す。ID472の 11-1c と同じ。
        検索機能（#search_modal）とSWELL全体設定は変更していない。 */
.lm-sub-chrome #header .c-gnav > li.c-gnav__s,
.lm-sub-chrome #fix_header .c-gnav > li.c-gnav__s {
	display: none;
}

/* SP側は箱（48px）だけ残して見えなくする。display:none にすると
   .l-header__inner の3項目の釣り合いが崩れてロゴが右へ寄る（ID472で実測済み）。 */
.lm-sub-chrome #header .l-header__customBtn {
	visibility: hidden;
	pointer-events: none;
}

/* 2-3. ロゴ・メニューの左右位置をID472と揃える。
        SP（959px以下）はSWELLがロゴ中央・ボタン左右端の配置を使うため触らない。 */
@media (min-width: 960px) {
	.lm-sub-chrome #header .l-header__inner {
		max-width: none;
		padding-inline: var(--lm-sc-gutter);
	}
}

/* 2-4. ロゴ（PHP側で img＋社名へ差し替え済み）
        下層ページのヘッダーは白地なので、ID472が #fix_header 向けに
        確定させている濃いネイビーを使う。#0a2337 / #FFFFFF で約 14.9:1。 */
.lm-sub-chrome #header .c-headLogo__link,
.lm-sub-chrome #fix_header .c-headLogo__link {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lm-sub-chrome #header .lm-home-header__symbol {
	display: block;
	width: auto;
	height: 24px;
	max-width: none;
}

.lm-sub-chrome #fix_header .lm-home-header__symbol {
	display: block;
	width: auto;
	height: 22px;
	max-width: none;
}

.lm-sub-chrome #header .lm-home-header__name {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	color: var(--lm-sc-ink);
	white-space: nowrap;
}

.lm-sub-chrome #fix_header .lm-home-header__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	color: var(--lm-sc-ink);
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.lm-sub-chrome #header .lm-home-header__symbol {
		height: 22px;
	}

	.lm-sub-chrome #header .lm-home-header__name {
		font-size: 14px;
		letter-spacing: .07em;
	}
}

@media (max-width: 767px) {
	.lm-sub-chrome #header .c-headLogo__link,
	.lm-sub-chrome #fix_header .c-headLogo__link {
		gap: 8px;
	}

	.lm-sub-chrome #header .lm-home-header__symbol,
	.lm-sub-chrome #fix_header .lm-home-header__symbol {
		height: 19px;
	}

	.lm-sub-chrome #header .lm-home-header__name,
	.lm-sub-chrome #fix_header .lm-home-header__name {
		font-size: 12.5px;
		letter-spacing: .04em;
	}
}

/* 2-5. グローバルナビの字送り。ID472の 11-2 と同値。 */
.lm-sub-chrome #header .c-gnav > li > a,
.lm-sub-chrome #fix_header .c-gnav > li > a {
	font-size: 12.5px;
	letter-spacing: .13em;
}

/* 2-6. 無料相談CTA。
        下層ページのヘッダーは白地なので、ID472が #fix_header 向けに
        確定させている「濃い青の塗り」をそのまま使う（11-4）。 */
.lm-sub-chrome #header .c-gnav > li.lm-home-header__cta,
.lm-sub-chrome #fix_header .c-gnav > li.lm-home-header__cta {
	display: flex;
	align-items: center;
}

.lm-sub-chrome #header .c-gnav > li.lm-home-header__cta > a,
.lm-sub-chrome #fix_header .c-gnav > li.lm-home-header__cta > a {
	display: inline-block;
	height: auto;
	padding: 8px 20px;
	border-radius: 2px;
	background: var(--lm-sc-cta);
	color: #FFFFFF;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .1em;
	white-space: nowrap;
	transition: background-color .25s ease;
}

@media (hover: hover) {
	.lm-sub-chrome #header .c-gnav > li.lm-home-header__cta > a:hover,
	.lm-sub-chrome #fix_header .c-gnav > li.lm-home-header__cta > a:hover {
		background: var(--lm-sc-cta-hov);
		color: #FFFFFF;
	}
}

/* SPドロワー内。ID472の 11-4 と同じで、CTAだけを最小限に強調する。
   ドロワーの開閉・機能には一切手を入れていない。 */
.lm-sub-chrome .p-spMenu .c-spnav > li.lm-home-header__cta > a {
	font-weight: 700;
	color: var(--lm-sc-cta);
}


/* ===========================================================================
   3. SWELL標準フッターを隠す（対象4ページ）

   #body_wrap の子構成は
     … / div#content.l-content / footer#footer.l-footer / div.p-fixBtnWrap / …
   で、「トップへ戻る」ボタンは #footer の兄弟なので消えない（ID472で実測済み）。
   ID156には .lm-site-chrome が付かないため到達しない。
   =========================================================================== */
.lm-site-chrome #footer {
	display: none;
}


/* ===========================================================================
   4. 共通FOOTER（S14の移植）

   値・文言・並びはすべて lm-home-renewal.css 35章と同一。
   PHPが出力する素のHTMLになったため、SWELLの .post_content 由来の打ち消し
   （margin-top の !important など）が不要になっている。
   =========================================================================== */
.lm-sitefooter {
	/* 35-3 と同値 */
	--lm-footer-bg:     #08142d;
	--lm-footer-brand:  rgba(255, 255, 255, .045);
	--lm-footer-rule:   rgba(255, 255, 255, .17);
	--lm-footer-rule2:  rgba(255, 255, 255, .10);
	--lm-footer-addr:   rgba(255, 255, 255, .50);
	--lm-footer-desc:   rgba(255, 255, 255, .49);
	--lm-footer-label:  rgba(255, 255, 255, .48);
	--lm-footer-link:   rgba(255, 255, 255, .70);
	--lm-footer-bottom: rgba(255, 255, 255, .47);

	position: relative;
	overflow: hidden;
	min-height: 66vh;
	margin: 0;
	padding: 12vh 0 6vh;
	background: var(--lm-footer-bg);
	color: #fff;
}

/* 35-4 */
.lm-sitefooter__inner {
	position: relative;
	min-height: 52vh;
	width: min(1240px, 86vw);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* 35-5. 背景の大文字「LM」。position:absolute なので並びに影響しない。 */
.lm-sitefooter__inner::before {
	content: "LM";
	content: "LM" / "";
	position: absolute;
	z-index: 0;
	left: -.055em;
	top: -.02em;
	margin: 0;
	pointer-events: none;
	color: var(--lm-footer-brand);
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(120px, 18vw, 280px);
	font-weight: 900;
	line-height: .78;
	letter-spacing: -.085em;
}

/* 35-6 ＋ 35-6の margin-top（S14では !important が必要だったが、
   .post_content の外へ出たので通常の指定で足りる） */
.lm-sitefooter__main {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(280px, 1.25fr) minmax(520px, 1.75fr);
	gap: 8vw;
	align-items: start;
	margin-top: 15vh;
	padding-top: 42px;
	border-top: 1px solid var(--lm-footer-rule);
}

/* 35-7. 会社情報 */
.lm-sitefooter__name {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: clamp(24px, 2.1vw, 32px);
	font-weight: 650;
	letter-spacing: -.03em;
	line-height: 1.3;
}

.lm-sitefooter__name::before,
.lm-sitefooter__name::after {
	content: none;
	display: none;
}

.lm-sitefooter__descriptor {
	margin: 0 0 30px;
	color: var(--lm-footer-desc);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: .15em;
}

.lm-sitefooter__address {
	margin: 0;
	color: var(--lm-footer-addr);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: .015em;
}

/* 35-8. ナビゲーション */
.lm-sitefooter__nav {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px;
}

.lm-sitefooter__nav small {
	display: block;
	margin-bottom: 18px;
	color: var(--lm-footer-label);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .17em;
}

.lm-sitefooter__nav a {
	display: block;
	width: max-content;
	max-width: 100%;
	color: var(--lm-footer-link);
	text-decoration: none;
	font-size: 13px;
	font-weight: 450;
	line-height: 2.15;
	border: 0;
	background: none;
}

@media (hover: hover) {
	.lm-sitefooter__nav a {
		transition: color .18s ease;
	}

	.lm-sitefooter__nav a:hover {
		color: #fff;
	}
}

.lm-sitefooter__nav a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .8);
	outline-offset: 3px;
	color: #fff;
}

/* 35-9. copyright */
.lm-sitefooter__bottom {
	position: relative;
	z-index: 1;
	margin: 72px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--lm-footer-rule2);
	color: var(--lm-footer-bottom);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .10em;
}

/* 35-12. レスポンシブ（切り替え位置・値はS14と同一） */
@media (max-width: 1025px) {
	.lm-sitefooter__main {
		grid-template-columns: 1fr;
		gap: 56px;
		margin-top: 13vh;
	}

	.lm-sitefooter__nav {
		width: min(660px, 100%);
	}
}

@media (max-width: 720px) {
	.lm-sitefooter {
		min-height: auto;
		padding: 96px 0 44px;
	}

	.lm-sitefooter__inner {
		min-height: auto;
		width: calc(100vw - 44px);
	}

	.lm-sitefooter__inner::before {
		left: -.08em;
		top: .04em;
		font-size: 43vw;
		color: rgba(255, 255, 255, .042);
	}

	.lm-sitefooter__main {
		margin-top: 120px;
		padding-top: 30px;
		gap: 50px;
	}

	.lm-sitefooter__nav {
		grid-template-columns: 1fr 1fr;
		gap: 38px 28px;
	}

	.lm-sitefooter__name {
		font-size: 25px;
	}

	.lm-sitefooter__address {
		font-size: 11.5px;
		line-height: 1.85;
	}

	.lm-sitefooter__bottom {
		margin-top: 58px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lm-sitefooter__nav a {
		transition: none;
	}
}