@charset "utf-8";

/* --------------------------------------
	LP：M365セキュリティ設定 無償診断（W-10 作業4 / 2026-09-11）
	ページ：/landing/m365-security-check/
	テンプレート：template-parts/landing/lp-m365-security-check.php

	配色は Overe に寄せる（style.css の #page-overe-2 の変数を踏襲）
		primary   #101828  … 背景・濃色
		secondary #3d8bec  … 見出し・アクセント
		tertiary  #c11574  … 申込CTAの色（Overeページの「無償診断」ボタンと同じ）

	🔴 このファイルは functions.php の is_page('m365-security-check') 条件で読み込まれます。
	   スラッグを変えるときは functions.php も直すこと。
--------------------------------------- */

#lp-m365-security-check {
	--lp-color-01: #101828;
	--lp-color-02: #3d8bec;
	--lp-color-03: #c11574;

	--lp-color-bg-01: rgba(61, 139, 236, 0.08);
}

/* -- 汎用 -- */

#lp-m365-security-check .lp-color-02 {
	color: var(--lp-color-02);
}

#lp-m365-security-check .lp-color-03 {
	color: var(--lp-color-03);
}

#lp-m365-security-check .lp-textMarker-01 {
	background: linear-gradient(transparent 50%, rgba(61,139,236,0.7) 50%);
	padding-bottom: 0.1em;
}

#lp-m365-security-check .lp-section-bg-01 {
	background: var(--lp-color-bg-01);
}

/* -- ボタン（申込CTA）-- */

#lp-m365-security-check .lp-button-01 {
	display: inline-flex;
	color: #ffffff;
	font-size: var(--fontSize-16);
	font-weight: bold;
	line-height: 1.3em;
	min-width: 240px;
	min-height: 40px;
	padding: 0.5em 1.5em;
	border: none;
	border-radius: 100px;
	background: var(--lp-color-03);
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

#lp-m365-security-check .lp-button-01.is-large {
	min-width: 300px;
	min-height: 56px;
	font-size: var(--fontSize-18);
}

#lp-m365-security-check .lp-button-01:hover {
	background: var(--lp-color-03);
	opacity: 0.7;
}

/* -- S1 ヒーロー（画像を使わず、Overeページと同じ発光グラデーションで作る）-- */

#lp-m365-security-check .lp-hero-section {
	color: #ffffff;
	display: flex;
	min-height: 480px;
	padding-top: var(--space-secondary);
	padding-bottom: var(--space-secondary);
	align-items: center;
	background-color: var(--lp-color-01);
	background-image: radial-gradient(
		circle at 50% 140%,
		rgba(186, 26, 131, 1.0) 0%,
		rgba(107, 33, 168, 0.2) 40%,
		rgba(16, 24, 40, 0) 75%
	);
}

#lp-m365-security-check .lph-headingWrap {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-self: center;
	text-align: center;
}

#lp-m365-security-check .lph-heading-list {
	display: flex;
	padding: 0;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
}

#lp-m365-security-check .lph-heading-list li {
	color: #ffffff;
	font-size: clamp(12px, calc(16 / var(--breakPoint-SmartPhone) * 100vw), 15px);
	text-align: center;
	width: auto;
	padding: 0.2em 0.8em;
	border-radius: 4px;
	background: var(--lp-color-02);
}

#lp-m365-security-check .lph-text {
	color: #ffffff;
	width: fit-content;
	font-size: var(--fontSize-16);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.6em;
	line-height: 1.5;
}

#lp-m365-security-check .lph-heading {
	color: #ffffff;
	width: fit-content;
	font-size: clamp(28px, calc(52 / var(--breakPoint-SmallPC) * 100vw), 52px);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	line-height: 1.25;
}

/* -- S2 共感（濃色帯）／下三角はセクションと同色にする -- */

/* 🔴 svg の height / position は layout.css の .l-section-arrow-background svg が
   height: var(--space-primary); position: absolute; bottom: 0; で組んでいる。
   ここで height や position を上書きしないこと。
   （height: auto にすると viewBox の比率で高さが決まり、ビューポート幅によって
   上のセクションとの間に白い線が出る。2026-09-15 実際に発生）*/

#lp-m365-security-check .lp-section-arrow path {
	fill: var(--lp-color-01);
}

#lp-m365-security-check .lp-interest-section {
	color: #ffffff;
	text-align: center;
	padding-top: clamp(30px, calc(40 / var(--breakPoint-SmallPC) * 100vw), 40px);
	padding-bottom: clamp(10px, calc(20 / var(--breakPoint-SmallPC) * 100vw), 20px);
	background: var(--lp-color-01);
}

/* -- S5 申込フォーム（濃色帯）-- */

#lp-m365-security-check .lp-cta-section {
	color: #ffffff;
	background: var(--lp-color-01);
}

#lp-m365-security-check .lp-cta-section p,
#lp-m365-security-check .lp-cta-section li {
	color: #ffffff;
}

/* HubSpotフォームの枠は白地に戻す（濃色帯の中に置くため） */
#lp-m365-security-check .lp-cta-section .l-formArea-01 {
	color: var(--color-text);
	padding: var(--space-tertiary);
	border-radius: 8px;
	background: #ffffff;
}

#lp-m365-security-check .lp-cta-section .l-formArea-01 p,
#lp-m365-security-check .lp-cta-section .l-formArea-01 li,
#lp-m365-security-check .lp-cta-section .l-formArea-01 label {
	color: var(--color-text);
}

/* -- S4 流れ（STEPカード）-- */

#lp-m365-security-check .lp-step-card {
	height: 100%;
	padding: 1.5em;
	border-radius: 8px;
	border: 1px solid var(--color-gray-light);
}

/* -- S7 FAQ（Q/Aアイコンを Overe の青に）-- */

#lp-m365-security-check .m-qa .m-qa-question .m-qa-icon {
	background: var(--lp-color-02);
}

#lp-m365-security-check .m-qa .m-qa-question .m-qa-text {
	color: var(--lp-color-02);
}

/* -- S6 会社概要（ロゴ左・文章右）-- */

#lp-m365-security-check .lp-company-logo {
	text-align: center;
}

#lp-m365-security-check .lp-company-logo img {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
	margin-inline: auto; /* SPで左に寄らないように（text-align頼みにしない）*/
}

@media screen and (max-width: 959px) {
	#lp-m365-security-check .lp-company-logo {
		margin-bottom: var(--gap-tertiary);
	}

	#lp-m365-security-check .lp-company-logo img {
		max-width: 180px;
	}
}