/* HP安全診断（/security-check）だけで使う見た目。基調は site.css（紺・ターコイズ）。
   信号の3色は診断結果の表示にだけ使う（会社の基準色には数えない）。相談ボタンのオレンジもこのページだけ。 */
:root{
  --sig-red:#D93025;
  --sig-yellow:#F2B705;
  --sig-blue:#0B9E78;
  --sig-off:#33373D;
  --hpc-orange:#CC4A0A; /* 2026-10-27 決めごとv2：白文字との差 4.61:1（旧 #E8590C は 3.58:1） */
}

.hpc-hero{padding:56px 24px 52px;}
.hpc-hero-in{max-width:860px;margin:0 auto;}
.hpc-hero h1{line-height:1.6;}
.hpc-title{word-break:keep-all;overflow-wrap:anywhere;} /* 折り返しは <wbr> の位置で（PCは「、」の後、スマホは「設定は」の後も） */
.hpc-sub{margin-top:10px;font-size:18px;font-weight:700;letter-spacing:.08em;color:var(--teal-light);}

.hpc-form{margin-top:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);padding:22px 22px 18px;}
.hpc-label{display:block;font-size:15px;font-weight:700;letter-spacing:.04em;color:#FFFFFF;margin-bottom:10px;}
.hpc-input-row{display:flex;gap:10px;}
.hpc-input-row input{flex:1;min-width:0;height:52px;padding:0 14px;font-size:16px;font-family:var(--sans);color:var(--ink);
  background:#FFFFFF;border:1px solid var(--pale-line);border-radius:4px;}
.hpc-btn{flex:none;height:52px;padding:0 28px;font-size:16px;font-weight:700;letter-spacing:.1em;font-family:var(--sans);
  color:#FFFFFF;background:var(--cta);border:1px solid var(--teal-light);border-radius:4px;cursor:pointer;}
.hpc-btn:hover{background:#00676A;}
.hpc-btn:disabled{opacity:.6;cursor:wait;}
.hpc-help{margin-top:8px;font-size:14px;line-height:1.7;color:#DDE4EE;}
.hpc-turnstile{margin-top:14px;min-height:65px;}
.hpc-status{margin-top:8px;font-size:15px;line-height:1.7;color:var(--teal-light);min-height:1.7em;}
.hpc-status.is-error{color:#FFD2CC;}

.hpc-notes{margin-top:18px;list-style:none;font-size:14px;line-height:1.8;color:#DDE4EE;}
.hpc-notes li{position:relative;padding-left:16px;}
.hpc-notes li::before{content:"";position:absolute;left:2px;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--teal-light);}

.hpc-result .section-in,.hpc-about .section-in{max-width:960px;}
.hpc-result.section{padding-top:64px;}
.hpc-result .heading{margin-bottom:14px;}
.hpc-target{font-size:15px;color:#4B5563;margin-bottom:24px;word-break:break-all;}

.hpc-summary{display:flex;gap:24px;align-items:stretch;}
.hpc-rank{flex:0 0 34%;background:var(--pale);border:1px solid var(--pale-line);padding:22px 20px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;}
.hpc-rank-label{font-size:14px;font-weight:700;letter-spacing:.12em;color:var(--teal-text);}
.hpc-grade{font-family:var(--serif);font-weight:600;font-size:76px;line-height:1.1;color:var(--navy);margin:4px 0 8px;}
.hpc-comment{font-size:15px;line-height:1.8;color:var(--ink);}

.hpc-signals{flex:1;border:1px solid var(--line);padding:18px 22px;}
.hpc-h3{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.04em;color:var(--navy);margin-bottom:10px;}
.hpc-signal-list{list-style:none;}
.hpc-signal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:15px;}
.hpc-signal:last-child{border-bottom:none;}
.hpc-signal-name{color:var(--ink);}

.hpc-lamp{flex:none;display:inline-flex;gap:7px;background:#1B1D21;padding:6px 9px;border-radius:16px;}
.hpc-lamp i{display:block;width:18px;height:18px;border-radius:50%;background:var(--sig-off);}
.hpc-lamp i.on{outline:2px solid rgba(255,255,255,.9);outline-offset:1px;} /* 点いている位置を色に頼らず分かるように */
.hpc-lamp .hpc-lamp-r.on{background:var(--sig-red);box-shadow:0 0 6px rgba(217,48,37,.8);}
.hpc-lamp .hpc-lamp-y.on{background:var(--sig-yellow);box-shadow:0 0 6px rgba(242,183,5,.8);}
.hpc-lamp .hpc-lamp-g.on{background:var(--sig-blue);box-shadow:0 0 6px rgba(11,158,120,.8);}

.hpc-items{margin-top:36px;}
.hpc-none{font-size:15px;color:#4B5563;}
.hpc-item{border:1px solid var(--line);border-left:6px solid var(--line);margin-top:10px;background:#FFFFFF;}
.hpc-item-bad{border-left-color:var(--sig-red);}
.hpc-item-warn{border-left-color:var(--sig-yellow);}
.hpc-item-sum{cursor:pointer;list-style:none;padding:14px 44px 14px 16px;position:relative;display:flex;flex-direction:column;gap:2px;}
.hpc-item-sum::-webkit-details-marker{display:none;}
.hpc-item-sum::after{content:"";position:absolute;right:18px;top:22px;width:9px;height:9px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);transition:transform .2s;}
.hpc-item[open] .hpc-item-sum::after{transform:rotate(-135deg);top:26px;}
.hpc-item-cat{font-size:14px;color:var(--teal-text);font-weight:700;letter-spacing:.04em;}
.hpc-item-title{font-size:16px;font-weight:700;color:var(--navy);line-height:1.6;}
.hpc-item-msg{font-size:15px;color:var(--ink);line-height:1.7;}
.hpc-item-body{padding:0 16px 16px;border-top:1px dashed var(--line);}
.hpc-item-h{margin-top:12px;font-size:14px;font-weight:700;color:var(--teal-text);}
.hpc-item-p{font-size:15px;line-height:1.85;color:var(--ink);}

.hpc-group{margin-top:14px;border:1px solid var(--line);background:var(--mist);}
.hpc-group-sum{cursor:pointer;padding:12px 16px;font-size:15px;font-weight:700;color:var(--navy);}
.hpc-group-list{list-style:none;padding:0 16px 12px;}
.hpc-group-item{display:flex;flex-direction:column;padding:8px 0;border-top:1px dashed var(--line);font-size:14px;line-height:1.7;}
.hpc-group-title{font-weight:700;color:var(--ink);}
.hpc-group-msg{color:#4B5563;}

.hpc-about-list dt{font-weight:700;color:var(--navy);font-size:16px;margin-top:18px;}
.hpc-about-list dt:first-child{margin-top:0;}
.hpc-about-list dd{font-size:15px;line-height:1.9;color:var(--ink);margin-top:4px;}

.hpc-cta{padding:56px 24px 64px;text-align:center;background:#FFFFFF;}
.hpc-cta-btn{display:inline-block;background:var(--hpc-orange);color:#FFFFFF;font-weight:700;font-size:19px;letter-spacing:.06em;
  text-decoration:none;padding:18px 40px;border-radius:6px;line-height:1.5;max-width:100%;}
.hpc-cta-btn:hover{background:#B03F08;} /* 白文字との差 5.90:1 */

@media (prefers-reduced-motion: reduce){ .hpc-item-sum::after{transition:none;} }

@media (max-width:640px){
  .hpc-hero{padding:40px 16px 40px;}
  .hpc-br-pc{display:none;}
  .hpc-form{padding:16px 8px 14px;}
  .hpc-input-row{flex-direction:column;}
  .hpc-input-row input{flex:none;width:100%;height:52px;}
  .hpc-btn{width:100%;}
  .hpc-summary{flex-direction:column;gap:16px;}
  .hpc-rank{flex:none;}
  .hpc-signals{padding:14px 16px;}
  .hpc-result.section,.hpc-about.section{padding:48px 16px;}
  .hpc-cta{padding:44px 16px 52px;}
  .hpc-cta-btn{display:block;padding:16px 12px;font-size:19px;letter-spacing:.02em;}
}

/* 375px 未満（320px など）：見出しの「、」が行頭に来ないよう、相談ボタンが2行にならないよう少し小さく */
@media (max-width:374px){
  .hpc-hero h1.hpc-title{font-size:23px;letter-spacing:.02em;}
  .hpc-cta-btn{font-size:17px;letter-spacing:0;padding:16px 8px;}
}