@charset "utf-8";
/* NetApp Keystone — doc.css append (work-r4) */

.netapp-keystone .hero-visual { position:relative; margin-top:120px; margin-bottom:100px; border-radius:20px; overflow:hidden; }
.netapp-keystone .hero-visual > img { display:block; width:100%; aspect-ratio:1780/600; object-fit:cover; }
.netapp-keystone .hero-visual .hero-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; gap:8%; padding:40px 7.14%; background:linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%), linear-gradient(135deg, rgba(5,15,35,0.82) 0%, rgba(0,50,95,0.68) 45%, rgba(5,15,35,0.88) 100%); overflow:visible; }
.netapp-keystone .hero-visual .logo { width:38%; max-width:420px; margin:0; flex-shrink:0; overflow:visible; }
.netapp-keystone .hero-visual .logo img { display:block; width:100%; height:auto; object-fit:contain; }
.netapp-keystone .hero-visual .txt-wrap { flex:1; min-width:0; max-width:52%; }
.netapp-keystone .hero-visual .brand { margin-bottom:12px; font-size:16px; font-weight:600; letter-spacing:-0.03em; color:#7ec8ff; }
.netapp-keystone .hero-visual .name { margin-bottom:16px; font-size:36px; font-weight:700; letter-spacing:-0.03em; line-height:1.3; color:#fff; }
.netapp-keystone .hero-visual .tit { font-size:30px; font-weight:700; line-height:1.67; letter-spacing:-0.03em; color:#fff; }
.netapp-keystone .hero-visual .tit .row { display:block; }
.netapp-keystone .hero-visual .tit .row:first-child { white-space:nowrap; }
.netapp-keystone .hero-visual .desc { margin-top:16px; font-size:16px; line-height:1.5; letter-spacing:-0.03em; color:rgba(255,255,255,0.88); }
.netapp-keystone .head .label { margin-bottom:12px; font-size:14px; font-weight:600; letter-spacing:0.02em; color:#0067c5; }
.netapp-keystone .note { margin-top:20px; font-size:14px; line-height:1.6; letter-spacing:-0.03em; color:#686868; }
.netapp-keystone .platform { margin-top:20px; padding:20px 24px; background:#f8f8f8; font-size:15px; line-height:1.6; letter-spacing:-0.03em; color:#454545; }
.netapp-keystone .flex { width:100%; border-collapse:collapse; }
.netapp-keystone .flex th { width:22%; padding:16px 20px; background:#f8f8f8; font-size:16px; font-weight:600; letter-spacing:-0.03em; text-align:left; border:1px solid #ddd; color:#242424; }
.netapp-keystone .flex td { padding:16px 20px; font-size:16px; line-height:1.5; letter-spacing:-0.03em; border:1px solid #ddd; color:#454545; }
.netapp-keystone .flex-card { display:flex; gap:20px; margin:0; padding:0; list-style:none; }
.netapp-keystone .flex-card .card { display:flex; flex-direction:column; flex:1; min-width:0; padding:32px 24px; background:#f6f6f6; border-radius:10px; text-align:center; line-height:1.6; }
.netapp-keystone .flex-card .icon { width:56px; margin:0 auto 20px; }
.netapp-keystone .flex-card .icon img { display:block; width:100%; aspect-ratio:1; object-fit:contain; }
.netapp-keystone .flex-card .tit { margin-bottom:12px; font-size:18px; font-weight:700; letter-spacing:-0.03em; color:#242424; }
.netapp-keystone .flex-card .desc { font-size:15px; line-height:1.6; letter-spacing:-0.03em; color:#454545; }
.netapp-keystone .role-list { margin:0; padding:0; list-style:none; }
.netapp-keystone .role-list .item { display:flex; gap:24px; margin-bottom:20px; padding:30px 40px; background:#f6f6f6; border-radius:10px; line-height:1.625; }
.netapp-keystone .role-list .item:last-child { margin-bottom:0; }
.netapp-keystone .role-list .num { flex-shrink:0; font-size:30px; font-weight:700; letter-spacing:-0.03em; color:#0067c5; }
.netapp-keystone .role-list .tit { margin-bottom:8px; font-size:20px; font-weight:700; letter-spacing:-0.03em; color:#242424; }
.netapp-keystone .role-list .desc { font-size:16px; line-height:1.5; letter-spacing:-0.03em; color:#454545; }
.netapp-keystone .sec-cta { text-align:center; }
.netapp-keystone .sec-cta .contact { position:relative; margin-top:0; padding:70px 50px; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:10px; color:#fff; background-color:#092f5a; background-image:linear-gradient(rgba(9,47,90,0.82), rgba(6,26,51,0.92)), url(../images/sub/netapp-keystone-cta-bg.svg); background-position:center; background-size:cover; background-repeat:no-repeat; }
.netapp-keystone .sec-cta .contact .tit { margin-bottom:12px; font-size:30px; font-weight:700; color:#fff; }
.netapp-keystone .sec-cta .contact .desc { margin-bottom:30px; font-size:16px; line-height:1.6; color:rgba(255,255,255,0.88); }
.netapp-keystone .sec-cta .contact .btn { display:inline-flex; align-items:center; justify-content:center; min-width:200px; height:50px; padding:0 40px; border-radius:6px; font-size:18px; font-weight:600; color:#fff; background:#0067c5; border:2px solid #53ccff; text-decoration:none; }
.netapp-keystone .service td[colspan="4"] { text-align:center; }
.netapp-intro .head .desc { margin-top:16px; font-size:16px; line-height:1.5; letter-spacing:-0.03em; color:#454545; }
.netapp-intro .card-list { display:flex; flex-wrap:wrap; gap:22px; margin:0; padding:0; list-style:none; }
.netapp-intro .card-list .card { display:flex; flex-direction:column; width:calc((100% - 44px) / 3); padding:50px 50px 60px; background:#f6f6f6; border-radius:36px; }
.netapp-keystone .sec-why .card-list .card,
.netapp-keystone .sec-value .card-list .card { padding:0; overflow:hidden; }
.netapp-keystone .sec-why .card-list .img,
.netapp-keystone .sec-value .card-list .img { margin:0; }
.netapp-keystone .sec-why .card-list .img img,
.netapp-keystone .sec-value .card-list .img img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:36px 36px 0 0; }
.netapp-keystone .sec-why .card-list .cont,
.netapp-keystone .sec-value .card-list .cont { padding:40px 50px 50px; }
.netapp-keystone .sec-value .card-list .num { display:block; margin-bottom:12px; color:#0067c5; font-size:24px; font-weight:700; letter-spacing:-0.03em; }
.netapp-keystone .sec-value .card-list .tit { margin-bottom:20px; font-size:24px; }
.netapp-keystone .sec-value .card-list .desc { font-weight:600; color:#272727; }
.netapp-intro .card-list .tit { margin-bottom:24px; font-size:30px; font-weight:700; line-height:1.33; letter-spacing:-0.04em; color:#000; }
.netapp-keystone .sec-why .card-list .tit { margin-bottom:20px; }
.netapp-intro .card-list .desc { font-size:16px; line-height:1.5; letter-spacing:-0.03em; color:#454545; }
.netapp-keystone .sec-why { margin-bottom:0; }
.netapp-keystone .sec-compare,
.netapp-keystone .sec-value,
.netapp-keystone .sec-ai,
.netapp-keystone .sec-service { margin-bottom:0; }
.netapp-keystone .sec-service .service-block { margin-top:50px; }
.netapp-keystone .sec-service .service-block:first-of-type { margin-top:0; }
.netapp-keystone .sec-service .sub-tit { margin-bottom:20px; font-size:20px; font-weight:700; line-height:1.5; letter-spacing:-0.03em; color:#242424; }
/* .netapp-keystone .table-wrap { overflow-x:auto; } */
.netapp-keystone .compare { width:100%; table-layout:fixed; border-collapse:collapse; }
.netapp-keystone .compare .col-label { width:22%; }
.netapp-keystone .compare .col-data { width:39%; }
.netapp-keystone .compare th { padding:16px; background:#242424; color:#fff; font-size:16px; font-weight:600; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; }
.netapp-keystone .compare th:first-child { border-left:none; }
.netapp-keystone .compare th:last-child { border-right:none; }
.netapp-keystone .compare th.tier-opex { background:#0067c5; border-color:#53ccff; }
.netapp-keystone .compare td { padding:16px; font-size:16px; line-height:1.5; letter-spacing:-0.03em; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; vertical-align:top; color:#454545; }
.netapp-keystone .compare td:first-child { border-left:none; }
.netapp-keystone .compare td:last-child { border-right:none; }
.netapp-keystone .compare td.tier-opex { background:#eef6fc; font-weight:600; color:#092f5a; border-color:#c5dff5; }
.netapp-keystone .compare tbody th { background:#f8f8f8; color:#242424; font-weight:600; text-align:left; }
.netapp-keystone .value-list { margin:0; padding:0; list-style:none; }
.netapp-keystone .value-list .item { margin-bottom:20px; padding:40px 40px 40px 100px; background:#f3f3f3; border-radius:10px; line-height:1.625; }
.netapp-keystone .value-list .item:last-child { margin-bottom:0; }
.netapp-keystone .value-list .num { display:block; margin-bottom:12px; color:#0067c5; font-size:24px; font-weight:700; letter-spacing:-0.03em; }
.netapp-keystone .value-list .item .tit { margin-bottom:12px; font-size:24px; font-weight:700; letter-spacing:-0.03em; color:#000; }
.netapp-keystone .value-list .item .desc { font-size:16px; font-weight:600; letter-spacing:-0.03em; color:#272727; }
.netapp-keystone .highlight-box { position:relative; display:flex; align-items:center; justify-content:center; min-height:280px; padding:80px 50px; border-radius:10px; color:#fff; background-color:#092f5a; background-image:linear-gradient(90deg, rgba(9,47,90,0.72) 0%, rgba(9,47,90,0.45) 42%, rgba(0,103,197,0.28) 100%), url(../images/sub/netapp-keystone-ai-bg.svg); background-position:center; background-size:cover; background-repeat:no-repeat; }
.netapp-keystone .highlight-box .desc { width:100%; font-size:18px; line-height:1.75; letter-spacing:-0.03em; color:#fff; text-align:center; }
.netapp-keystone .service { width:100%; table-layout:fixed; border-collapse:collapse; }
.netapp-keystone .service .col-label { width:22%; }
.netapp-keystone .service .col-tier { width:19.5%; }
.netapp-keystone .service th { padding:14px; background:#092f5a; color:#fff; font-size:14px; font-weight:600; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; }
.netapp-keystone .service th:first-child { border-left:none; }
.netapp-keystone .service th:last-child { border-right:none; }
.netapp-keystone .service th.tier-extreme { background:#0067c5; border-color:#53ccff; }
.netapp-keystone .service td { padding:14px; font-size:14px; line-height:1.5; text-align:center; border-top:1px solid #ddd; border-bottom:1px solid #ddd; border-left:1px solid #ddd; border-right:1px solid #ddd; color:#454545; }
.netapp-keystone .service td:first-child { border-left:none; }
.netapp-keystone .service td:last-child { border-right:none; }
.netapp-keystone .service td.tier-extreme { background:#eef6fc; font-weight:600; color:#092f5a; border-color:#c5dff5; }
.netapp-keystone .service tbody th { background:#f8f8f8; color:#242424; text-align:left; }
@media (max-width:1024px) {
  .netapp-intro .card-list .card { width:calc((100% - 22px) / 2); }
  .netapp-keystone .flex-card { flex-wrap:wrap; }
  .netapp-keystone .flex-card .card { flex:0 0 calc((100% - 20px) / 2); }
  .netapp-keystone .sec-why .card-list .img img,
  .netapp-keystone .sec-value .card-list .img img { border-radius:20px 20px 0 0; }
  .netapp-keystone .sec-why .card-list .cont,
  .netapp-keystone .sec-value .card-list .cont { padding:30px 30px 36px; }
  .netapp-keystone .sec-cta .contact { padding:56px 36px; min-height:180px; }
  .kasp-embedded .emb-grid.cols3 .card { width:calc((100% - 22px) / 2); }
  .kasp-foundations .card-list.cols2 .card { width:100%; }
  .kasp-foundations .sec-benefit .card-list .img img,
  .kasp-foundations .sec-feature .card-list .img img,
  .kasp-foundations .sec-workflow .card-list .img img,
  .kasp-foundations .sec-challenge .card-list .img img,
  .kasp-foundations .sec-capability .card-list .img img,
  .kasp-security-center .sec-intro .card-list .img img { border-radius:20px 20px 0 0; }
  .kasp-foundations .sec-benefit .card-list .cont,
  .kasp-foundations .sec-feature .card-list .cont,
  .kasp-foundations .sec-workflow .card-list .cont,
  .kasp-foundations .sec-challenge .card-list .cont,
  .kasp-foundations .sec-capability .card-list .cont,
  .kasp-security-center .sec-intro .card-list .cont { padding:30px 30px 36px; }
  .kasp-optimum .workflow-tab { flex-direction:column; gap:30px; }
  .kasp-foundations .flex-card { flex-wrap:wrap; }
  .kasp-foundations .flex-card .card { flex:0 0 calc((100% - 20px) / 2); }
  .kasp-foundations .flex-card.cols3 .card { flex:0 0 calc((100% - 20px) / 2); }
  .kasp-foundations .flex-card.cols442 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .kasp .list.card { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .netapp-keystone .hero-visual { margin-top:55px; margin-bottom:40px; border-radius:12px; }
  .netapp-keystone .hero-visual .hero-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; padding:32px 24px; }
  .netapp-keystone .hero-visual .logo { width:72%; max-width:320px; }
  .netapp-keystone .hero-visual .txt-wrap { max-width:100%; }
  .netapp-keystone .hero-visual .name { font-size:28px; }
  .netapp-keystone .hero-visual .tit { font-size:18px; line-height:1.5; }
  .netapp-keystone .hero-visual .tit .row:first-child { white-space:normal; }
  .kasp-foundations .hero-visual { margin-top:0; margin-bottom:40px; border-radius:12px; }
  .kasp-foundations .hero-visual .hero-inner { flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:20px; padding:32px 24px; }
  .kasp-foundations .hero-visual .logo { width:50%; max-width:280px; }
  .kasp-foundations .hero-visual .txt-wrap { max-width:100%; }
  .kasp-foundations .hero-visual .name { font-size:22px; }
  .kasp-security-center .hero-visual .hex img { object-position:85% center; }
  .netapp-intro .hero { flex-direction:column; margin-top:55px; margin-bottom:40px; gap:20px; }
  #contArea:not(.wide) .kasp-foundations .hero { margin-top:0; }
  .netapp-intro .hero .logo { width:50%; margin-left:0; }
  .netapp-intro .hero .tit { font-size:18px; line-height:1.5; }
  .netapp-intro .visual { margin-bottom:40px; border-radius:12px; }
  .netapp-intro .line { margin:40px 0; }
  .netapp-intro .head .bar { width:40px; height:3px; margin-bottom:16px; }
  .netapp-intro .head .tit { font-size:18px; }
  .netapp-intro .card-list { display:block; margin:-10px 0; }
  .netapp-intro .card-list .card { width:100%; margin:10px 0; padding:30px 24px; border-radius:20px; }
  .netapp-keystone .sec-why .card-list .card,
  .netapp-keystone .sec-value .card-list .card { padding:0; margin:10px 0; }
  .netapp-keystone .sec-why .card-list .img img,
  .netapp-keystone .sec-value .card-list .img img { border-radius:20px 20px 0 0; }
  .netapp-keystone .sec-why .card-list .cont,
  .netapp-keystone .sec-value .card-list .cont { padding:24px 24px 30px; }
  .netapp-keystone .flex-card { display:block; margin:-8px 0; }
  .netapp-keystone .flex-card .card { margin:8px 0; padding:28px 20px; }
  .kasp-foundations .flex-card { display:block; margin:-8px 0; }
  .kasp-foundations .flex-card .card { margin:8px 0; padding:28px 20px; }
  .kasp-foundations .sec-benefit .card-list .card,
  .kasp-foundations .sec-feature .card-list .card,
  .kasp-foundations .sec-workflow .card-list .card,
  .kasp-foundations .sec-challenge .card-list .card,
  .kasp-foundations .sec-capability .card-list .card,
  .kasp-security-center .sec-intro .card-list .card { padding:0; margin:10px 0; }
  .kasp-foundations .sec-benefit .card-list .img img,
  .kasp-foundations .sec-feature .card-list .img img,
  .kasp-foundations .sec-workflow .card-list .img img,
  .kasp-foundations .sec-challenge .card-list .img img,
  .kasp-foundations .sec-capability .card-list .img img,
  .kasp-security-center .sec-intro .card-list .img img { border-radius:20px 20px 0 0; }
  .kasp-foundations .sec-benefit .card-list .cont,
  .kasp-foundations .sec-feature .card-list .cont,
  .kasp-foundations .sec-workflow .card-list .cont,
  .kasp-foundations .sec-challenge .card-list .cont,
  .kasp-foundations .sec-capability .card-list .cont,
  .kasp-security-center .sec-intro .card-list .cont { padding:24px 24px 30px; }
  .kasp-embedded .emb-grid.cols3 .card { width:100%; }
  .kasp-embedded .sec-challenge .emb-grid .card { padding:40px 24px 28px; }
  .netapp-intro .card-list .tit { margin-bottom:16px; font-size:18px; }
  .netapp-intro .card-list .desc { font-size:14px; }
  .netapp-keystone .role-list .item { flex-direction:column; gap:12px; padding:24px 20px; }
  .netapp-keystone .sec-cta .contact { padding:48px 24px; min-height:160px; }
  .netapp-keystone .sec-cta .contact .tit { font-size:22px; }
  .netapp-keystone .sec-cta .contact .desc { margin-bottom:24px; font-size:15px; }
  .netapp-keystone .sec-cta .contact .btn { min-width:180px; height:44px; font-size:16px; }
  .netapp-keystone .highlight-box { min-height:220px; padding:48px 24px; }
  .netapp-keystone .highlight-box .desc { font-size:16px; }

  .netapp-keystone .compare th { font-size: 14px; padding: 10px; }
  .netapp-keystone .compare td { font-size: 14px; padding: 10px; }
  .netapp-keystone .service th { padding: 10px; white-space: wrap; word-break: break-all; }
  .netapp-keystone .service td { padding: 10px; }
}

/* hero-visual */
@media (max-width:1024px) {
  .netapp-keystone .hero-visual { margin-top:80px; margin-bottom:70px; }
  .netapp-keystone .hero-visual .hero-inner { gap:4%; padding:28px 5%; }
  .netapp-keystone .hero-visual .logo { width:32%; max-width:280px; }
  .netapp-keystone .hero-visual .txt-wrap { max-width:60%; }
  .netapp-keystone .hero-visual .brand { margin-bottom:8px; font-size:14px; }
  .netapp-keystone .hero-visual .name { margin-bottom:10px; font-size:26px; }
  .netapp-keystone .hero-visual .tit { font-size:20px; line-height:1.45; }
  .netapp-keystone .hero-visual .tit .row:first-child { white-space:normal; }
  .netapp-keystone .hero-visual .desc { margin-top:10px; font-size:14px; }
}
@media (max-width:768px) {
  .netapp-keystone .hero-visual { margin-top:55px; margin-bottom:40px; border-radius:12px; }
  .netapp-keystone .hero-visual > img { aspect-ratio:16/9; }
  .netapp-keystone .hero-visual .hero-inner { top:0; right:0; bottom:0; left:0; height:100%; flex-direction:column; justify-content:center; align-items:flex-start; gap:16px; padding:24px 20px; }
  .netapp-keystone .hero-visual .logo { width:28%; max-width:140px; }
  .netapp-keystone .hero-visual .txt-wrap { flex:none; max-width:100%; }
  .netapp-keystone .hero-visual .brand { margin-bottom:6px; padding-left:0; font-size:12px; }
  .netapp-keystone .hero-visual .name { margin-bottom:8px; font-size:20px; line-height:1.3; word-break:keep-all; }
  .netapp-keystone .hero-visual .tit { font-size:15px; line-height:1.4; }
  .netapp-keystone .hero-visual .tit .row:first-child { white-space:normal; }
  .netapp-keystone .hero-visual .desc { margin-top:8px; font-size:13px; line-height:1.45; }
}
@media (max-width:480px) {
  .netapp-keystone .hero-visual > img { aspect-ratio:16/14; }
  .netapp-keystone .hero-visual .hero-inner { top:0; right:0; bottom:0; left:0; height:100%; justify-content:center; gap:12px; padding:18px 16px; }
  .netapp-keystone .hero-visual .logo { width:80%; max-width:100%; }
  .netapp-keystone .hero-visual .brand { font-size:11px; }
  .netapp-keystone .hero-visual .name { margin-bottom:6px; font-size:16px; }
  .netapp-keystone .hero-visual .tit { font-size:13px; }
  .netapp-keystone .hero-visual .desc { margin-top:6px; font-size:12px; }
}