/* Lighthouse-select トップページ専用スタイル（front-page.php からのみ enqueue） */
/* カラー・タイポグラフィは Lighthouse_ブランドデザインマスター_Ver1.1.docx 第3章・第4章・付録A/Bの正本値を使用 */

.lh-front-page {
	--lh-navy: #0D2B45;
	--lh-blue: #1E6FAE;
	--lh-light-blue: #EAF4FB;
	--lh-gold: #F4C542;
	--lh-light-gold: #FFF4C2;
	--lh-bg-gray: #F2F4F7;
	--lh-text: #333333;
	--lh-sub-text: #666666;
	--lh-white: #FFFFFF;
	--lh-line: #E4E7EC;
	--lh-content-width: 1300px;
	--lh-hero-width: 1450px;
}

/* SPヘッダーロゴ: Lighthouse-select横組みロゴの最小幅120pxを満たし、視認性を確保する。 */
@media (max-width: 767px) {
	.l-header__logo {
		width: 140px !important;
		flex: 0 0 140px !important;
	}

	.l-header .c-headLogo,
	.l-header .c-headLogo__link {
		width: 100% !important;
		max-width: 140px !important;
		height: auto !important;
	}

	.l-header .c-headLogo__img {
		display: block !important;
		width: 100% !important;
		max-width: 140px !important;
		height: auto !important;
		max-height: none !important;
		object-fit: contain;
	}
}

/* トップページに限定して、SWELL標準の記事スライダーを非表示にする（親テーマ・functions.phpは変更しない）。 */
#post_slider {
	display: none !important;
}

/* SPトップページのみ、SWELL標準のコンテンツ上余白を解除する。PCは既存挙動を保持する。 */
@media (max-width: 767px) {
	#content,
	.l-content {
		padding-top: 0 !important;
	}
}

/*
 * トップページ限定: SWELL本体の幅制約を上書きする。
 * 親テーマの build/css/main.css（コンパイル済み・編集不可）を解析して特定した実際の制約は以下の2つ:
 *   1. .l-container { max-width: calc(var(--container_size,0px) + var(--swl-pad_container,0px)*2) }
 *      --container_size は wp-admin カスタマイザー「サイト幅」の値（DB管理のためFTPからは数値不明）
 *   2. .-sidebar-on .l-mainContent { width: calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin)) }
 *      サイドバー用に280〜316px+余白を予約する仕様。トップページはサイドバーを表示しないため、
 *      この予約幅がそのまま「本文が約700pxしかない」症状の主因だった。
 *
 * 前回の修正で #content.l-container に max-width: var(--lh-max-width) を指定したが、
 * --lh-max-width は .lh-front-page（#content の子孫）で定義した変数だったため、
 * 祖先である #content からは参照できず無効値となり、max-width が初期値 none
 * （無制限）にフォールバックしていた。これが「画面いっぱいに広がる」直接の原因。
 * → #content 側の上書きはやめ、.lh-front-page の子孫だけで完結する幅指定に変更する。
 * このCSSファイルは is_front_page() のときだけ enqueue されるため、他ページには一切影響しない。
 */
.lh-front-page.l-mainContent {
	width: 100% !important;
	max-width: 100% !important;
}

.lh-front-page.l-mainContent .l-mainContent__inner {
	max-width: none !important;
	padding: 0 !important;
}

.lh-front-page__inner {
	width: min(calc(100% - 64px), var(--lh-content-width));
	margin-inline: auto;
}

/* ---------- Hero ---------- */
.lh-hero {
	position: relative;
	overflow: hidden;
	background: var(--lh-white);
}

.lh-hero__inner {
	position: relative;
	width: min(calc(100% - 64px), var(--lh-hero-width));
	margin-inline: auto;
}

.lh-hero__text {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	max-width: 600px;
}

.lh-hero__message {
	margin: 0;
	font-size: 40px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-hero__rule {
	display: block;
	width: 48px;
	height: 3px;
	margin: 24px 0;
	background: var(--lh-gold);
}

.lh-hero__lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--lh-sub-text);
}

/*
 * 正式ヒーロービジュアル(PC/SP共通クラス、v5統一シーン)。
 * PCでは画像がヒーロー全体の風景となり、その上に.lh-hero__textを絶対配置で重ねる。
 * PC/SPで別ファイル(アスペクト比が異なる)を<picture>で出し分けるため、
 * aspect-ratioもブレークポイントごとに指定してCLSを防ぐ(下記SP用メディアクエリ参照)。
 * 角丸・枠線・box-shadowは意図的に付けない(背景と一体化させるための仕様)。
 */
.lh-hero__scene {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1500 / 580;
}

/*
 * PCヒーロー表示高さの調整(2026-08-10 比較モックC案で承認)。
 * hero-v5_A2.webp(1500/580, 無加工)そのままに、表示領域だけを470pxへ抑える。
 * object-position: center 88.3% は、ヒーロー幅1450px時に「上約83px相当・下約11px相当」を
 * トリミングする比率(design_reference/hero_draft_v5_unified/hero_v5_height_compare_mock.html の
 * C案で検証済み)。上マージンは球体飾り・ランプ室より上を確保し、下マージンは水平線の手前
 * (海の余白45px相当のうち11pxのみ)に収まるため、灯台・光・水平線・左フェードは欠けない。
 * SPは対象外(下記 max-width:767px のブロックで aspect-ratio: 900/456 のまま維持)。
 */
@media (min-width: 768px) {
	.lh-hero__inner {
		height: 470px;
		overflow: hidden;
	}

	.lh-hero__scene {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: center 88.3%;
	}
}

/* ---------- Section head / eyebrow ---------- */
.lh-eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lh-blue);
}

.lh-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--lh-line);
}

.lh-section-title {
	margin: 0;
	font-size: 32px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-more-link {
	flex-shrink: 0;
	font-size: 14px;
	color: var(--lh-blue);
	text-decoration: none;
	white-space: nowrap;
}

.lh-more-link:hover {
	text-decoration: underline;
}

/* ---------- Body grid ---------- */
.lh-body {
	padding: 64px 0 80px;
}

.lh-body__grid {
	display: grid;
	grid-template-columns: 2.6fr 1fr;
	grid-template-areas:
		"articles about"
		"articles reason"
		"trust    trust";
	column-gap: 64px;
	row-gap: 48px;
}

.lh-main {
	grid-area: articles;
	min-width: 0;
}

.lh-about-cat {
	grid-area: about;
	min-width: 0;
}

.lh-reason {
	grid-area: reason;
}

.lh-trust {
	grid-area: trust;
}

/* ---------- Article list (縦並び4件) ---------- */
.lh-article-list {
	display: flex;
	flex-direction: column;
}

.lh-article + .lh-article {
	border-top: 1px solid var(--lh-line);
}

.lh-article__link {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 28px 0;
	text-decoration: none;
	color: inherit;
}

.lh-article__bar {
	align-self: stretch;
	flex-shrink: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--lh-blue);
}

.lh-article__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	flex: 1 1 auto;
}

.lh-article__category {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 3px;
	background: var(--lh-blue);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lh-white);
}

.lh-article__title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-article__excerpt {
	font-size: 14px;
	line-height: 1.65;
	color: var(--lh-sub-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lh-article__date {
	font-size: 13px;
	color: var(--lh-sub-text);
}

.lh-article__arrow {
	flex-shrink: 0;
	color: var(--lh-blue);
	font-size: 18px;
	transition: transform 0.2s ease;
}

.lh-article__link:hover .lh-article__arrow {
	transform: translateX(4px);
}

.lh-article__link:hover .lh-article__title {
	color: var(--lh-blue);
}

/* ---------- ABOUT / CATEGORY (右カラム) ---------- */
.lh-side__block + .lh-side__block {
	margin-top: 40px;
	padding-top: 40px;
	border-top: 1px solid var(--lh-line);
}

.lh-side__title {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.45;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-side__text {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.75;
	color: var(--lh-sub-text);
}

.lh-outline-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 20px;
	border: 1px solid var(--lh-navy);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	color: var(--lh-navy);
	text-decoration: none;
	text-align: center;
	transition: background 0.2s ease, color 0.2s ease;
}

.lh-outline-btn:hover {
	background: var(--lh-navy);
	color: var(--lh-white);
}

.lh-outline-btn.is-disabled {
	color: var(--lh-sub-text);
	border-color: var(--lh-line);
	cursor: not-allowed;
}

.lh-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lh-cat-list__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 0;
	border-bottom: 1px solid var(--lh-line);
	text-decoration: none;
	color: var(--lh-text);
}

.lh-cat-list__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--lh-blue);
}

.lh-cat-list__name {
	flex: 1 1 auto;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lh-cat-list__count {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--lh-sub-text);
}

.lh-cat-list__arrow {
	flex-shrink: 0;
	color: var(--lh-blue);
	font-size: 14px;
}

.lh-cat-list__link:hover .lh-cat-list__name {
	color: var(--lh-blue);
}

/* ---------- 正しく比較する理由 ---------- */
.lh-reason {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid var(--lh-line);
	border-radius: 4px;
}

.lh-reason__icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--lh-navy);
}

.lh-reason__icon svg {
	width: 100%;
	height: 100%;
}

.lh-reason__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.lh-reason__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-reason__link {
	font-size: 13px;
	color: var(--lh-blue);
	text-decoration: none;
}

.lh-reason__link:hover {
	text-decoration: underline;
}

.lh-reason__link.is-disabled {
	color: var(--lh-sub-text);
	cursor: not-allowed;
}

/* ---------- Trust row (4項目) ---------- */
.lh-trust__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--lh-line);
}

.lh-trust__item {
	text-align: center;
}

.lh-trust__icon {
	position: relative;
	display: inline-flex;
	width: 32px;
	height: 32px;
	color: var(--lh-navy);
	margin-bottom: 12px;
}

.lh-trust__icon svg {
	width: 100%;
	height: 100%;
}

.lh-trust__icon::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lh-gold);
}

.lh-trust__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--lh-navy);
}

.lh-trust__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--lh-sub-text);
}

/* ---------- Responsive (SP: 0-767px) ---------- */
@media (max-width: 767px) {
	/* SPでは #content 側の可変パディング(4vw)のみに委ね、PC用の固定64px余白を二重にしない。 */
	.lh-front-page__inner {
		width: 100%;
	}

	.lh-hero__inner {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 12px 0 24px;
		gap: 20px;
	}

	/*
	 * SPでは画像→見出し→リード文の順で表示する(front-page.phpのDOM順がpicture→.lh-hero__textのため、
	 * flex-direction:columnの通常フローのままで意図した視覚順になる。orderの上書きは不要)。
	 */
	.lh-hero__text {
		position: static;
		transform: none;
		max-width: none;
	}

	.lh-hero__scene {
		aspect-ratio: 900 / 456;
	}

	.lh-hero__message {
		font-size: 26px;
	}

	.lh-hero__rule {
		margin: 16px 0;
	}

	.lh-hero__br-pc {
		display: none;
	}

	.lh-body {
		padding: 32px 0 48px;
	}

	.lh-body__grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"articles"
			"trust"
			"reason";
		row-gap: 40px;
	}

	/* 確定モックのSP版に合わせ、ABOUT/カテゴリー一覧はSPでは省略する */
	.lh-about-cat {
		display: none;
	}

	.lh-section-title {
		font-size: 24px;
	}

	.lh-article__link {
		padding: 20px 0;
		gap: 14px;
	}

	.lh-article__title {
		font-size: 17px;
	}

	.lh-article__excerpt {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.lh-trust__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 28px 20px;
		padding-top: 32px;
	}
}