/*
 * /evidence/（参考サイト・資料）専用。テンプレート page-acm-evidence.php とセット。
 *
 * ■ 色・形は TOP と /data/ の実際の値に合わせる（2026-09-30 ユーザー指摘「色合いとかデザイン違くない？」で是正）
 *   区切り     … TOP カテゴリ欄と同じ上線 2px #9bdeec（カードで囲まない）
 *   アイコン   … 線だけ・#007e9b・背景なし（TOP カテゴリ欄と同じ）
 *   小さな枠   … 地 #f6fbfd／枠 #dfedf2／角丸8px、ホバー #e7f7fb・#7cc9dd（TOP のカテゴリボタンと同じ）
 *   カード     … 白・枠 #d3eaf3・角丸12px・影 0 2px 7px #0a609a05（/data/ の .dl-card と同じ）
 *   補足の文字 … #526b80、本文 #09284b、筆記体 #00a8d0、リンクのホバー #007c99
 *   ⚠ グラデーション・塗りのアイコンタイル・濃い色の面は使わない（他のページに無い）
 * ■ 見出しは「日本語 → 右に筆記体の英字」。黄色下線 #fff18b。
 * ⚠ セレクタは `.acmev` から始め、SWELL の `.post_content h2` 等の装飾に負けないようにする。
 */
@font-face{font-family:'ACM Hand';src:url('../acm-minato/caveat.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}

.acmev{
	--ev-ink:#09284b; --ev-sub:#526b80; --ev-icon:#007e9b; --ev-hover:#007c99; --ev-script:#00a8d0;
	--ev-rule:#d3eaf3; --ev-line:#9bdeec; --ev-soft:#f6fbfd; --ev-soft-line:#dfedf2;
	color:var(--ev-ink);
}
.acmev :where(h1,h2,h3)::before,.acmev :where(h1,h2,h3)::after{ content:none !important; display:none !important; }
.acmev svg{ display:block; }

/* ══════════ ヒーロー ══════════ */
.acmev .acmev-hero{
	position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center;
	margin:4px 0 24px; border:1px solid var(--ev-rule); border-radius:12px; overflow:hidden; background:#fafdff;
}
.acmev .acmev-hero.-noimg{ grid-template-columns:1fr; }
.acmev .acmev-hero__body{ position:relative; z-index:1; padding:30px 8px 28px 30px; }
.acmev .acmev-hero__art{ position:relative; align-self:stretch; min-height:100%; }
.acmev .acmev-hero__art img{
	/* 素材はもともと淡い。デスク上のレポートと窓の外の街が入る位置で切り出し、左端だけ背景へ溶かす */
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% 88%;
	-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%); mask-image:linear-gradient(90deg,transparent 0%,#000 22%);
}

.acmev .acmev-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px; margin:0 0 12px; }
.acmev .acmev-head__ttl{
	margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
	color:var(--ev-ink) !important; font-size:25px !important; font-weight:700 !important; line-height:1.55 !important;
	text-decoration:underline; text-decoration-color:#fff18b; text-decoration-thickness:5px;
	text-underline-offset:3px; text-decoration-skip-ink:none;
}
.acmev .acmev-script{
	display:inline-block; color:var(--ev-script); font-family:'ACM Hand','Segoe Print',cursive;
	font-size:33px; font-weight:400; line-height:1; transform:rotate(-9deg);
}
.acmev .acmev-lead{ margin:0 0 18px; font-size:14px; line-height:1.9; color:var(--ev-sub); }

.acmev .acmev-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.acmev .acmev-stat{ margin:0; padding:10px 12px 9px; border:1px solid var(--ev-rule); border-radius:8px; background:#fff; }
.acmev .acmev-stat dt{ margin:0 0 2px; font-size:11px; font-weight:700; line-height:1.5; color:var(--ev-sub); }
.acmev .acmev-stat dd{ margin:0; font-size:12px; font-weight:700; line-height:1.3; color:var(--ev-ink); }
.acmev .acmev-stat dd b{ margin-right:2px; font-size:24px; font-weight:700; color:var(--ev-icon); font-variant-numeric:tabular-nums; }
.acmev .acmev-stat dd time{ display:inline-block; padding-top:6px; font-size:16px; font-weight:700; color:var(--ev-icon); font-variant-numeric:tabular-nums; }

/* ══════════ 分類から探す（TOP のカテゴリボタンと同じ見た目） ══════════ */
.acmev .acmev-toc{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; margin:0 0 36px; }
.acmev .acmev-toc__item{
	display:flex; align-items:center; gap:9px; min-height:48px; padding:7px 12px;
	border:1px solid var(--ev-soft-line); border-radius:8px; background:var(--ev-soft);
	color:var(--ev-ink); text-decoration:none; transition:background .15s ease, border-color .15s ease;
}
.acmev .acmev-toc__item:hover{ background:#e7f7fb; border-color:#7cc9dd; }
.acmev .acmev-toc__item:focus-visible{ outline:3px solid rgba(0,126,155,.35); outline-offset:2px; }
.acmev .acmev-toc__ic{ flex:0 0 auto; color:var(--ev-icon); }
.acmev .acmev-toc__ic svg{ width:20px; height:20px; }
.acmev .acmev-toc__txt{ flex:1 1 auto; min-width:0; font-size:13px; font-weight:700; line-height:1.45; }
.acmev .acmev-toc__num{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--ev-sub); font-variant-numeric:tabular-nums; }

/* ══════════ 分類（TOP カテゴリ欄と同じ「上線で区切る」形。カードで囲まない） ══════════ */
.acmev .acmev-sec{ margin:0 0 40px; padding-top:14px; border-top:2px solid var(--ev-line); scroll-margin-top:110px; }
.acmev .acmev-sec__head{ display:flex; align-items:center; gap:10px; margin:0 0 6px; }
.acmev .acmev-sec__ic{ flex:0 0 auto; color:var(--ev-icon); }
.acmev .acmev-sec__ic svg{ width:26px; height:26px; }
.acmev .acmev-sec__hgroup{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px; }
.acmev .acmev-sec__ttl{
	order:1; margin:0 !important; padding:0 !important; border:0 !important; background:none !important;
	color:var(--ev-ink) !important; font-size:19px !important; font-weight:700 !important; line-height:1.55 !important;
	text-decoration:underline; text-decoration-color:#fff18b; text-decoration-thickness:5px;
	text-underline-offset:3px; text-decoration-skip-ink:none;
}
/* 番号は見出しの右に筆記体（日本語 → 右に英字の並びに合わせる） */
.acmev .acmev-sec__no{ order:2; color:var(--ev-script); font-family:'ACM Hand','Segoe Print',cursive; font-size:24px; line-height:1; transform:rotate(-9deg); }
.acmev .acmev-sec__count{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--ev-sub); font-variant-numeric:tabular-nums; }
.acmev .acmev-sec__desc{ margin:0 0 16px; font-size:13px; line-height:1.8; color:var(--ev-sub); }

.acmev .acmev-grp{
	display:flex; align-items:center; gap:8px; margin:20px 0 10px !important; padding:0 !important;
	border:0 !important; background:none !important;
	color:var(--ev-ink) !important; font-size:14px !important; font-weight:700 !important; line-height:1.6 !important;
}
.acmev .acmev-grp__num{ order:1; font-size:12px; font-weight:700; color:var(--ev-sub); }
.acmev .acmev-grp::after{ content:'' !important; display:block !important; order:2; flex:1 1 auto; height:1px; background:var(--ev-rule) !important; }
.acmev .acmev-sec__desc + .acmev-grp{ margin-top:4px !important; }

/* ── 参考先のカード（/data/ の調査カードと同じ枠・角丸・影） ── */
.acmev .acmev-list{
	display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
	margin:0 !important; padding:0 !important; list-style:none !important;
}
.acmev .acmev-list > li{ margin:0 !important; padding:0 !important; list-style:none !important; }
.acmev .acmev-list > li::before,.acmev .acmev-list > li::marker{ content:none !important; display:none !important; }
.acmev .acmev-src{
	display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px;
	height:100%; box-sizing:border-box; padding:12px 14px 11px;
	border:1px solid var(--ev-rule); border-radius:12px; background:#fff; box-shadow:0 2px 7px #0a609a05;
	color:var(--ev-ink); text-decoration:none; transition:border-color .15s ease;
}
.acmev .acmev-src:hover{ border-color:#7cc9dd; }
.acmev .acmev-src:focus-visible{ outline:3px solid rgba(0,126,155,.35); outline-offset:2px; }
.acmev .acmev-src__body{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.acmev .acmev-src__name{ color:var(--ev-ink); font-size:14.5px; font-weight:700; line-height:1.6; }
.acmev .acmev-src:hover .acmev-src__name{ color:var(--ev-hover); text-decoration:underline; text-underline-offset:3px; }
.acmev .acmev-src__desc{ font-size:12.5px; line-height:1.75; color:var(--ev-sub); }
.acmev .acmev-src__host{ display:flex; align-items:center; gap:4px; margin-top:3px; font-size:11px; line-height:1.5; color:var(--ev-sub); overflow-wrap:anywhere; }
.acmev .acmev-src__host svg{ flex:0 0 auto; width:11px; height:11px; }
.acmev .acmev-src__go{ margin-top:4px; color:var(--ev-icon); transition:transform .15s ease; }
.acmev .acmev-src__go svg{ width:15px; height:15px; }
.acmev .acmev-src:hover .acmev-src__go{ transform:translateX(2px); }

/* ── 自社独自調査データ（/data/ の引用ボックスと同じ淡い面で少しだけ目立たせる） ── */
.acmev .acmev-sec.-own{ padding:18px 18px 18px; border:1px solid var(--ev-rule); border-top:2px solid var(--ev-line); border-radius:0 0 12px 12px; background:#f5fbff; }
.acmev .acmev-sec.-own .acmev-list{ grid-template-columns:1fr; }
.acmev .acmev-sec.-own .acmev-src{ align-items:center; }
.acmev .acmev-sec.-own .acmev-src__go{ margin-top:0; }

/* ══════════ 注記 ══════════ */
.acmev .acmev-notes{ margin:8px 0 0; padding:14px 18px; border:1px solid var(--ev-rule); border-radius:12px; background:#fafdff; }
.acmev .acmev-notes ul{ margin:0 !important; padding:0 !important; list-style:none !important; }
.acmev .acmev-notes li{
	position:relative; margin:0 !important; padding:0 0 0 1.3em !important; list-style:none !important;
	font-size:12.5px; line-height:1.9; color:var(--ev-sub);
}
.acmev .acmev-notes li::before{ content:'※' !important; display:block !important; position:absolute; left:0; top:0; background:none !important; width:auto !important; height:auto !important; }

/* ══════════ タブレット・スマホ ══════════ */
@media (max-width:760px){
	.acmev .acmev-hero{ grid-template-columns:1fr; }
	.acmev .acmev-hero__art{ order:-1; height:150px; min-height:0; }
	.acmev .acmev-hero__art img{
		object-position:50% 60%;
		-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%); mask-image:linear-gradient(180deg,#000 45%,transparent 100%);
	}
	.acmev .acmev-hero__body{ padding:0 18px 20px; margin-top:-24px; }
}
@media (max-width:600px){
	.acmev .acmev-head__ttl{ font-size:22px !important; }
	.acmev .acmev-script{ font-size:28px; }
	.acmev .acmev-stats{ gap:6px; }
	.acmev .acmev-stat{ padding:9px 9px 8px; }
	.acmev .acmev-stat dt{ font-size:10px; }
	.acmev .acmev-stat dd b{ font-size:21px; }
	.acmev .acmev-stat dd time{ font-size:14px; }
	.acmev .acmev-toc{ grid-template-columns:1fr 1fr; margin-bottom:28px; }
	.acmev .acmev-toc__item{ gap:7px; padding:7px 9px; }
	.acmev .acmev-toc__txt{ font-size:12px; }
	.acmev .acmev-toc__num{ display:none; }
	.acmev .acmev-sec{ margin-bottom:32px; }
	.acmev .acmev-sec__ttl{ font-size:17px !important; }
	.acmev .acmev-sec__no{ font-size:21px; }
	.acmev .acmev-sec.-own{ padding:15px 13px; }
	.acmev .acmev-list{ grid-template-columns:1fr; gap:8px; }
	.acmev .acmev-src{ padding:11px 12px; }
	}
@media (prefers-reduced-motion:reduce){
	.acmev .acmev-toc__item,.acmev .acmev-src,.acmev .acmev-src__go{ transition:none; }
	.acmev .acmev-src:hover .acmev-src__go{ transform:none; }
}