@charset "UTF-8";
/* ============================================================
 * theme.css（2026-10 リニューアル）
 * style.css の後に読み込み、色・質感を「今どきのセキュリティ」調に上書きする。
 * このファイルの読み込みを外せば元のデザインに戻る。
 * ============================================================ */

:root{
	--bg-0:#07111f;      /* 最も暗い背景 */
	--bg-1:#0b1830;      /* セクション背景 */
	--bg-2:#10213f;      /* パネル */
	--bg-3:#172b50;      /* パネル（強調） */
	--line:rgba(0,212,255,.22);
	--line-strong:rgba(0,212,255,.55);
	--cyan:#00d4ff;
	--blue:#2f6bff;
	--alert:#ff3b57;
	--alert-2:#ff8a3d;
	--warn:#ffc233;
	--text:#e8eef8;
	--muted:#9db0cc;
	--glow:0 0 24px rgba(0,212,255,.35);
	--cta:linear-gradient(135deg,#1f5bff 0%,#00b8ff 100%);
	--cta-shadow:rgba(0,120,255,.45);
	--brand:linear-gradient(135deg,#2f6bff 0%,#00d4ff 100%);
}

body{
	font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;
	background:var(--bg-0);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
}
html{ background:var(--bg-0); }
a{ transition:opacity .2s, box-shadow .2s, transform .2s, background .2s; }

/* 共通：グリッド線の質感 */
.cy-grid,
#sec1, #sec3, #sec8, #sdform, #sec1-1, #sec3-1{
	background-image:
		linear-gradient(rgba(0,212,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,212,255,.05) 1px, transparent 1px);
	background-size:40px 40px;
}

/* ---------- ヘッダー ---------- */
#menuF{
	background:rgba(255,255,255,.94);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	box-shadow:0 2px 20px rgba(0,0,0,.35);
	border-bottom:2px solid transparent;
	border-image:var(--brand) 1;
}
.cBtn ul li{
	border-radius:999px;
	padding:10px 22px;
	background:#0a1226;
}
.cBtn .buy{
	background:var(--cta);
	box-shadow:0 6px 18px var(--cta-shadow);
}
.cBtn .buy:hover,
.cBtn ul li:hover{
	background:var(--cta);
	box-shadow:0 8px 24px var(--cta-shadow);
	transform:translateY(-1px);
}

/* ---------- ヒーロー ---------- */
.headerLine{
	background:
		radial-gradient(ellipse at 50% 120%, rgba(0,140,255,.30), transparent 55%),
		linear-gradient(180deg, rgba(6,11,23,.55) 0%, rgba(6,11,23,.9) 100%),
		url(../images/bg_top.jpg) center center / cover no-repeat;
}
.headerLine:before{
	content:"";
	position:absolute; left:0; top:0; right:0; bottom:0;
	background-image:
		linear-gradient(rgba(0,212,255,.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,212,255,.07) 1px, transparent 1px);
	background-size:48px 48px;
	-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
	mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
	pointer-events:none;
}
.headerLine:after{   /* スキャンライン */
	content:"";
	position:absolute; left:0; right:0; top:-20%;
	height:20%;
	background:linear-gradient(180deg, transparent, rgba(0,212,255,.10), transparent);
	animation:cy-scan 6s linear infinite;
	pointer-events:none;
}
@keyframes cy-scan{ to{ top:110%; } }
.headerLine .playground{ position:relative; z-index:1; }
.headerLine .slide_logo{ z-index:1; }
@media (prefers-reduced-motion: reduce){ .headerLine:after{ animation:none; display:none; } }

.playground .viewport{ box-shadow:none; display:block; }
.playground .viewport .tlt{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:column;
	flex-direction:column;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:center;
	justify-content:center;
	height:100%;
}
.playground .viewport .tlt .hero_eyebrow{ -webkit-order:-1; order:-1; }
.playground .viewport .tlt{
	color:#fff;
	text-shadow:0 0 18px rgba(0,212,255,.45);
	letter-spacing:.02em;
}
.hero_eyebrow{
	display:table;
	font-size:13px !important;
	font-weight:700 !important;
	letter-spacing:.25em;
	color:var(--cyan);
	border:1px solid var(--line-strong);
	border-radius:999px;
	padding:6px 18px;
	margin:0 auto 24px;
	text-shadow:none;
	background:rgba(0,212,255,.08);
}
.hero_eyebrow i{ color:var(--cyan); margin-right:6px; }
.btn_down_p{
	color:var(--muted);
	font-weight:500;
}
a.btn_down:before{
	border-left-color:var(--cyan);
	border-bottom-color:var(--cyan);
	filter:drop-shadow(0 0 6px rgba(0,212,255,.8));
}
a.btn_down:hover{ background-color:rgba(0,212,255,.12); }
a.btn_down_b:before{
	border-left-color:var(--cyan);
	border-bottom-color:var(--cyan);
}
a.btn_down_b:hover{ background-color:rgba(0,212,255,.12); }

/* ---------- sec1：タイトル ---------- */
#sec1{
	background-color:var(--bg-1);
	color:var(--text);
}
#sec1 h1{
	color:#fff;
	letter-spacing:.02em;
}
#sec1 h1 span{
	display:table;
	width:auto;
	margin-left:auto;
	margin-right:auto;
	background:rgba(0,212,255,.10);
	color:#7fe3ff;
	border:1px solid var(--line-strong);
	border-radius:999px;
	padding:8px 28px;
	font-size:45%;
	letter-spacing:.15em;
	margin-bottom:24px;
}
#sec1 h1 span:before{
	content:"\f132";   /* FontAwesome: shield */
	font-family:FontAwesome;
	margin-right:10px;
}
#sec1 p{ color:var(--muted); font-size:16px; }

/* ---------- sec2：脅威の説明 ---------- */
#sec2{
	background:linear-gradient(180deg,var(--bg-1) 0%,var(--bg-2) 100%);
	color:var(--text);
}
#sec2 .cnr_ttl h3{ color:#fff; }
#sec2 img{
	border-radius:14px;
	border:1px solid var(--line);
	box-shadow:0 20px 50px rgba(0,0,0,.5);
}
#sec2 .col-sm-6 p{ color:var(--muted); line-height:1.9; }
#sec2 .col-sm-6 h4{
	background:rgba(255,59,87,.10);
	border-left:4px solid var(--alert);
	color:#ffd5db;
	padding:10px 14px;
	border-radius:0 8px 8px 0;
	line-height:1.6;
}
#sec2 .nowdo{
	color:#fff;
	font-weight:900;
}

/* ---------- sec3：対策の考え方 ---------- */
#sec3{
	background-color:var(--bg-2);
}
#sec3 .col-sm-12 p{ color:var(--muted); line-height:1.9; }
#sec3 .nowdo{ color:#fff; font-weight:900; }
#sec3 .nowdo span{ color:#7fe3ff; }
.saitekika i{ color:var(--cyan); text-shadow:var(--glow); }
.saitekika h3{
	background:var(--brand);
	border-radius:16px;
	box-shadow:0 20px 60px rgba(47,107,255,.35);
	font-size:42px;
}

/* ---------- sec4：3サービス ---------- */
#sec4{
	background:
		linear-gradient(180deg, rgba(6,11,23,.6), rgba(6,11,23,.85)),
		url(../images/bg_cyber.gif) center center / cover no-repeat;
	padding-bottom:20px;
}
.team3 .col-md-4{
	position:relative;
	padding-top:30px;
}
.team3 .col-md-4:before{
	content:"";
	position:absolute; top:0; bottom:0; left:12px; right:12px;
	background:rgba(15,26,51,.72);
	border:1px solid var(--line);
	border-radius:18px;
	-webkit-backdrop-filter:blur(4px);
	backdrop-filter:blur(4px);
	transition:border-color .3s, box-shadow .3s;
}
.team3 .col-md-4:hover:before{
	border-color:var(--line-strong);
	box-shadow:var(--glow);
}
.team3 .col-md-4 > *{ position:relative; }
.team3 h5:first-child{
	display:inline-block;
	color:var(--cyan);
	font-size:14px;
	letter-spacing:.1em;
}
.team3 h4{
	font-family:'Montserrat','Noto Sans JP',sans-serif;
	font-weight:800;
	text-shadow:0 0 20px rgba(0,212,255,.5);
}
.team3 p{ color:var(--muted); }
.team3 .ef1 img, .team3 .ef2 img, .team3 .ef3 img{
	filter:drop-shadow(0 0 18px rgba(0,153,255,.55));
}

/* ---------- サービス詳細（ESET / UTM / SD） ---------- */
.svc{
	background:var(--bg-1);
	color:var(--text);
	padding-bottom:20px;
	border-top:1px solid rgba(255,255,255,.04);
}
.svc-eset{ --svc-color:#22d3c5; --svc-bg:rgba(34,211,197,.07); }
.svc-utm { --svc-color:#ff8a3d; --svc-bg:rgba(255,138,61,.07); background:var(--bg-2); }
.svc-sd  { --svc-color:#7ddc4f; --svc-bg:rgba(125,220,79,.07); }

.svc_cat{
	background:transparent;
	color:var(--svc-color);
	border:1px solid var(--svc-color);
	border-radius:999px;
	font-size:14px;
	letter-spacing:.15em;
	padding:5px 20px;
}
.svc_name h3{
	background:none;
	color:#fff;
	font-family:'Montserrat','Noto Sans JP',sans-serif;
	font-weight:800;
	padding:10px 20px 18px;
	position:relative;
	text-shadow:0 0 24px rgba(0,212,255,.35);
}
.svc_name h3:after{
	content:"";
	position:absolute; left:50%; bottom:0;
	width:120px; height:3px; margin-left:-60px;
	background:var(--svc-color);
	border-radius:3px;
	box-shadow:0 0 12px var(--svc-color);
}
.svc_name h3 span{
	font-family:'Noto Sans JP',sans-serif;
	color:var(--muted);
}
.svc_lead{
	color:var(--text);
	font-weight:500;
}
.svc_point{
	background:var(--svc-bg);
	border:1px solid rgba(255,255,255,.06);
	border-left:4px solid var(--svc-color);
	border-radius:0 12px 12px 0;
	box-shadow:none;
}
.svc_point h4{ color:#fff; }
.svc_point p{ color:var(--muted); }
.svc_func li{
	background:rgba(255,255,255,.03);
	border:1px solid var(--line);
	color:var(--text);
	border-radius:10px;
	font-weight:500;
}
.svc_func li i{ color:var(--svc-color); }
.svc_img img{ filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.svc .note{ color:var(--muted); }

.sd_txt{ color:var(--muted); }
.sd_ttl{
	background:linear-gradient(90deg, rgba(125,220,79,.25), rgba(0,212,255,.25));
	border:1px solid var(--line);
	border-bottom:none;
	border-radius:14px 14px 0 0;
	color:#fff;
	font-size:24px;
	letter-spacing:.05em;
}
.sd_flow{
	background:rgba(255,255,255,.02);
	border:1px solid var(--line);
	border-top:none;
	border-radius:0 0 14px 14px;
}
.sd_step{
	background:var(--bg-3);
	border:1px solid rgba(255,255,255,.06);
	border-radius:12px;
}
.sd_step i{
	background:var(--brand);
	box-shadow:0 0 18px rgba(0,212,255,.4);
}
.sd_step p{ color:var(--text); }
.sd_step small{ color:var(--muted); }
.sd_arrow{ color:var(--cyan); }
.sd_detect{
	color:#fff;
	border-bottom-color:var(--svc-color);
}
.sd_report img{
	border:1px solid var(--line);
	border-radius:10px;
	box-shadow:0 20px 50px rgba(0,0,0,.6);
}
.sd_report p{ color:var(--muted); }
.sd_free{
	background:linear-gradient(135deg, rgba(31,91,255,.18), rgba(0,184,255,.08));
	border:1px solid var(--line-strong);
	border-radius:16px;
	box-shadow:0 0 40px rgba(0,140,255,.18);
}
.sd_free p{ color:#fff; }
.sd_free_m{
	color:#fff;
	text-shadow:0 0 20px rgba(0,212,255,.6);
}
.sd_free a{
	background:var(--cta);
	border-radius:999px;
	padding:12px 36px;
	box-shadow:0 8px 24px var(--cta-shadow);
}
.sd_free a:hover{
	background:var(--cta);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 12px 30px var(--cta-shadow);
}

/* ---------- sec7：ナバックの強み ---------- */
#sec7{
	background:
		linear-gradient(180deg, rgba(6,11,23,.75), rgba(6,11,23,.9)),
		url(../images/bg_line4.jpg) center center / cover no-repeat;
}
#sec7 h3 span{
	background:var(--brand);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:var(--cyan);
	padding-bottom:6px;
}
#sec7 p{ color:var(--text); line-height:2; }

/* ---------- sec8：CTA ---------- */
#sec8{
	background-color:var(--bg-1);
	color:var(--text);
}
.cBusiness h3{ color:#fff; }
.cBusiness h4{
	background:var(--brand);
	-webkit-background-clip:text;
	background-clip:text;
	-webkit-text-fill-color:transparent;
	color:var(--cyan);
	padding-bottom:4px;
}
.Present a.cl_b,
#trialbox01 a.cl_b, #sec2-1 a.cl_b, #sec3-1 a.cl_b{
	background:var(--cta);
	border:none;
	border-radius:999px;
	box-shadow:0 10px 30px var(--cta-shadow);
	text-shadow:none;
	color:#fff;
}
.Present a.cl_or,
#trialbox01 a.cl_or, #sec2-1 a.cl_or, #sec3-1 a.cl_or{
	background:rgba(0,212,255,.06);
	border:1px solid var(--line-strong);
	border-radius:999px;
	box-shadow:none;
	text-shadow:none;
	color:#fff;
}
.Present a.cl_b:hover,
#trialbox01 a.cl_b:hover, #sec2-1 a.cl_b:hover, #sec3-1 a.cl_b:hover{
	color:#fff;
	text-decoration:none;
	transform:translateY(-2px);
	box-shadow:0 14px 36px var(--cta-shadow);
}
.Present a.cl_or:hover,
#trialbox01 a.cl_or:hover, #sec2-1 a.cl_or:hover, #sec3-1 a.cl_or:hover{
	color:#fff;
	text-decoration:none;
	background:rgba(0,212,255,.14);
	box-shadow:var(--glow);
}
.centPic{
	border:1px solid var(--line-strong);
	border-radius:18px;
	background:rgba(0,212,255,.04);
	color:var(--muted);
	padding:28px 0 20px;
}
.centPic p span{
	color:#fff;
	font-family:'Montserrat','Noto Sans JP',sans-serif;
	text-shadow:0 0 20px rgba(0,212,255,.5);
	margin:6px 0;
}
.centPic p span i{ color:var(--cyan); }

/* ---------- フッター・ページトップ ---------- */
.lineBlack{
	background:var(--bg-0);
	border-top:1px solid var(--line);
}
.footer p{ color:var(--muted); }
.move-page-top{
	background:var(--brand);
	border-radius:50%;
	box-shadow:var(--glow);
}

/* ---------- trial.html ---------- */
#sec1-1{
	background-color:var(--bg-1);
	color:var(--text);
	padding-top:140px;
}
#sec1-1 h1{ color:#fff; }
#trialbox01 p{ color:var(--text); }
.col_red{ color:#4fd8ff; }
#sec2-1{
	background:
		linear-gradient(180deg, rgba(6,11,23,.85), rgba(6,11,23,.92)),
		url(../images/bg_trial.jpg) center / cover no-repeat;
	color:var(--text);
}
#sec2-1 h3{
	color:#fff;
	border-top:1px solid var(--line-strong);
	border-bottom:1px solid var(--line-strong);
	text-shadow:none;
}
#trialbox02{
	background:rgba(15,26,51,.85);
	border:1px solid var(--line);
	border-radius:16px;
	opacity:1;
	box-shadow:0 20px 50px rgba(0,0,0,.5);
}
#trialbox02 div ol li{
	background-color:rgba(255,255,255,.04);
	border-left-color:var(--cyan);
	box-shadow:none;
	color:var(--text);
	border-radius:0 8px 8px 0;
}
#trialbox02 div ol li:before{ background:var(--cta); }
#trialbox02 .tcenter strong{ color:var(--text); }
#trialbox02 img{ border-radius:10px; }
#sec3-1{
	background-color:var(--bg-1);
	color:var(--text);
}
#sec3-1 h3{ color:#fff; }
#sec3-1 table th{
	background:var(--bg-3);
	color:#fff;
	border:2px solid var(--bg-1);
}
#sec3-1 table td{
	background:var(--bg-2);
	color:var(--text);
	border:2px solid var(--bg-1);
}

/* ---------- form.php ---------- */
#sdform{
	background-color:var(--bg-1);
	color:var(--text);
}
#sdform h1{
	background:var(--brand);
	border-radius:16px;
	box-shadow:0 20px 60px rgba(47,107,255,.3);
	font-family:'Montserrat','Noto Sans JP',sans-serif;
}
#sdform h1 span{ font-family:'Noto Sans JP',sans-serif; }
.f_steps li{
	background:var(--bg-2);
	color:var(--muted);
	border:1px solid rgba(255,255,255,.06);
	border-radius:999px;
}
.f_steps li.on{
	background:var(--cta);
	color:#fff;
	border-color:transparent;
}
.f_lead{ color:var(--muted); }
.f_req{ color:#ff6b80; }
.f_table th{
	background:var(--bg-3);
	color:#fff;
	border:2px solid var(--bg-1);
}
.f_table td{
	background:var(--bg-2);
	color:var(--text);
	border:2px solid var(--bg-1);
}
.f_table input[type=text],
.f_table input[type=tel],
.f_table input[type=email],
.f_table select,
.f_table textarea{
	background:var(--bg-0);
	color:#fff;
	border:1px solid rgba(0,212,255,.3);
	border-radius:8px;
}
.f_table input:focus,
.f_table select:focus,
.f_table textarea:focus{
	outline:none;
	border-color:var(--cyan);
	box-shadow:0 0 0 3px rgba(0,212,255,.2);
}
.f_table input::placeholder{ color:#5d6f8c; }
.f_ex{ color:var(--muted); }
.f_err{ color:#ff6b80; }
.f_err_top{
	background:rgba(255,59,87,.1);
	border:1px solid rgba(255,59,87,.6);
	border-radius:10px;
}
.f_agree{
	background:rgba(0,212,255,.06);
	border-left-color:var(--cyan);
	border-radius:0 12px 12px 0;
	color:var(--text);
}
.f_agree p{ color:var(--muted); }
.f_btn{
	background:var(--cta);
	border:none;
	border-radius:999px;
	box-shadow:0 10px 30px var(--cta-shadow);
	text-shadow:none;
}
.f_btn:hover, .f_btn:focus{
	transform:translateY(-2px);
	opacity:1;
	box-shadow:0 14px 36px var(--cta-shadow);
}
.f_btn_sub{
	background:transparent;
	border:1px solid var(--line-strong);
	box-shadow:none;
}
.f_btn_sub:hover, .f_btn_sub:focus{
	background:rgba(0,212,255,.12);
	box-shadow:var(--glow);
}
.f_done{ color:var(--text); }
.f_done_ttl{ color:#7ddc4f; }
.f_tel{ color:#fff; font-family:'Montserrat','Noto Sans JP',sans-serif; }

/* ---------- スマホ ---------- */
@media screen and (max-width: 767px){
	.saitekika h3{ font-size:24px; padding:20px; }
	.team3 .col-md-4{ margin-bottom:20px; }
	.team3 .col-md-4:before{ left:15px; right:15px; }
	#sec1 h1 span{ font-size:55%; padding:6px 16px; letter-spacing:.08em; }
	.hero_eyebrow{ font-size:11px !important; letter-spacing:.15em; }
	#trialbox01 a.cl_b, #trialbox01 a.cl_or,
	#sec3-1 a.cl_b, #sec3-1 a.cl_or{
		display:block;
		width:100%;
		margin:0 0 12px;
		font-size:1.7rem;
		padding:16px 10px;
	}
	#trialbox01{ margin:25px 0; }
}

/* ============================================================
 * 白基調エリア（2026-10-19）
 * トップの ESET 以下、trial.html・form.php 全体を
 * 「誠実に対応する」印象の白背景にする。
 * 暗色テーマの変数を明るい値に差し替えたうえで、個別の色を調整。
 * ============================================================ */
.svc, #sec7, #sec8, body.page-light{
	--bg-0:#ffffff;
	--bg-1:#ffffff;
	--bg-2:#f4f7fb;
	--bg-3:#e8eef7;
	--text:#1d2b45;
	--muted:#56657e;
	--line:rgba(16,76,170,.14);
	--line-strong:rgba(16,90,200,.35);
	--cyan:#0a6fd6;
	--glow:0 6px 20px rgba(16,90,200,.15);
	--cta-shadow:rgba(16,90,220,.25);
	color:var(--text);
}
body.page-light{ background:#fff; }
html:has(body.page-light){ background:#fff; }

/* グリッド模様・発光は使わない */
#sec8, body.page-light #sdform, body.page-light #sec1-1, body.page-light #sec3-1{
	background-image:none;
}

/* --- サービス詳細 --- */
.svc{ border-top:1px solid #e3e9f2; }
.svc-eset{ --svc-color:#0e9c93; --svc-bg:#eef8f7; }
.svc-utm { --svc-color:#df6a14; --svc-bg:#fdf3ea; background:#f7f9fc; }
.svc-sd  { --svc-color:#3f8f1c; --svc-bg:#f0f7ea; }
.svc_name h3{ color:#12203a; text-shadow:none; }
.svc_name h3:after{ box-shadow:none; }
.svc_point{ border-color:#e3e9f2; border-left-color:var(--svc-color); }
.svc_point h4{ color:var(--text); }
.svc_func li{ background:#fff; box-shadow:0 1px 3px rgba(16,40,80,.06); }
.svc_img img{ filter:drop-shadow(0 12px 24px rgba(16,40,80,.18)); }
.sd_ttl{ background:var(--brand); border:none; }
.sd_flow{ background:#f4f7fb; border-color:#dbe4f0; }
.sd_step{ background:#fff; border-color:#e3e9f2; box-shadow:0 1px 4px rgba(16,40,80,.06); }
.sd_step i{ box-shadow:none; }
.sd_detect{ color:var(--text); }
.sd_report img{ border-color:#dbe4f0; box-shadow:0 10px 24px rgba(16,40,80,.12); }
.sd_free{ background:#f2f7ff; border:2px solid #b9d3f5; box-shadow:none; }
.sd_free p{ color:var(--text); }
.sd_free_m{ color:#0a5bd6; text-shadow:none; }
a.btn_down_b:before{ filter:none; }

/* --- ナバックの強み --- */
#sec7{
	background:#f4f7fb;
}
#sec7 h3{ color:#12203a; }
#sec7 p{ color:var(--text); }
#sec7 a.btn_down:before{ filter:none; }

/* --- CTA --- */
#sec8{ background-color:#fff; }
.cBusiness h3{ color:#12203a; }
.Present a.cl_or,
body.page-light a.cl_or{
	color:var(--text) !important;
	background:#fff !important;
}
.Present a.cl_or:hover,
body.page-light a.cl_or:hover{
	background:#f2f7ff !important;
}
.centPic{ background:#f4f7fb; border-color:#dbe4f0; color:var(--muted); }
.centPic p span{ color:#12203a; text-shadow:none; }

/* --- フッター（白ページでも紺で締める） --- */
.lineBlack{
	background:#10264a;
	border-top:none;
}
.lineBlack .footer p{ color:#c3d1e8; }

/* --- trial.html --- */
body.page-light #sec1-1{ background-color:#fff; }
body.page-light #sec1-1 h1{ color:#12203a; }
body.page-light #sec2-1{
	background:
		linear-gradient(180deg, rgba(244,247,251,.94), rgba(244,247,251,.96)),
		url(../images/bg_trial.jpg) center / cover no-repeat;
}
body.page-light #sec2-1 h3{ color:#12203a; }
body.page-light #trialbox02{
	background:#fff;
	border-color:#dbe4f0;
	box-shadow:0 10px 30px rgba(16,40,80,.08);
}
body.page-light #trialbox02 div ol li{ background-color:#f4f7fb; }
body.page-light #sec3-1 table th{ color:var(--text); }

/* --- form.php --- */
body.page-light #sdform h1{ box-shadow:0 12px 30px rgba(16,90,220,.18); }
body.page-light .f_table th{ color:var(--text); }
body.page-light .f_table input[type=text],
body.page-light .f_table input[type=tel],
body.page-light .f_table input[type=email],
body.page-light .f_table select,
body.page-light .f_table textarea{
	background:#fff;
	color:var(--text);
	border-color:#c5d3e6;
}
body.page-light .f_table input::placeholder{ color:#98a6bb; }
body.page-light .f_btn_sub{ color:var(--text); }
body.page-light .f_agree{ background:#f2f7ff; border-left-color:#0a6fd6; }
body.page-light .f_tel{ color:#12203a; }
body.page-light .f_err{ color:#d42a45; }
body.page-light .f_req{ color:#d42a45; }
body.page-light .f_err_top{ background:#fff3f5; border-color:#f1a3b0; }

/* ============================================================
 * トップ上部を明るく（2026-10-19）
 * 黒に近い紺 → 明るめのコーポレートブルー。sec1・sec3 は白系。
 * ============================================================ */
.headerLine{
	background:
		linear-gradient(180deg, rgba(20,70,150,.55) 0%, rgba(12,48,110,.78) 100%),
		url(../images/bg_top.jpg) center center / cover no-repeat;
}
.headerLine:after{ background:linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent); }
.playground .viewport .tlt{ text-shadow:0 2px 12px rgba(0,30,80,.5); }
.btn_down_p{ color:#d6e4f7; }
.hero_eyebrow{ color:#bfe9ff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); }
.hero_eyebrow i{ color:#bfe9ff; }
.headerLine a.btn_down:before{ border-left-color:#fff; border-bottom-color:#fff; filter:none; }

/* sec1・sec3：白系 */
#sec1, #sec3{
	--bg-1:#ffffff;
	--bg-2:#f2f6fb;
	--text:#1d2b45;
	--muted:#56657e;
	--line-strong:rgba(16,90,200,.35);
	--cyan:#0a6fd6;
	color:var(--text);
	background-image:none;
}
#sec1{ background-color:#fff; }
#sec1 h1{ color:#12203a; }
#sec1 h1 span{ background:#eaf3ff; color:#0a5bd6; border-color:#b9d3f5; }
#sec3{ background-color:#f2f6fb; }
#sec3 .nowdo{ color:#12203a; }
#sec3 .nowdo span{ color:#0a5bd6; }
#sec3 .col-sm-12 p{ color:#3c4b63; }
.saitekika h3{ box-shadow:0 14px 36px rgba(16,90,220,.25); }
.saitekika i{ text-shadow:none; }

/* sec2：明るめの紺 */
#sec2{
	--bg-1:#15386e;
	--bg-2:#1c4787;
	--muted:#d0dcef;
	--line:rgba(255,255,255,.2);
}
#sec2 img{ border-color:rgba(255,255,255,.25); box-shadow:0 16px 36px rgba(0,20,60,.35); }
#sec2 .col-sm-6 h4{ background:rgba(255,255,255,.95); color:#c4223b; border-left-color:#e2384f; }
#sec2 a.btn_down:before{ border-left-color:#fff; border-bottom-color:#fff; filter:none; }

/* sec4：明るめの青 */
#sec4{
	background:
		linear-gradient(180deg, rgba(18,64,140,.62), rgba(14,52,118,.8)),
		url(../images/bg_cyber.gif) center center / cover no-repeat;
}
.team3 .col-md-4:before{
	background:rgba(255,255,255,.1);
	border-color:rgba(255,255,255,.28);
}
.team3 .col-md-4:hover:before{ border-color:rgba(255,255,255,.6); box-shadow:0 10px 30px rgba(0,20,60,.3); }
.team3 h5:first-child{ color:#bfe9ff; }
.team3 h4{ text-shadow:0 2px 10px rgba(0,30,80,.45); }
.team3 p{ color:#dbe6f5; }
#sec4 a.btn_down:before{ border-left-color:#fff; border-bottom-color:#fff; filter:none; }

/* サービス名の読み（～ イーセット ～ など）は改行して2行目に表示 */
.svc_name h3 span{
	display:block;
	margin:10px 0 0;
	font-size:38%;
}
@media screen and (max-width: 767px){
	.svc_name h3 span{ font-size:50%; margin-top:6px; }
}

/* ============================================================
 * ESET ロゴ・SECURITY DOCTOR 仕組み図（2026-10-20）
 * ============================================================ */
/* ESET ロゴ（白抜き部分が透過のため、暗い背景では白い台に載せる） */
.svc_logo{
	display:block;
	width:220px;
	max-width:60%;
	height:auto;
	margin:0 auto;
}
.team3 h4.h4_logo{ text-shadow:none; margin:14px 0 10px; line-height:1; }
.logo_plate{
	display:inline-block;
	background:#fff;
	border-radius:12px;
	padding:8px 16px;
	box-shadow:0 4px 14px rgba(0,20,60,.25);
}
.logo_plate img{ display:block; height:38px; width:auto; }

/* オプション注記 */
.svc_opt{
	max-width:900px;
	margin:14px auto 0;
	text-align:left;
	font-size:15px;
	color:var(--text);
	background:#fff8e6;
	border:1px solid #f3d68a;
	border-radius:10px;
	padding:10px 14px;
}
.svc_opt i{ color:#c98a00; margin-right:6px; }
.svc_opt strong{ color:#b06f00; }

/* 仕組み図 */
.sdmap{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	-webkit-justify-content:space-between;
	justify-content:space-between;
	background:#f4f7fb;
	border:1px solid #dbe4f0;
	border-top:none;
	border-radius:0 0 14px 14px;
	padding:30px 24px;
	margin-bottom:30px;
}
.sdm_col{
	-webkit-flex:1 1 0;
	flex:1 1 0;
	text-align:center;
}
.sdm_node{
	background:#fff;
	border:1px solid #dbe4f0;
	border-radius:14px;
	padding:18px 10px 14px;
	box-shadow:0 2px 8px rgba(16,40,80,.06);
}
.sdm_node i{
	display:inline-block;
	width:64px; height:64px; line-height:64px;
	border-radius:50%;
	background:var(--brand);
	color:#fff;
	font-size:30px;
}
.sdm_label{
	font-weight:900;
	font-size:16px;
	color:#12203a;
	margin:10px 0 0;
}
.sdm_sub{
	font-size:12px;
	color:var(--muted);
	line-height:1.6;
	margin:6px 0 0;
}
.sdm_plus{
	font-size:28px;
	font-weight:900;
	color:#0a6fd6;
	line-height:1;
	margin:8px 0;
}
.sdm_hl{ border:2px solid #0a6fd6; }
.sdm_hl .sdm_label{ color:#0a5bd6; }
.sdm_detect i{ background:linear-gradient(135deg,#ff7a45,#e2384f); }
.sdm_detect{ border:2px solid #f2b3bd; }
.sdm_arrow{
	-webkit-flex:0 0 46px;
	flex:0 0 46px;
	height:24px;
	position:relative;
}
.sdm_arrow:before{   /* 線 */
	content:"";
	position:absolute; left:6px; right:14px; top:50%;
	height:4px; margin-top:-2px;
	background:#0a6fd6;
	border-radius:2px;
}
.sdm_arrow:after{    /* 矢じり */
	content:"";
	position:absolute; right:4px; top:50%;
	margin-top:-9px;
	border-left:14px solid #0a6fd6;
	border-top:9px solid transparent;
	border-bottom:9px solid transparent;
}
.sdm_notify{
	-webkit-flex:1.25 1 0;
	flex:1.25 1 0;
	text-align:left;
}
.sdm_head{
	font-weight:900;
	font-size:16px;
	color:#12203a;
	margin:0 0 8px;
	text-align:center;
}
.sdm_head i{ color:#e2384f; margin-right:6px; }
.sdm_out{
	display:-webkit-flex;
	display:flex;
	-webkit-align-items:center;
	align-items:center;
	background:#fff;
	border:1px solid #dbe4f0;
	border-radius:10px;
	padding:10px 12px;
	margin-bottom:8px;
}
.sdm_out i{
	-webkit-flex:0 0 38px;
	flex:0 0 38px;
	height:38px; line-height:38px;
	text-align:center;
	border-radius:50%;
	background:#eaf3ff;
	color:#0a5bd6;
	font-size:18px;
	margin-right:10px;
}
.sdm_out span{ font-weight:700; font-size:14px; color:#12203a; line-height:1.4; }
.sdm_out small{ display:block; font-weight:400; font-size:11px; color:var(--muted); }
.sdm_opt{ border-style:dashed; }
.sdm_opt i{ background:#f2f4f7; color:#7a879b; }
.sdm_opt small{ color:#b06f00; font-weight:700; }

@media screen and (max-width: 767px){
	.sdmap{
		-webkit-flex-direction:column;
		flex-direction:column;
		-webkit-align-items:stretch;
		align-items:stretch;
		padding:20px 14px;
	}
	.sdm_arrow{
		-webkit-flex:0 0 40px;
		flex:0 0 40px;
		height:40px;
	}
	.sdm_arrow:before{
		left:50%; right:auto; top:4px; bottom:14px;
		width:4px; height:auto; margin:0 0 0 -2px;
	}
	.sdm_arrow:after{
		left:50%; right:auto; top:auto; bottom:2px;
		margin:0 0 0 -9px;
		border-left:9px solid transparent;
		border-right:9px solid transparent;
		border-top:14px solid #0a6fd6;
		border-bottom:none;
	}
	.logo_plate img{ height:32px; }
}
.sdm_nowrap{ white-space:nowrap; font-size:15px; letter-spacing:0; }
.cBtn ul li a{ white-space:nowrap; }

/* ESET・UTM の仕組み図（SECURITY DOCTOR と同じ部品を使う） */
.svc .sd_ttl{ margin-top:10px; }
.sdm_threat i{ background:#ffecef; color:#e2384f; }
.sdm_threat{ border-color:#f5cdd4; }
.sdm_safe i{ background:#e7f6ec; color:#2e9a4f; }
.sdm_head_safe i{ color:#2e9a4f; }
.sdm_center{ padding:22px 14px 18px; }
.sdm_logo{ display:block; height:46px; width:auto; margin:4px auto 6px; }
.sdm_device{ display:block; width:100%; max-width:190px; height:auto; margin:0 auto; }
.sdm_back{
	margin:12px 0 0;
	font-size:12px;
	font-weight:700;
	color:#0a5bd6;
	background:#eaf3ff;
	border-radius:999px;
	padding:5px 10px;
}
.sdm_back i{ margin-right:5px; }
.sdm_node .sdm_back i{
	display:inline; width:auto; height:auto; line-height:inherit;
	background:none; color:inherit; font-size:inherit; border-radius:0;
}
/* レポートはプラン選択制のため注記 */
.sdm_plan{ display:block; color:#b06f00 !important; font-weight:700; font-size:11px; }
.sd_report .sdm_plan{ font-size:12px; margin-top:2px; }