/* Discoveries Corporate Site — copilot-security (page-specific CSS)
 * 親ページ：Copilot セキュリティ（資料ダウンロード型サービスページ）
 * 接頭辞 cs- ／ DISCOVERIES Apple × Google Hybrid Design System v2.0 のトークン（common.css）を使用
 * 【要確認】本ファイルはローカルで新規作成したものです。上司ご担当の既存 CSS がある場合は差し替え・統合してください。 */

.cs-page{
  --cs-coral:#E8604C; --cs-coral-l:#FDECE9;
  --cs-orange:#E8890C; --cs-orange-l:#FEF1DD;
  --cs-red:#D93025;   --cs-red-l:#FCE8E6;
  --cs-blue:#0066CC;  --cs-blue-l:#E8F0FD;
  --cs-gray:#5B6780;  --cs-gray-l:#EEF0F4;
  background:var(--c-bg);
}
.cs-page *,.cs-page *::before,.cs-page *::after{box-sizing:border-box}
.cs-page main{display:block}
.cs-nb{display:inline-block}
.cs-ico{width:1.25em;height:1.25em;fill:currentColor;flex-shrink:0}

/* ── Buttons ── */
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:9999px;border:0;cursor:pointer;
  font-family:var(--f-body);font-size:15px;font-weight:700;line-height:1.4;color:#fff;text-decoration:none;
  background:var(--c-grad);box-shadow:0 4px 20px rgba(0,102,204,.28);transition:transform .24s var(--ease-apple),box-shadow .24s var(--ease-apple)}
.cs-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,102,204,.34)}
.cs-btn:focus-visible,.cs-textlink:focus-visible{outline:3px solid #7B3FF2;outline-offset:3px}
.cs-btn--block{display:flex;width:100%}
.cs-btn--ghost{background:#fff;color:var(--c-indigo);border:1.5px solid var(--c-indigo);box-shadow:none}
.cs-btn--ghost:hover{background:var(--c-indigo-l);box-shadow:none}

/* ── Hero ── */
.cs-hero{padding:128px 0 88px;background:linear-gradient(180deg,#F3F7FF 0%,#FFFFFF 100%)}
.cs-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.cs-eyebrow{display:inline-block;font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--c-indigo);margin-bottom:16px}
.cs-h1{font-family:var(--f-display);font-size:clamp(34px,4.6vw,56px);font-weight:800;line-height:1.25;letter-spacing:-.02em;color:var(--c-ink);margin-bottom:24px}
.cs-lead{font-size:17px;line-height:1.9;color:var(--c-ink-2);max-width:560px}
.cs-hero-art svg{display:block;width:100%;height:auto;max-width:440px;margin:0 auto}
.cs-cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.cs-cta-card{display:flex;align-items:center;gap:14px;padding:20px 20px;border-radius:20px;background:#fff;border:2px solid var(--c-indigo);color:var(--c-ink);text-decoration:none;box-shadow:0 4px 20px rgba(0,102,204,.12);transition:transform .24s var(--ease-apple),box-shadow .24s var(--ease-apple)}
.cs-cta-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,102,204,.24)}
.cs-cta-card:focus-visible{outline:3px solid #7B3FF2;outline-offset:3px}
.cs-cta-card--primary{background:var(--c-grad);border-color:transparent;color:#fff;box-shadow:0 8px 28px rgba(0,102,204,.36)}
.cs-cta-card--primary:hover{box-shadow:0 14px 36px rgba(0,102,204,.44)}
.cs-cta-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--c-indigo-l);color:var(--c-indigo);flex-shrink:0}
.cs-cta-ico .cs-ico{width:24px;height:24px}
.cs-cta-card--primary .cs-cta-ico{background:rgba(255,255,255,.22);color:#fff}
.cs-cta-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.cs-cta-title{font-size:16px;font-weight:800;line-height:1.5}
.cs-cta-desc{font-size:12.5px;line-height:1.6;opacity:.82}
.cs-cta-arrow{display:inline-flex;transition:transform .24s var(--ease-apple)}
.cs-cta-card:hover .cs-cta-arrow{transform:translateX(4px)}
.cs-hero-sp{display:none;margin-top:28px}
.cs-hero-sub{margin-top:24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cs-hero-sub p{font-size:13px;color:var(--c-ink-3);line-height:1.7}

/* ── Form ── */
.cs-form-card{background:#fff;border:1px solid var(--c-line);border-radius:28px;padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.cs-form-title{font-family:var(--f-display);font-size:20px;font-weight:700;color:var(--c-ink);margin-bottom:8px;line-height:1.4}
.cs-form-sub{font-size:13px;color:var(--c-ink-3);line-height:1.7;margin-bottom:20px}
.cs-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.cs-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cs-field--full{grid-column:1/-1}
.cs-field label{font-size:13px;font-weight:700;color:var(--c-ink-2);display:flex;align-items:center;gap:8px}
.cs-field input,.cs-field select{width:100%;min-height:46px;padding:10px 14px;font:inherit;font-size:15px;color:var(--c-ink);background:#fff;border:1.5px solid var(--c-line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.cs-field input:focus,.cs-field select:focus{outline:none;border-color:var(--c-indigo);box-shadow:0 0 0 3px rgba(0,102,204,.18)}
.cs-req,.cs-opt{font-size:11px;font-weight:700;padding:1px 8px;border-radius:9999px;line-height:1.6}
.cs-req{background:var(--cs-red-l);color:var(--cs-red)}
.cs-opt{background:var(--c-bg-deep);color:var(--c-ink-3)}
.cs-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--c-ink-2);line-height:1.6;cursor:pointer}
.cs-consent input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:var(--c-indigo)}
.cs-consent a{color:var(--c-indigo);text-decoration:underline}
.cs-submit{grid-column:1/-1;margin-top:4px}

/* ── Sections ── */
.cs-section{padding:104px 0;background:#fff}
.cs-section--alt{background:var(--c-bg-alt)}
.cs-section--blue{background:linear-gradient(180deg,#EEF4FF 0%,#F7FAFF 100%)}
.cs-head{max-width:760px;margin:0 auto 48px;text-align:center}
.cs-kicker{font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--c-indigo);margin-bottom:12px}
.cs-h2{font-family:var(--f-display);font-size:clamp(26px,3.2vw,38px);font-weight:800;line-height:1.4;letter-spacing:-.015em;color:var(--c-ink);margin-bottom:16px}
.cs-sub{font-size:16px;line-height:1.9;color:var(--c-ink-2)}
.cs-note{margin-top:20px;font-size:12px;color:var(--c-ink-3);text-align:center}

/* ── Icons ── */
.cs-ico-wrap{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--cs-blue-l);color:var(--c-indigo);flex-shrink:0}
.cs-ico-wrap--gray{background:var(--cs-gray-l);color:var(--cs-gray)}
.cs-ico-wrap .cs-ico{width:24px;height:24px}

/* ── Cases ── */
.cs-cases{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs-case{background:#fff;border:1px solid var(--c-line);border-top:4px solid var(--cs-coral);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cs-case--orange{border-top-color:var(--cs-orange)}
.cs-case--red{border-top-color:var(--cs-red)}
.cs-case-top{display:flex;align-items:center;gap:10px}
.cs-case-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--cs-coral-l);color:var(--cs-coral);flex-shrink:0}
.cs-case--orange .cs-case-ico{background:var(--cs-orange-l);color:var(--cs-orange)}
.cs-case--red .cs-case-ico{background:var(--cs-red-l);color:var(--cs-red)}
.cs-case-label{font-size:12px;font-weight:700;color:var(--c-ink-3)}
.cs-case-title{font-size:16px;font-weight:700;line-height:1.55;color:var(--c-ink)}
.cs-case-desc{font-size:13.5px;line-height:1.8;color:var(--c-ink-2)}
.cs-case-more{margin-top:auto;font-size:12px;font-weight:700;color:var(--c-indigo)}
.cs-cases-cta{margin-top:40px;text-align:center}

/* ── Diagnosis band（簡易診断への誘導） ── */
.cs-diag{padding:0 0 104px;background:#fff}
.cs-diag-card{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:linear-gradient(135deg,#F3F7FF 0%,#F6F1FF 100%);border:1px solid rgba(0,102,204,.18);border-radius:28px;padding:36px 40px}
.cs-diag-ico{width:72px;height:72px;border-radius:50%;background:#fff;color:var(--c-indigo);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.cs-diag-ico .cs-ico{width:36px;height:36px}
.cs-diag-kicker{font-family:var(--f-display);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--c-indigo);margin-bottom:6px}
.cs-diag-title{font-family:var(--f-display);font-size:clamp(20px,2.4vw,26px);font-weight:800;line-height:1.5;color:var(--c-ink);margin-bottom:8px}
.cs-diag-desc{font-size:14.5px;line-height:1.8;color:var(--c-ink-2)}
.cs-diag-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.cs-diag-chips li{font-size:12px;font-weight:700;color:var(--c-ink-2);background:#fff;border:1px solid var(--c-line);border-radius:9999px;padding:4px 12px}

/* ── Options ── */
.cs-options{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.cs-option{position:relative;background:#fff;border:1.5px solid var(--c-line);border-radius:20px;padding:36px 24px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.cs-option--rec{border-color:var(--c-indigo);box-shadow:0 8px 32px rgba(0,102,204,.18)}
.cs-option-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;padding:3px 14px;border-radius:9999px;background:var(--cs-gray-l);color:var(--cs-gray);white-space:nowrap}
.cs-option--rec .cs-option-tag{background:var(--c-indigo);color:#fff}
.cs-option--rec .cs-ico-wrap{background:var(--c-indigo);color:#fff}
.cs-option-title{font-size:16px;font-weight:700;color:var(--c-ink);line-height:1.5}
.cs-why-close{max-width:720px;margin:40px auto 0;text-align:center;font-size:16px;line-height:1.9;color:var(--c-ink-2)}

/* ── Steps ── */
.cs-steps4{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cs-step{background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:24px}
.cs-step-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cs-step-no{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--c-indigo)}
.cs-step-title{font-size:17px;font-weight:700;color:var(--c-ink);margin-bottom:12px;line-height:1.5}
.cs-step-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.cs-step-list li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.7;color:var(--c-ink-2)}
.cs-step-list li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--c-indigo)}

/* ── Segments ── */
.cs-seg{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:920px;margin:0 auto}
.cs-seg-card{background:#fff;border:1px solid var(--c-line);border-radius:24px;padding:28px}
.cs-seg-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cs-seg-title{font-size:17px;font-weight:700;line-height:1.5;color:var(--c-ink)}
.cs-seg-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-seg-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.7;color:var(--c-ink-2)}
.cs-seg-list .cs-ico{color:var(--c-green);margin-top:3px}

/* ── Inside ── */
.cs-inside{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:960px;margin:0 auto}
.cs-inside-card{background:#fff;border:1px solid var(--c-line);border-radius:20px;padding:28px}
.cs-inside-body{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px}
.cs-num{grid-row:1/3;font-family:var(--f-display);font-size:40px;font-weight:800;line-height:1;color:var(--c-indigo)}
.cs-inside-title{font-size:17px;font-weight:700;line-height:1.5;color:var(--c-ink)}
.cs-inside-desc{font-size:14px;line-height:1.8;color:var(--c-ink-2)}

/* ── Proof ── */
.cs-proof{padding:64px 0;background:#fff;border-top:1px solid var(--c-line-l);border-bottom:1px solid var(--c-line-l)}
.cs-proof-lead{text-align:center;font-size:15px;color:var(--c-ink-2);margin-bottom:28px}
.cs-proof-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:960px;margin:0 auto}
.cs-proof-item{display:flex;align-items:center;gap:14px}
.cs-proof-num{font-family:var(--f-display);font-size:28px;font-weight:800;line-height:1.2;color:var(--c-ink)}
.cs-proof-label{font-size:13px;line-height:1.6;color:var(--c-ink-3)}

/* ── Download form section ── */
.cs-form-section .cs-form-card{max-width:640px;margin:0 auto}
.cs-form-frame{margin:0 -8px}
.cs-form-frame iframe{display:block;width:100%;height:880px;border:0}
.cs-sublinks{margin-top:32px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.cs-textlink{font-size:15px;font-weight:700;color:var(--c-indigo);text-decoration:underline;text-underline-offset:4px}
.cs-textlink:hover{color:var(--c-indigo-d)}

/* ── Responsive ── */
@media (max-width:1023px){
  .cs-hero{padding:104px 0 64px}
  .cs-hero-grid{grid-template-columns:1fr;gap:32px}
  .cs-hero-art svg{max-width:280px}
  .cs-cases{grid-template-columns:repeat(2,1fr)}
  .cs-steps4{grid-template-columns:repeat(2,1fr)}
  .cs-diag-card{grid-template-columns:1fr;text-align:left;padding:28px 24px}
  .cs-section{padding:72px 0}
  .cs-diag{padding-bottom:72px}
}
@media (max-width:640px){
  .cs-cases,.cs-steps4,.cs-options,.cs-seg,.cs-inside,.cs-proof-list{grid-template-columns:1fr}
  .cs-form{grid-template-columns:1fr}
  .cs-form-card{padding:24px 20px;border-radius:20px}
  .cs-form-frame iframe{height:1000px}
  .cs-cta-pair{grid-template-columns:1fr;margin-top:28px}
  .cs-hero-art{display:none}
}
@media (prefers-reduced-motion:reduce){.cs-btn{transition:none}.cs-btn:hover{transform:none}}