/*
 * Webセキュリティ健康診断（概要ページ）専用CSS
 * template-security-overview.php を使うページでだけ読み込まれる。
 * 色はテーマの変数（--lw-*）を使い、サイトのテイストに合わせる。
 * クラスはすべて .lwsc- で始まり、既存のスタイルとは干渉しない。
 */

.lwsc {
	--ink: var(--lw-ink, #151922);
	--muted: var(--lw-muted, #606a78);
	--blue: var(--lw-blue, #0a63c7);
	--navy: var(--lw-blue-dark, #06275f);
	--cyan: var(--lw-cyan, #06b6d4);
	--pale: var(--lw-pale, #eef7ff);
	--soft: var(--lw-soft, #f4f7fb);
	--line: var(--lw-line, #dfe8f1);
	--ok: #16a36a;
	--warn: #d48a06;
	--ng: #d6453b;
	--shadow: 0 22px 70px rgba(7, 31, 67, .08);
	--radius-l: 36px;
	--radius-m: 22px;
	max-width: 1080px;
	margin: 0 auto;
	display: grid;
	gap: clamp(72px, 9vw, 120px);
	color: var(--ink);
	font-weight: 500;
	line-height: 1.9;
}

/* リセットは :where() で詳細度を0にし、各パーツの余白指定を優先させる */
.lwsc * { box-sizing: border-box; }
:where(.lwsc) p { margin: 0; }
:where(.lwsc) ul, :where(.lwsc) ol { margin: 0; padding: 0; list-style: none; }
:where(.lwsc) li + li { margin-top: 0; }
:where(.lwsc) :is(h1, h2, h3) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-weight: 900;
	letter-spacing: .01em;
	word-break: auto-phrase;
}
:where(.lwsc) a { color: inherit; text-decoration: none; }

/* 共通パーツ */
.lwsc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--blue);
	font-size: 13px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.lwsc-eyebrow::before { content: ""; width: 36px; height: 3px; background: currentColor; }

.lwsc-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.lwsc-head h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; }
.lwsc-head p { margin-top: 16px; color: var(--muted); font-size: 16px; }
.lwsc-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lwsc-head--center .lwsc-eyebrow { justify-content: center; }

.lwsc-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.lwsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 30px;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(135deg, var(--navy), var(--blue));
	box-shadow: 0 16px 36px rgba(10, 99, 199, .24);
	font-size: 15px;
	font-weight: 900;
	transition: transform .2s ease, box-shadow .2s ease;
}
.lwsc-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(10, 99, 199, .3); }
.lwsc-btn--ghost {
	color: var(--navy);
	background: #fff;
	border: 1px solid rgba(10, 99, 199, .22);
	box-shadow: none;
}
.lwsc-btn--ghost:hover { background: var(--pale); box-shadow: none; }
.lwsc-btn::after { content: "→"; font-weight: 700; }

.lwsc-icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	color: var(--blue);
	background: linear-gradient(135deg, rgba(10, 99, 199, .1), rgba(6, 182, 212, .12));
	flex-shrink: 0;
}
.lwsc-icon svg { width: 26px; height: 26px; }

/* 1. ファーストビュー */
.lwsc-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(36px, 5vw, 64px);
}
.lwsc-hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.25; }
.lwsc-tagline {
	display: inline-block;
	margin-top: 24px;
	padding: 6px 16px;
	border-radius: 999px;
	color: var(--navy);
	background: var(--pale);
	border: 1px solid rgba(10, 99, 199, .16);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .06em;
}
.lwsc-lead { margin-top: 22px; color: var(--muted); font-size: 17px; line-height: 1.95; }
.lwsc-hero .lwsc-actions { margin-top: 32px; }

/* レポート風の図 */
.lwsc-report-card {
	position: relative;
	padding: 28px;
	border-radius: var(--radius-l);
	background: #fff;
	border: 1px solid rgba(10, 99, 199, .1);
	box-shadow: 0 30px 90px rgba(7, 31, 67, .14);
}
.lwsc-report-card::before {
	content: "";
	position: absolute;
	inset: -18px -18px auto auto;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(6, 182, 212, .28), transparent 70%);
	z-index: -1;
}
.lwsc-rc-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.lwsc-rc-head small { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.lwsc-rc-head strong { display: block; font-size: 17px; font-weight: 900; }
.lwsc-grade { display: grid; justify-items: center; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.lwsc-grade b {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-top: 4px;
	border-radius: 18px;
	color: #fff;
	background: linear-gradient(135deg, #f0b232, var(--warn));
	font-size: 28px;
	letter-spacing: 0;
}
.lwsc-rc-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.lwsc-rc-counts div { padding: 10px 6px; border-radius: 14px; text-align: center; font-size: 12px; font-weight: 700; }
.lwsc-rc-counts b { display: block; font-size: 24px; line-height: 1.2; }
.lwsc-c-ng { color: var(--ng); background: #fdeeed; }
.lwsc-c-warn { color: #a86b00; background: #fdf4e1; }
.lwsc-c-low { color: var(--muted); background: var(--soft); }
.lwsc-rc-list { display: grid; gap: 10px; }
.lwsc-rc-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--soft); font-size: 14px; font-weight: 700; line-height: 1.5; }
.lwsc-tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 900; }
.lwsc-tag--ng { background: var(--ng); }
.lwsc-tag--warn { background: var(--warn); }
.lwsc-tag--ok { background: var(--ok); }

/* 2. こんなとき */
.lwsc-worries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lwsc-worry {
	display: grid;
	gap: 16px;
	align-content: start;
	padding: 30px 28px;
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(10, 99, 199, .1);
	box-shadow: var(--shadow);
}
.lwsc-worry h3 { font-size: 19px; line-height: 1.5; }
.lwsc-worry p { color: var(--muted); font-size: 15px; }

/* 3. 外から診て、中から直す */
.lwsc-concept {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 18px;
}
.lwsc-panel { padding: clamp(28px, 4vw, 40px); border-radius: var(--radius-l); }
.lwsc-panel--out { background: var(--pale); border: 1px solid rgba(10, 99, 199, .12); }
.lwsc-panel--in { color: #fff; background: linear-gradient(135deg, var(--navy), var(--blue)); box-shadow: 0 24px 60px rgba(10, 99, 199, .25); }
.lwsc-panel--in h3 { color: #fff; }
.lwsc-panel-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 900; letter-spacing: .14em; opacity: .75; }
.lwsc-panel h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.35; }
.lwsc-panel > p { margin-top: 12px; font-size: 15px; opacity: .9; }
.lwsc-checks { display: grid; gap: 10px; margin-top: 22px; }
.lwsc-checks li { position: relative; padding-left: 30px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.lwsc-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.lwsc-panel--in .lwsc-checks li::before { background-color: var(--cyan); }
.lwsc-arrow { display: grid; place-items: center; color: var(--blue); }
.lwsc-arrow svg { width: 40px; height: 40px; }

/* 4. 確認する項目 */
.lwsc-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lwsc-item {
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 24px 22px;
	border-radius: var(--radius-m);
	background: #fff;
	border: 1px solid var(--line);
}
.lwsc-item .lwsc-icon { width: 44px; height: 44px; border-radius: 14px; }
.lwsc-item .lwsc-icon svg { width: 22px; height: 22px; }
.lwsc-item h3 { font-size: 16px; line-height: 1.5; }
.lwsc-item p { color: var(--muted); font-size: 13.5px; line-height: 1.75; }
.lwsc-limit {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 18px 22px;
	margin-top: 20px;
	padding: 26px 28px;
	border-radius: var(--radius-m);
	border: 1.5px dashed rgba(96, 106, 120, .35);
	background: rgba(244, 247, 251, .7);
}
.lwsc-limit .lwsc-icon { color: var(--muted); background: #fff; }
.lwsc-limit h3 { font-size: 17px; }
.lwsc-limit ul { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.lwsc-limit li::before { content: "－ "; }
.lwsc-limit p { margin-top: 10px; color: var(--muted); font-size: 13.5px; }

/* 5. レポート */
.lwsc-report { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.lwsc-report .lwsc-head { margin-bottom: 0; }
.lwsc-points { display: grid; gap: 18px; margin-top: 30px; }
.lwsc-points li { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.lwsc-points b {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: #fff;
	background: var(--blue);
	font-size: 14px;
}
.lwsc-points strong { font-size: 16px; font-weight: 900; }
.lwsc-points span { color: var(--muted); font-size: 14px; }
.lwsc-docs { position: relative; min-height: 380px; }
.lwsc-doc {
	position: absolute;
	width: 74%;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.lwsc-doc--a { top: 0; left: 0; z-index: 2; }
.lwsc-doc--b { right: 0; bottom: 0; z-index: 1; background: #fbfdff; }
.lwsc-doc small { display: block; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.lwsc-doc strong { display: block; margin: 4px 0 14px; font-size: 15px; font-weight: 900; }
.lwsc-doc-grade { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.lwsc-doc-grade b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; background: var(--warn); font-size: 20px; }
.lwsc-bars { display: grid; gap: 8px; }
.lwsc-bars span { display: block; height: 8px; border-radius: 99px; background: var(--soft); }
.lwsc-bars span:nth-child(1) { width: 92%; }
.lwsc-bars span:nth-child(2) { width: 70%; }
.lwsc-bars span:nth-child(3) { width: 82%; }
.lwsc-code { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #0b1626; color: #9fd8ff; font: 600 12px/1.7 "JetBrains Mono", ui-monospace, monospace; white-space: pre; overflow: hidden; }

/* 6. 流れ */
.lwsc-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; counter-reset: lwsc-step; }
.lwsc-flow li { position: relative; padding-top: 64px; }
.lwsc-flow li::before {
	counter-increment: lwsc-step;
	content: counter(lwsc-step, decimal-leading-zero);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, var(--navy), var(--blue));
	font-size: 15px;
	font-weight: 900;
	z-index: 1;
}
.lwsc-flow li::after {
	content: "";
	position: absolute;
	top: 23px;
	left: 48px;
	right: -14px;
	height: 2px;
	background: linear-gradient(90deg, rgba(10, 99, 199, .4), rgba(10, 99, 199, .1));
}
.lwsc-flow li:last-child::after { display: none; }
.lwsc-flow li.is-key::before { background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 0 0 6px rgba(6, 182, 212, .18); }
.lwsc-flow h3 { font-size: 16px; line-height: 1.5; }
.lwsc-flow p { margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.75; }

/* 7. メニュー */
.lwsc-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.lwsc-plan {
	position: relative;
	display: grid;
	gap: 12px;
	align-content: start;
	padding: 32px 28px;
	border-radius: var(--radius-m);
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.lwsc-plan small { color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.lwsc-plan h3 { font-size: 22px; line-height: 1.4; }
.lwsc-plan p { color: var(--muted); font-size: 15px; }
.lwsc-plan .lwsc-for { padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.lwsc-plan.is-featured { border: 2px solid var(--blue); }
.lwsc-badge {
	position: absolute;
	top: -14px;
	left: 28px;
	padding: 2px 14px;
	border-radius: 999px;
	color: #fff;
	background: linear-gradient(135deg, var(--cyan), var(--blue));
	font-size: 12px;
	font-weight: 900;
}
.lwsc-menu-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 22px 28px; border-radius: var(--radius-m); background: var(--pale); }
.lwsc-menu-foot p { color: var(--navy); font-size: 15px; font-weight: 700; }

/* 8. 約束 */
.lwsc-band {
	padding: clamp(36px, 5vw, 60px);
	border-radius: 44px;
	color: #fff;
	background:
		radial-gradient(circle at 90% 10%, rgba(6, 182, 212, .35), transparent 40%),
		linear-gradient(135deg, var(--navy), var(--blue));
}
.lwsc-band .lwsc-eyebrow { color: #9fe7ff; }
.lwsc-band h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.35; }
.lwsc-promises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 32px; }
.lwsc-promises li { padding: 22px 24px; border-radius: 20px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.lwsc-promises strong { display: block; font-size: 17px; font-weight: 900; }
.lwsc-promises span { display: block; margin-top: 6px; color: rgba(255, 255, 255, .82); font-size: 14px; line-height: 1.8; }

/* 9. 相談 */
.lwsc-cta {
	display: grid;
	justify-items: center;
	gap: 18px;
	padding: clamp(40px, 6vw, 72px) 24px;
	border-radius: 44px;
	text-align: center;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(236, 248, 255, .92)),
		linear-gradient(135deg, rgba(10, 99, 199, .16), rgba(6, 182, 212, .12));
	box-shadow: 0 24px 90px rgba(7, 31, 67, .08);
}
.lwsc-cta h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.35; }
.lwsc-cta p { max-width: 620px; color: var(--muted); font-size: 16px; }
.lwsc-cta .lwsc-actions { justify-content: center; margin-top: 8px; }

/* レスポンシブ */
@media (max-width: 1100px) {
	.lwsc-items { grid-template-columns: repeat(2, 1fr); }
	.lwsc-flow { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
	.lwsc-flow li:nth-child(3)::after { display: none; }
}

@media (max-width: 860px) {
	.lwsc-hero, .lwsc-report { grid-template-columns: 1fr; }
	.lwsc-worries, .lwsc-menu { grid-template-columns: 1fr; }
	.lwsc-concept { grid-template-columns: 1fr; }
	.lwsc-arrow svg { transform: rotate(90deg); }
	.lwsc-docs { min-height: 360px; max-width: 520px; }
	.lwsc-menu { gap: 28px; }
}

@media (max-width: 599px) {
	.lwsc { gap: 64px; }
	.lwsc-hero h1 { font-size: 29px; line-height: 1.35; }
	.lwsc-lead { font-size: 16px; }
	.lwsc-items { grid-template-columns: 1fr; }
	.lwsc-item { grid-template-columns: auto 1fr; align-items: start; column-gap: 16px; }
	.lwsc-item .lwsc-icon { grid-row: span 2; }
	.lwsc-limit { grid-template-columns: 1fr; padding: 22px; }
	.lwsc-flow { grid-template-columns: 1fr; row-gap: 22px; }
	.lwsc-flow li { padding: 0 0 0 66px; min-height: 48px; }
	.lwsc-flow li::after { top: 48px; bottom: -22px; left: 23px; right: auto; width: 2px; height: auto; background: rgba(10, 99, 199, .2); display: block; }
	.lwsc-flow li:nth-child(3)::after { display: block; }
	.lwsc-flow li:last-child::after { display: none; }
	.lwsc-promises { grid-template-columns: 1fr; }
	.lwsc-report-card { padding: 20px; border-radius: 26px; }
	.lwsc-docs { min-height: 330px; }
	.lwsc-doc { width: 86%; padding: 18px; }
	.lwsc-actions { flex-direction: column; align-items: stretch; }
	.lwsc-menu-foot { padding: 20px; }
	.lwsc-band, .lwsc-cta { border-radius: 30px; }
}