/* ==================================================
  base
================================================== */

body {
  overflow-x: clip !important;
}
.main_content {
  line-height: normal;
}



/* ----------------------------------------
  breadcrumbs, title
---------------------------------------- */

.page_title_area_aem {
  display: none;
}

@media (max-width: 1023px) {
  .breadcrumbs.for_mobile {
    display: none;
  }
}

@media (min-width: 1024px) {
  .breadcrumbs.for_pc {
    display: none;
  }
}



/* ----------------------------------------
  page_top
---------------------------------------- */

@media screen and (min-width: 1024px) {
  .page_top {
    padding: 0;
    border-top: none;
  }
  .page_top_text {
    display: none;
  }
}



/* ----------------------------------------
  local_navi
---------------------------------------- */

#local_navi {
  width: 100%;
}





/* ==================================================
  style 1
================================================== */

:root {
  --hp-blue: #024ad8;
  --ink: #111827;
  --line: #d8dee9;
  --paper: #f4f6f9
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth
}
.main_content {
  color: var(--ink);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  background: var(--paper);
}
.site-head {
  /* position: sticky;
  top: 0;
  z-index: 10; */
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid var(--line)
}
.head-inner {
  max-width: 1280px;
  margin: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 24px
}
.brand {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap
}
nav {
  display: flex;
  gap: 8px;
  overflow: auto
}
nav a {
  color: #323a46;
  text-decoration: none;
  font-size: 12px;
  white-space: nowrap;
  padding: 8px 10px;
  border-radius: 4px
}
nav a:hover {
  background: #eaf0ff;
  color: var(--hp-blue);
  text-decoration: none;
}
main {
  max-width: 1280px;
  margin: 28px auto 0;
  padding: 0 20px 60px
}
.intro {
  background: #fff;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--hp-blue);
  margin-bottom: 18px
}
.intro h1 {
  font-size: clamp(22px, 3vw, 34px);
  margin: 0 0 8px
}
.intro p {
  margin: 0;
  color: #5b6472;
  line-height: 1.7
}
.sheet-section {
  background: #fff;
  border: 1px solid var(--line);
  margin: 0 0 24px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
  overflow: hidden
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #e7eaf0;
  background: #fbfcfe
}
.section-label>span {
  font-size: 24px;
  font-weight: 700;
  color: #c4cad4
}
.section-label div {
  display: flex;
  flex-direction: column;
  gap: 2px
}
.section-label strong {
  font-size: 15px
}
.section-label small {
  font-size: 11px;
  color: #6c7582
}
.sheet-section img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff
}
@media(max-width:800px) {
  .head-inner {
    display: block;
    padding: 10px 14px
  }
  .brand {
    margin-bottom: 7px
  }
  main {
    margin-top: 14px;
    padding: 0 10px 60px;
  }
  .intro {
    padding: 18px
  }
}
@media print {
  .site-head, .intro, .section-label {
    display: none
  }
  main {
    background: #fff;
    margin: 0;
    padding: 0;
    max-width: none
  }
  .sheet-section {
    border: 0;
    box-shadow: none;
    margin: 0;
    break-after: page
  }
}





/* ==================================================
  style 2
================================================== */

.content-enhancement {
  background: #fff;
  border: 1px solid #d8dee9;
  margin: 0 0 24px;
  padding: 52px 44px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
  scroll-margin-top: 80px
}
.enhancement-head {
  max-width: 900px;
  margin-bottom: 30px
}
.enhancement-kicker {
  display: block;
  color: #024ad8;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 8px
}
.enhancement-head h2 {
  font-size: clamp(26px, 3.6vw, 42px);
  line-height: 1.25;
  margin: 0 0 14px
}
.enhancement-head p, .enhancement-card p {
  color: #4b5563;
  line-height: 1.8;
  margin: 0
}
.enhancement-grid {
  display: grid;
  gap: 22px
}
.two-col {
  grid-template-columns: 1fr 1fr
}
.enhancement-card {
  position: relative;
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 28px;
  background: #fff
}
.enhancement-card h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 16px
}
.enhancement-card ul {
  margin: 0;
  padding-left: 1.25em
}
.enhancement-card li {
  margin: 8px 0;
  line-height: 1.55
}
.card-summary {
  margin-top: 18px!important;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-weight: 700;
  color: #111827!important
}
.auth-card {
  background: linear-gradient(145deg, #07152e, #143568);
  color: #fff;
  border: 0
}
.auth-card h3, .auth-card p {
  color: #fff
}
.card-badge {
  display: inline-block;
  background: #ffda7b;
  color: #1a2436;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 15px
}
.auth-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 22px
}
.auth-steps span {
  padding: 11px 10px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .25);
  text-align: center;
  border-radius: 5px;
  font-weight: 700;
  font-size: 13px
}
.device-focus {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  border-left: 7px solid #024ad8
}
.device-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 92px;
  height: 72px;
  background: #eaf0ff;
  border: 4px solid #024ad8;
  border-radius: 7px;
  color: #024ad8;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 12px 0 -7px #024ad8
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  margin-top: 16px!important
}
.check-grid li::marker {
  color: #024ad8
}
.sales-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
  padding: 24px 28px;
  background: #024ad8;
  color: #fff;
  border-radius: 7px
}
.sales-message strong {
  font-size: 22px
}
.sales-message span {
  font-size: 15px;
  line-height: 1.7
}
.content-enhancement+.sheet-section {
  margin-top: 24px
}
@media(max-width:800px) {
  .content-enhancement {
    padding: 34px 20px
  }
  .two-col {
    grid-template-columns: 1fr
  }
  .device-focus {
    grid-template-columns: 1fr
  }
  .device-icon {
    margin-bottom: 5px
  }
  .check-grid {
    grid-template-columns: 1fr
  }
  .sales-message strong {
    font-size: 18px
  }
}
@media print {
  .content-enhancement {
    box-shadow: none;
    border: 0;
    break-after: page
  }
  .enhancement-card {
    break-inside: avoid
  }
}





/* ==================================================
  style 3
================================================== */

.sce-sae-overview {
  background: #fff;
  border: 1px solid var(--line);
  margin: 0 0 24px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .06);
  overflow: hidden;
  scroll-margin-top: 80px
}
.sce-sae-body {
  padding: 42px 44px 46px;
  background: linear-gradient(180deg, #fbfcfe 0%, #fff 100%)
}
.sce-sae-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 26px
}
.sce-sae-kicker {
  display: block;
  color: var(--hp-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 8px
}
.sce-sae-heading h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.25;
  margin: 0 0 10px
}
.sce-sae-heading p {
  margin: 0;
  color: #5b6472;
  line-height: 1.75
}
.sce-sae-pill {
  background: #eaf0ff;
  color: var(--hp-blue);
  border: 1px solid #c9d7ff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap
}
.sce-sae-visual {
  position: relative;
  border: 1px solid #d9e0ea;
  border-radius: 12px;
  overflow: hidden;
  background: #edf4fb;
  min-height: 440px
}
.sce-sae-visual>img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  filter: saturate(.90)
}
.sce-sae-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32%;
  padding: 26px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .74) 27%, rgba(255, 255, 255, .04) 47%, rgba(255, 255, 255, .04) 53%, rgba(255, 255, 255, .74) 73%, rgba(255, 255, 255, .95) 100%)
}
.protection-card {
  align-self: end;
  background: rgba(255, 255, 255, .95);
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 20px 20px 18px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .10)
}
.protection-card.sce {
  border-top: 5px solid #d9483b
}
.protection-card.sae {
  border-top: 5px solid #087ea4
}
.product-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 8px
}
.sce .product-tag {
  color: #b42318
}
.sae .product-tag {
  color: #087ea4
}
.protection-card h3 {
  font-size: 21px;
  line-height: 1.35;
  margin: 0 0 10px
}
.protection-card p {
  font-size: 13px;
  line-height: 1.65;
  color: #4b5563;
  margin: 0 0 10px
}
.protection-card ul {
  margin: 0;
  padding-left: 1.15em;
  font-size: 13px;
  color: #374151
}
.protection-card li {
  margin: 5px 0;
  line-height: 1.5
}
.microvm-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  background: #071f3d;
  color: #fff;
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: 9px
}
.microvm-icon {
  width: 52px;
  height: 52px;
  border: 2px solid #75c9ff;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #75c9ff
}
.microvm-banner strong {
  display: block;
  font-size: 19px;
  margin-bottom: 4px
}
.microvm-banner span {
  font-size: 13px;
  color: #d8ecff
}
.microvm-note {
  font-size: 12px!important;
  text-align: right;
  max-width: 210px
}
.sce-quick {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 22px;
  margin-top: 22px
}
.sce-description, .sce-link-card {
  border: 1px solid #d9e0ea;
  border-radius: 10px;
  padding: 24px;
  background: #fff
}
.sce-description h3, .sce-link-card h3 {
  font-size: 20px;
  margin: 0 0 12px
}
.sce-description p, .sce-link-card p {
  color: #4b5563;
  line-height: 1.75;
  margin: 0
}
.sce-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px
}
.sce-point {
  background: #f6f8fb;
  border-left: 4px solid var(--hp-blue);
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 700
}
.sce-link-card {
  background: linear-gradient(145deg, #07152e, #143568);
  color: #fff;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center
}
.sce-link-card h3, .sce-link-card p {
  color: #fff
}
.sce-product-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  padding: 12px 16px;
  background: #fff;
  color: var(--hp-blue);
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800
}
.sce-product-link:hover {
  text-decoration: none;
  background: #eaf0ff
}
.sce-product-link:focus {
  outline: 3px solid #ffda7b;
  outline-offset: 3px
}
@media(max-width:900px) {
  .sce-sae-body {
    padding: 32px 20px
  }
  .sce-sae-heading {
    grid-template-columns: 1fr
  }
  .sce-sae-pill {
    justify-self: start
  }
  .sce-sae-visual {
    min-height: auto
  }
  .sce-sae-visual>img {
    height: 680px
  }
  .sce-sae-overlay {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    background: rgba(255, 255, 255, .52)
  }
  .protection-card {
    align-self: auto
  }
  .microvm-banner {
    grid-template-columns: auto 1fr
  }
  .microvm-note {
    grid-column: 1/-1;
    text-align: left;
    max-width: none
  }
  .sce-quick {
    grid-template-columns: 1fr
  }
  .sce-points {
    grid-template-columns: 1fr
  }
}
@media print {
  .sce-sae-overview {
    box-shadow: none;
    break-after: page
  }
  .sce-product-link {
    border: 1px solid #024ad8
  }
}





/* ==================================================
  style 4
================================================== */

/* High-resolution replacement: live HTML text and CSS instead of a scaled raster image */

.sae-hq-risk {
  background: linear-gradient(135deg, #0a1633 0%, #12295a 100%);
  color: #fff;
  width: 100%;
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif
}
.sae-hq-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 68px 68px 64px
}
.sae-hq-kicker {
  display: block;
  color: #1680ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: 18px
}
.sae-hq-risk h2 {
  margin: 0 0 24px;
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: 1.23;
  letter-spacing: .01em;
  color: #fff;
  font-weight: 800
}
.sae-hq-lead {
  max-width: 980px;
  margin: 0;
  color: #eef4ff;
  font-size: clamp(16px, 1.55vw, 21px);
  font-weight: 600;
  line-height: 1.9
}
.sae-hq-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px
}
.sae-hq-stats article {
  min-height: 176px;
  padding: 27px 25px 24px;
  border: 2px solid rgba(197, 216, 255, .30);
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}
.sae-hq-stats strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap
}
.sae-hq-stats p {
  margin: 0;
  color: #f0f4fc;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.65
}
@media(max-width:900px) {
  .sae-hq-inner {
    padding: 48px 28px
  }
  .sae-hq-stats {
    grid-template-columns: 1fr
  }
  .sae-hq-stats article {
    min-height: auto
  }
  .sae-hq-risk h2 br {
    display: none
  }
}
@media print {
  .sae-hq-risk {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .sae-hq-stats article {
    break-inside: avoid
  }
}





/* ==================================================
  style 5
================================================== */

/* Sections 05 and 06: resolution-independent HTML/CSS rebuild */

.hq05, .hq06 {
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #111827
}
.hq-wrap {
  padding: 54px 34px;
  background: #fff
}
.hq-kicker {
  display: block;
  color: #075fc7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 15px
}
.hq05 h2, .hq06 h2 {
  margin: 0;
  font-weight: 800;
  line-height: 1.27;
  letter-spacing: .01em
}
.hq05 h2 {
  font-size: clamp(30px, 3.7vw, 49px);
  max-width: 1060px
}
.hq-lead {
  max-width: 1080px;
  margin: 18px 0 0;
  color: #3e4754;
  font-size: 16px;
  line-height: 1.9
}
.hq-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 32px
}
.hq-flow article {
  padding: 20px 15px 18px;
  min-height: 142px;
  border-top: 5px solid;
  border-radius: 5px
}
.hq-flow .risk {
  background: #fff1f0;
  border-color: #d92d20
}
.hq-flow .control {
  background: #edf4ff;
  border-color: #075fc7
}
.hq-flow b {
  display: block;
  font-size: 15px;
  margin-bottom: 13px
}
.hq-flow small {
  display: block;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.65
}
.hq-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 25px
}
.hq-benefits article {
  border: 1px solid #cfd6e1;
  border-radius: 8px;
  padding: 25px 28px;
  background: #fff
}
.hq-benefits h3 {
  font-size: 22px;
  margin: 0 0 10px
}
.hq-benefits p, .hq-benefits li {
  color: #3f4855;
  font-size: 14px;
  line-height: 1.7
}
.hq-benefits ul {
  padding-left: 1.2em;
  margin-bottom: 0
}
.hq06 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
  background: #eff4ff;
  padding: 54px 44px
}
.hq06 h2 {
  font-size: clamp(29px, 3.5vw, 46px)
}
.hq06-copy>p {
  color: #3f4855;
  font-size: 15px;
  line-height: 1.85;
  margin: 17px 0
}
.hq06-copy>a {
  display: inline-block;
  background: #075fc7;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  padding: 13px 22px;
  border-radius: 3px
}
.hq06-copy>small {
  display: block;
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 4px solid #075fc7;
  background: #fff;
  color: #5b6470;
  line-height: 1.65
}
.hq-video {
  position: relative;
  padding-top: 56.25%;
  background: #111;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(17, 24, 39, .22)
}
.hq-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}
@media(max-width:900px) {
  .hq-flow {
    grid-template-columns: 1fr 1fr
  }
  .hq-benefits, .hq06 {
    grid-template-columns: 1fr
  }
  .hq06 {
    padding: 42px 24px
  }
}
@media(max-width:600px) {
  .hq-wrap {
    padding: 38px 20px
  }
  .hq-flow {
    grid-template-columns: 1fr
  }
  .hq-flow article {
    min-height: auto
  }
  .hq-benefits {
    grid-template-columns: 1fr
  }
}
@media print {
  .hq05, .hq06 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .hq-flow article, .hq-benefits article {
    break-inside: avoid
  }
}





/* ==================================================
  style 6
================================================== */

.hq-video-fallback {
  display: none;
  margin: 10px 0 0;
  font-size: 12px;
  color: #5b6470
}
.hq-video-fallback a {
  color: #075fc7;
  font-weight: 700
}
@media print {
  .hq-video-fallback {
    display: block
  }
}





/* ==================================================
  style 7
================================================== */

.video-thumb-wrap {
  margin: 0 0 16px;
  position: relative
}
.video-thumb-wrap a {
  display: block;
  position: relative
}
.video-thumb {
  width: 100%;
  border-radius: 10px;
  display: block;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2)
}
.play-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 56px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6)
}





/* ==================================================
  style 8
================================================== */

/* Final responsive card treatment for product documents, controller and terms */

.sae-resources-final {
  padding: 64px 44px 50px;
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #111827
}
.sae-resources-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 38px
}
.sae-resources-head>span {
  color: #075fc7;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em
}
.sae-resources-head h2 {
  font-size: clamp(29px, 3.7vw, 46px);
  line-height: 1.25;
  margin: 10px 0 14px
}
.sae-resources-head p {
  color: #556070;
  font-size: 15px;
  line-height: 1.8;
  margin: 0
}
.sae-resource-grid-final {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch
}
.sae-resource-card-final {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 28px 26px 24px;
  background: #fff;
  border: 1px solid #d8e0eb;
  border-radius: 13px;
  box-shadow: 0 7px 22px rgba(30, 55, 90, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.sae-resource-card-final:hover {
  transform: translateY(-4px);
  border-color: #a9c5ef;
  box-shadow: 0 14px 34px rgba(30, 55, 90, .12)
}
.sae-resource-card-final.featured {
  border-top: 6px solid #075fc7;
  padding-top: 23px
}
.resource-icon-final {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #eaf2ff;
  color: #075fc7;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
  margin-bottom: 18px
}
.resource-icon-final.cloud {
  background: #075fc7;
  color: #fff
}
.resource-icon-final.terms {
  background: #eef0f4;
  color: #354154
}
.resource-eyebrow {
  margin: 0 0 6px;
  color: #718096;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em
}
.sae-resource-card-final h3 {
  font-size: 24px;
  line-height: 1.35;
  margin: 0 0 17px
}
.resource-desc-final {
  color: #556070;
  font-size: 13px;
  line-height: 1.7;
  margin: -3px 0 12px
}
.sae-resource-card-final a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 2px;
  border-top: 1px solid #e7ebf1;
  color: #075fc7;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45
}
.sae-resource-card-final a:hover {
  text-decoration: underline
}
.sae-resource-card-final a b {
  flex: 0 0 auto;
  font-size: 16px
}
.resource-note-final {
  margin: auto 0 0;
  padding-top: 17px;
  border-top: 1px solid #e7ebf1;
  color: #657080;
  font-size: 12px;
  line-height: 1.7
}
.sae-resource-notice-final {
  margin-top: 24px;
  padding: 19px 22px;
  border-left: 5px solid #075fc7;
  border-radius: 7px;
  background: #eef4ff
}
.sae-resource-notice-final strong {
  display: block;
  color: #075fc7;
  font-size: 14px;
  margin-bottom: 3px
}
.sae-resource-notice-final p {
  margin: 0;
  color: #394556;
  font-size: 13px;
  line-height: 1.75
}
.sae-resource-banner-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  padding: 22px 28px;
  border-radius: 9px;
  background: linear-gradient(110deg, #075fc7, #003d91);
  color: #fff;
  text-align: center
}
.sae-resource-banner-final strong {
  font-size: clamp(17px, 2vw, 22px)
}
.sae-resource-banner-final span {
  font-size: 13px;
  line-height: 1.55;
  color: #eaf2ff
}
@media(max-width:980px) {
  .sae-resource-grid-final {
    grid-template-columns: 1fr
  }
  .sae-resource-card-final {
    min-height: auto
  }
  .resource-note-final {
    margin-top: 18px
  }
}
@media(max-width:600px) {
  .sae-resources-final {
    padding: 42px 18px 36px
  }
  .sae-resource-card-final {
    padding: 24px 20px
  }
  .sae-resource-banner-final {
    align-items: flex-start;
    text-align: left
  }
}
@media print {
  .sae-resources-final {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .sae-resource-card-final {
    break-inside: avoid;
    box-shadow: none
  }
}





/* ==================================================
  style 9
================================================== */

.sae-legal-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px
}
.sae-legal-note {
  padding: 22px 24px;
  border: 1px solid #dbe3ee;
  border-radius: 9px;
  background: #f7f9fc
}
.sae-legal-note strong {
  display: block;
  margin-bottom: 9px;
  color: #111827;
  font-size: 15px
}
.sae-legal-note p {
  margin: 0;
  color: #4d5868;
  font-size: 12px;
  line-height: 1.8
}
.sae-legal-note a {
  display: inline-block;
  margin-top: 13px;
  color: #075fc7;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700
}
.sae-legal-note a:hover {
  text-decoration: underline
}
@media(max-width:800px) {
  .sae-legal-notes {
    grid-template-columns: 1fr
  }
}





/* ==================================================
  style 10
================================================== */

/* Section 02 - polished, resolution-independent product overview */

.overview-v2 {
  padding: 64px 52px 58px;
  background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #111827
}
.overview-v2-head {
  max-width: 970px;
  margin-bottom: 40px
}
.overview-v2-kicker {
  display: block;
  color: #075fc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  margin-bottom: 10px
}
.overview-v2-head h2 {
  margin: 0 0 15px;
  font-size: clamp(31px, 4vw, 50px);
  line-height: 1.22;
  letter-spacing: .01em
}
.overview-v2-head p {
  max-width: 890px;
  margin: 0;
  color: #536072;
  font-size: 16px;
  line-height: 1.85
}
.overview-v2-grid {
  display: grid;
  grid-template-columns: minmax(420px, .9fr) minmax(480px, 1.1fr);
  gap: 48px;
  align-items: center
}
.overview-visual {
  position: relative;
  padding: 28px;
  border: 1px solid #d9e2ee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(21, 52, 91, .10)
}
.data-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.target-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #f8fbff
}
.target-icon {
  grid-row: 1/3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #e9f2ff;
  color: #075fc7;
  font-size: 27px;
  font-weight: 900
}
.target-card b {
  font-size: 15px
}
.target-card small {
  color: #687588;
  font-size: 11px;
  line-height: 1.35
}
.connection-lines {
  display: flex;
  justify-content: space-around;
  height: 32px;
  padding: 0 18%
}
.connection-lines span {
  display: block;
  width: 2px;
  height: 100%;
  background: linear-gradient(#9cbbe5, #075fc7)
}
.protected-device {
  overflow: hidden;
  border: 2px solid #075fc7;
  border-radius: 14px;
  background: #fff
}
.device-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #075fc7;
  color: #fff
}
.device-title span {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em
}
.device-title b {
  font-size: 14px
}
.app-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 25px 22px
}
.app-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  border: 1px solid #d7e1ee;
  border-radius: 9px;
  background: #f5f8fc;
  color: #24344b;
  font-size: 12px;
  font-weight: 900
}
.isolation-bar {
  padding: 10px 15px;
  background: #eaf2ff;
  color: #075fc7;
  text-align: center;
  font-size: 11px;
  font-weight: 800
}
.host-os {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 13px;
  padding: 13px;
  border-radius: 9px;
  background: #222b38;
  color: #fff
}
.host-os span {
  font-size: 13px;
  font-weight: 800
}
.host-os b {
  color: #b9c6d8;
  font-size: 10px;
  font-weight: 600
}
.overview-copy {
  display: flex;
  flex-direction: column;
  gap: 13px
}
.overview-copy article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 17px;
  padding: 20px 21px;
  border: 1px solid #dce3ed;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(34, 59, 90, .05)
}
.copy-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eaf2ff;
  color: #075fc7;
  font-size: 15px;
  font-weight: 900
}
.overview-copy h3 {
  margin: 2px 0 7px;
  font-size: 19px
}
.overview-copy article p {
  margin: 0;
  color: #596575;
  font-size: 13px;
  line-height: 1.75
}
.overview-takeaway {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 5px;
  padding: 21px 24px;
  border-radius: 11px;
  background: linear-gradient(110deg, #075fc7, #003c8f);
  color: #fff
}
.overview-takeaway strong {
  font-size: 18px
}
.overview-takeaway span {
  color: #e8f1ff;
  font-size: 12px;
  line-height: 1.65
}
@media(max-width:1050px) {
  .overview-v2-grid {
    grid-template-columns: 1fr
  }
  .overview-visual {
    max-width: 680px
  }
  .overview-copy {
    max-width: 760px
  }
}
@media(max-width:650px) {
  .overview-v2 {
    padding: 42px 19px
  }
  .overview-v2-grid {
    gap: 28px
  }
  .overview-visual {
    padding: 17px
  }
  .data-targets {
    grid-template-columns: 1fr
  }
  .connection-lines span:last-child {
    display: none
  }
  .device-title {
    align-items: flex-start;
    flex-direction: column
  }
  .app-row {
    grid-template-columns: 1fr 1fr;
    padding: 18px
  }
  .overview-copy article {
    grid-template-columns: 43px 1fr;
    padding: 17px 15px
  }
  .copy-number {
    width: 42px;
    height: 42px
  }
  .overview-copy h3 {
    font-size: 17px
  }
}
@media print {
  .overview-v2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .overview-visual, .overview-copy article {
    box-shadow: none;
    break-inside: avoid
  }
}





/* ==================================================
  style 11
================================================== */

/* Keep the Section 02 headline on one line on desktop */

#section-2 .overview-nowrap-title {
  white-space: nowrap;
  font-size: clamp(28px, 3.45vw, 46px);
  letter-spacing: -0.025em;
  max-width: none;
}
@media(max-width:900px) {
  #section-2 .overview-nowrap-title {
    white-space: normal;
    font-size: clamp(28px, 7vw, 42px);
    letter-spacing: -0.02em;
  }
}





/* ==================================================
  style 12
================================================== */

/* Section 07 - polished and resolution-independent capabilities cards */

.features-v2 {
  padding: 64px 50px 52px;
  background: linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #111827
}
.features-v2-head {
  max-width: 900px;
  margin-bottom: 38px
}
.features-v2-kicker {
  display: block;
  color: #075fc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
  margin-bottom: 10px
}
.features-v2-head h2 {
  margin: 0 0 14px;
  font-size: clamp(31px, 3.8vw, 48px);
  line-height: 1.22
}
.features-v2-head p {
  max-width: 830px;
  margin: 0;
  color: #566274;
  font-size: 15px;
  line-height: 1.85
}
.features-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 21px;
  align-items: stretch
}
.feature-v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 475px;
  padding: 27px 25px 25px;
  border: 1px solid #d9e2ed;
  border-top: 5px solid #b5c2d3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(29, 54, 86, .07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease
}
.feature-v2-card:hover {
  transform: translateY(-5px);
  border-color: #91b9ec;
  box-shadow: 0 17px 38px rgba(29, 54, 86, .13)
}
.feature-v2-card.featured {
  border-top-color: #075fc7;
  background: linear-gradient(180deg, #f8fbff 0%, #fff 38%)
}
.feature-v2-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 23px
}
.feature-v2-number {
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  color: #d0d8e3
}
.feature-v2-icon {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 17px;
  background: #eaf2ff;
  color: #075fc7
}
.mini-screen {
  position: absolute;
  left: 14px;
  top: 17px;
  width: 36px;
  height: 27px;
  border: 3px solid #075fc7;
  border-radius: 4px
}
.mini-screen:before, .mini-screen:after {
  content: "";
  position: absolute;
  left: 5px;
  width: 12px;
  height: 2px;
  background: #075fc7
}
.mini-screen:before {
  top: 7px
}
.mini-screen:after {
  top: 13px
}
.mini-shield {
  position: absolute;
  right: 5px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 28px;
  border-radius: 12px 12px 15px 15px;
  background: #075fc7;
  color: #fff;
  font-size: 12px;
  font-weight: 900
}
.remote-node {
  position: absolute;
  left: 23px;
  top: 23px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #075fc7
}
.remote-ring {
  position: absolute;
  left: 13px;
  top: 13px;
  width: 38px;
  height: 38px;
  border: 3px solid #075fc7;
  border-radius: 50%
}
.remote-ring:before, .remote-ring:after {
  content: "";
  position: absolute;
  top: 16px;
  width: 12px;
  height: 3px;
  background: #075fc7
}
.remote-ring:before {
  left: -11px
}
.remote-ring:after {
  right: -11px
}
.manage-user {
  position: absolute;
  left: 20px;
  top: 12px;
  width: 23px;
  height: 23px;
  border: 3px solid #075fc7;
  border-radius: 50%
}
.manage-user:after {
  content: "";
  position: absolute;
  left: -9px;
  top: 27px;
  width: 35px;
  height: 17px;
  border: 3px solid #075fc7;
  border-bottom: 0;
  border-radius: 20px 20px 0 0
}
.manage-lock {
  position: absolute;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #075fc7;
  color: #fff;
  font-size: 11px;
  font-weight: 900
}
.feature-v2-label {
  color: #075fc7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em
}
.feature-v2-card h3 {
  margin: 7px 0 12px;
  font-size: 25px;
  line-height: 1.35
}
.feature-v2-summary {
  margin: 0 0 20px;
  color: #556173;
  font-size: 13px;
  line-height: 1.75
}
.feature-v2-card ul {
  margin: auto 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid #e5eaf1
}
.feature-v2-card li {
  position: relative;
  margin: 10px 0;
  padding-left: 21px;
  color: #334155;
  font-size: 13px;
  line-height: 1.55
}
.feature-v2-card li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #075fc7;
  font-weight: 900
}
.protocol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid #e5eaf1
}
.protocol-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 9px;
  border: 1px solid #d6e1ef;
  border-radius: 8px;
  background: #f5f9ff;
  color: #114d91;
  font-size: 12px;
  font-weight: 800;
  text-align: center
}
.features-v2-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 23px;
  padding: 22px 26px;
  border-radius: 11px;
  background: linear-gradient(110deg, #075fc7, #003b89);
  color: #fff;
  text-align: center
}
.features-v2-footer strong {
  font-size: 20px
}
.features-v2-footer span {
  color: #e7f0ff;
  font-size: 12px;
  line-height: 1.55
}
@media(max-width:980px) {
  .features-v2-grid {
    grid-template-columns: 1fr
  }
  .feature-v2-card {
    min-height: auto
  }
  .feature-v2-card ul, .protocol-grid {
    margin-top: 15px
  }
  .features-v2-head {
    max-width: 760px
  }
}
@media(max-width:600px) {
  .features-v2 {
    padding: 42px 18px 36px
  }
  .feature-v2-card {
    padding: 23px 20px
  }
  .protocol-grid {
    grid-template-columns: 1fr
  }
  .features-v2-footer {
    align-items: flex-start;
    text-align: left
  }
}
@media print {
  .features-v2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .feature-v2-card {
    break-inside: avoid;
    box-shadow: none
  }
}





/* ==================================================
  style 13
================================================== */

/* Section 08 - modern responsive pricing table */

.pricing-v2 {
  padding: 64px 50px 50px;
  background: linear-gradient(145deg, #081426 0%, #102a56 100%);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #fff
}
.pricing-v2-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-bottom: 32px
}
.pricing-v2-head>div:first-child {
  max-width: 820px
}
.pricing-kicker {
  display: block;
  color: #68a9ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 8px
}
.pricing-v2 h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.15
}
.pricing-v2-head p {
  margin: 0;
  color: #d9e5f7;
  font-size: 15px;
  line-height: 1.8
}
.pricing-highlight {
  flex: 0 0 220px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08)
}
.pricing-highlight span, .pricing-highlight small {
  display: block;
  color: #cfe0f8;
  font-size: 11px
}
.pricing-highlight strong {
  display: block;
  margin: 4px 0;
  font-size: 20px
}
.pricing-table-wrap {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .22)
}
.pricing-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #182235
}
.pricing-table thead th {
  padding: 17px 19px;
  background: #075fc7;
  color: #fff;
  font-size: 13px;
  text-align: left;
  letter-spacing: .02em
}
.pricing-table thead th:last-child {
  text-align: right
}
.pricing-table tbody td {
  padding: 14px 19px;
  border-bottom: 1px solid #e4e9f0;
  background: #fff;
  vertical-align: middle
}
.pricing-table tbody tr:last-child td {
  border-bottom: 0
}
.pricing-table tbody tr.volume td {
  background: #f2f7ff
}
.pricing-table tbody tr:hover td {
  background: #eaf3ff
}
.term-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 6px 10px;
  border-radius: 20px;
  background: #e8f1ff;
  color: #075fc7;
  font-weight: 900;
  font-size: 12px
}
.pricing-table code {
  color: #2c3c53;
  font-family: Consolas, monospace;
  font-size: 13px;
  font-weight: 700
}
.product-name {
  display: block;
  font-size: 14px;
  font-weight: 800
}
.pricing-table td small {
  display: block;
  margin-top: 3px;
  color: #708096;
  font-size: 11px
}
.pricing-table td:last-child {
  text-align: right;
  white-space: nowrap
}
.pricing-table td:last-child strong {
  display: block;
  color: #102a56;
  font-size: 17px
}
.price-best {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 7px;
  border-radius: 4px;
  background: #075fc7;
  color: #fff;
  font-size: 9px;
  font-weight: 800
}
.pricing-note {
  display: flex;
  gap: 14px;
  margin-top: 19px;
  padding: 17px 20px;
  border-left: 4px solid #68a9ff;
  border-radius: 7px;
  background: rgba(255, 255, 255, .08)
}
.pricing-note strong {
  flex: 0 0 auto;
  color: #fff;
  font-size: 13px
}
.pricing-note span {
  color: #d7e3f5;
  font-size: 12px;
  line-height: 1.65
}
@media(max-width:800px) {
  .pricing-v2 {
    padding: 44px 19px 38px
  }
  .pricing-v2-head {
    align-items: flex-start;
    flex-direction: column
  }
  .pricing-highlight {
    width: 100%;
    flex-basis: auto
  }
  .pricing-table-wrap {
    overflow-x: auto
  }
  .pricing-table {
    min-width: 720px
  }
  .pricing-note {
    flex-direction: column
  }
}
@media print {
  .pricing-v2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .pricing-table-wrap {
    box-shadow: none
  }
}





/* ==================================================
  style 14
================================================== */

/* Section 04 - crisp, resolution-independent threat terminology cards */

.threat-terms-v3 {
  padding: 62px 48px 46px;
  background: linear-gradient(180deg, #fff 0%, #f5f8fc 100%);
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #111827
}
.threat-terms-head {
  max-width: 930px;
  margin-bottom: 34px
}
.terms-kicker {
  display: block;
  color: #075fc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 9px
}
.threat-terms-head h2 {
  margin: 0 0 13px;
  font-size: clamp(31px, 3.9vw, 48px);
  line-height: 1.22
}
.threat-terms-head p {
  max-width: 850px;
  margin: 0;
  color: #566274;
  font-size: 14px;
  line-height: 1.8
}
.threat-terms-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}
.threat-term-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 25px 24px 23px;
  border: 1px solid #d8e1ec;
  border-top: 5px solid #075fc7;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(25, 50, 82, .07);
  transition: transform .18s ease, box-shadow .18s ease
}
.threat-term-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 17px 38px rgba(25, 50, 82, .13)
}
.term-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.term-number {
  color: #d1dae6;
  font-size: 31px;
  font-weight: 900;
  line-height: 1
}
.term-stage {
  color: #758297;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-align: right
}
.term-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 19px 0 17px;
  border-radius: 15px;
  background: #eaf2ff;
  color: #075fc7
}
.id-card {
  width: 34px;
  height: 24px;
  border: 3px solid #075fc7;
  border-radius: 4px
}
.id-card:before, .id-card:after {
  content: "";
  position: absolute;
  left: 18px;
  height: 2px;
  background: #075fc7
}
.id-card:before {
  top: 25px;
  width: 9px
}
.id-card:after {
  top: 32px;
  width: 18px
}
.id-key {
  position: absolute;
  right: 5px;
  bottom: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #075fc7;
  color: #fff;
  font-size: 0
}
.id-key:after {
  content: "";
  position: absolute;
  left: -7px;
  top: 8px;
  width: 10px;
  height: 3px;
  background: #075fc7
}
.term-icon.terminal span {
  font-family: Consolas, monospace;
  font-size: 18px;
  font-weight: 900
}
.driver-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 3px solid #075fc7;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 900
}
.driver-alert {
  position: absolute;
  right: 4px;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #d92d20;
  color: #fff;
  font-size: 12px;
  font-weight: 900
}
.threat-term-card h3 {
  margin: 0 0 11px;
  font-size: 24px
}
.threat-term-card p {
  margin: 0;
  color: #4f5b6d;
  font-size: 13px;
  line-height: 1.78
}
.term-flow {
  display: block;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid #e4e9f0;
  color: #075fc7;
  font-size: 11px;
  font-weight: 800
}
.threat-terms-message {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 22px;
  padding: 20px 23px;
  border-left: 5px solid #075fc7;
  border-radius: 8px;
  background: #eaf2ff
}
.message-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 46px;
  border-radius: 8px;
  background: #075fc7;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .06em
}
.threat-terms-message strong, .threat-terms-message span {
  display: block
}
.threat-terms-message strong {
  margin-bottom: 4px;
  font-size: 15px
}
.threat-terms-message span {
  color: #4e5c70;
  font-size: 12px;
  line-height: 1.7
}
@media(max-width:950px) {
  .threat-terms-grid {
    grid-template-columns: 1fr
  }
  .threat-term-card {
    min-height: auto
  }
  .term-flow {
    margin-top: 18px
  }
}
@media(max-width:600px) {
  .threat-terms-v3 {
    padding: 42px 18px 35px
  }
  .threat-terms-message {
    grid-template-columns: 1fr
  }
  .message-mark {
    width: 56px
  }
}
@media print {
  .threat-terms-v3 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .threat-term-card {
    break-inside: avoid;
    box-shadow: none
  }
}





/* ==================================================
  style 15
================================================== */

/* Purchase flow: high-resolution HTML/CSS, inserted before documentation cards */

.purchase-steps-v2 {
  margin: 0 0 58px;
  padding: 0 0 52px;
  border-bottom: 1px solid #dfe6ef
}
.purchase-steps-head {
  text-align: left;
  max-width: 850px;
  margin-bottom: 34px
}
.purchase-kicker {
  display: block;
  color: #075fc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 8px
}
.purchase-steps-head h2 {
  margin: 0 0 10px;
  font-size: clamp(31px, 3.8vw, 46px);
  line-height: 1.2
}
.purchase-steps-head p {
  margin: 0;
  color: #556070;
  font-size: 15px;
  line-height: 1.7
}
.purchase-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  position: relative
}
.purchase-step-card {
  position: relative;
  min-height: 310px;
  padding: 25px 25px 27px;
  border: 1px solid #d9e2ed;
  border-top: 5px solid #075fc7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(29, 54, 86, .07);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease
}
.purchase-step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(29, 54, 86, .12)
}
.purchase-step-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px
}
.purchase-step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #075fc7;
  color: #fff;
  font-size: 19px;
  font-weight: 900
}
.purchase-icon {
  position: relative;
  width: 70px;
  height: 58px;
  color: #111827
}
.purchase-icon.cart span {
  position: absolute;
  left: 17px;
  top: 8px;
  width: 35px;
  height: 27px;
  border: 3px solid currentColor;
  border-top: 0;
  transform: skew(-10deg)
}
.purchase-icon.cart span:before {
  content: "";
  position: absolute;
  left: -9px;
  top: -8px;
  width: 10px;
  height: 3px;
  background: currentColor
}
.purchase-icon.cart span:after {
  content: "●  ●";
  position: absolute;
  left: 3px;
  top: 24px;
  font-size: 14px;
  letter-spacing: 9px;
  white-space: nowrap
}
.purchase-icon.mail span {
  position: absolute;
  left: 9px;
  top: 8px;
  width: 50px;
  height: 35px;
  border: 3px solid currentColor;
  border-radius: 7px
}
.purchase-icon.mail span:before, .purchase-icon.mail span:after {
  content: "";
  position: absolute;
  top: 6px;
  width: 27px;
  height: 3px;
  background: currentColor
}
.purchase-icon.mail span:before {
  left: 1px;
  transform: rotate(34deg)
}
.purchase-icon.mail span:after {
  right: 1px;
  transform: rotate(-34deg)
}
.purchase-icon.mail b {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 22px
}
.purchase-icon.activate span {
  position: absolute;
  left: 11px;
  top: 8px;
  width: 48px;
  height: 33px;
  border: 3px solid currentColor;
  border-radius: 6px
}
.purchase-icon.activate span:after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -10px;
  width: 56px;
  height: 3px;
  background: currentColor
}
.purchase-icon.activate b {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 27px;
  border-radius: 6px;
  background: #fff;
  border: 2px solid currentColor;
  color: #075fc7;
  font-size: 12px
}
.purchase-step-card h3 {
  margin: 0 0 17px;
  font-size: 21px;
  line-height: 1.4
}
.purchase-step-card p {
  margin: 0;
  color: #4f5b6d;
  font-size: 13px;
  line-height: 1.8
}
@media(max-width:900px) {
  .purchase-steps-grid {
    grid-template-columns: 1fr
  }
  .purchase-step-card {
    min-height: auto;
    text-align: left
  }
  .purchase-step-card h3, .purchase-step-card p {
    text-align: left
  }
}
@media(max-width:600px) {
  .purchase-steps-v2 {
    margin-bottom: 40px;
    padding-bottom: 38px
  }
  .purchase-step-card {
    padding: 22px 20px
  }
}
@media print {
  .purchase-step-card {
    break-inside: avoid;
    box-shadow: none
  }
  .purchase-steps-v2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
}





/* ==================================================
  style 16
================================================== */

/* Section 01: high-resolution HTML/CSS typography with retained photographic asset */

.hero-hq-v2 {
  background: #fff;
  font-family: "Noto Sans JP", "Yu Gothic", Meiryo, Arial, sans-serif;
  color: #080b10
}
.hero-hq-title {
  padding: 58px 54px 48px;
  background: #fff
}
.hero-hq-kicker {
  display: block;
  margin-bottom: 13px;
  color: #075fc7;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em
}
.hero-hq-title h1 {
  margin: 0 0 22px;
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
  white-space: nowrap
}
.hero-hq-title>p {
  margin: 0;
  font-size: clamp(27px, 3.5vw, 43px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em
}
.hero-hq-content {
  display: grid;
  grid-template-columns: minmax(420px, .78fr) minmax(560px, 1.22fr);
  min-height: 500px;
  background: linear-gradient(120deg, #eef4f6 0%, #e5edef 100%)
}
.hero-hq-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 51px 42px 48px 54px
}
.hero-copy-label {
  color: #075fc7;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .11em;
  margin-bottom: 11px
}
.hero-hq-copy h2 {
  margin: 0 0 21px;
  font-size: clamp(24px, 2.35vw, 34px);
  line-height: 1.35
}
.hero-hq-copy p {
  margin: 0 0 17px;
  color: #283646;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9
}
.hero-hq-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 7px
}
.hero-hq-points span {
  padding: 8px 11px;
  border: 1px solid #b7cae2;
  border-radius: 5px;
  background: rgba(255, 255, 255, .70);
  color: #075fc7;
  font-size: 10px;
  font-weight: 900
}
.hero-hq-photo {
  min-height: 500px;
  overflow: hidden;
  background: #dce7ed
}
.hero-hq-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center center
}
@media(max-width:1050px) {
  .hero-hq-title h1 {
    font-size: clamp(42px, 7.2vw, 68px);
    white-space: normal
  }
  .hero-hq-content {
    grid-template-columns: 1fr
  }
  .hero-hq-copy {
    padding: 44px 36px
  }
  .hero-hq-photo, .hero-hq-photo img {
    min-height: 420px
  }
}
@media(max-width:620px) {
  .hero-hq-title {
    padding: 41px 19px 34px
  }
  .hero-hq-title h1 {
    font-size: 39px;
    letter-spacing: -.035em
  }
  .hero-hq-title>p {
    font-size: 26px
  }
  .hero-hq-copy {
    padding: 37px 20px
  }
  .hero-hq-photo, .hero-hq-photo img {
    min-height: 320px
  }
  .hero-hq-points {
    flex-direction: column;
    align-items: flex-start
  }
}
@media print {
  .hero-hq-v2 {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact
  }
  .hero-hq-photo img {
    min-height: 430px
  }
}





/* ==================================================
  style 17
================================================== */

/* Final header theme: solid black navigation with white labels */

.site-head {
  background: #000 !important;
  border-bottom: 1px solid #222 !important;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
}
.site-head .head-inner {
  background: #000 !important;
}
.site-head .brand {
  color: #fff !important;
}
.site-head nav {
  scrollbar-color: #737373 #171717;
  scrollbar-width: thin;
}
.site-head nav::-webkit-scrollbar {
  height: 7px
}
.site-head nav::-webkit-scrollbar-track {
  background: #171717
}
.site-head nav::-webkit-scrollbar-thumb {
  background: #737373;
  border-radius: 10px
}
.site-head nav a {
  color: #fff !important;
  background: transparent !important;
  border-radius: 4px;
}
.site-head nav a:hover, .site-head nav a:focus-visible {
  color: #fff !important;
  background: #242424 !important;
  outline: none;
}
.site-head nav a:focus-visible {
  box-shadow: inset 0 0 0 2px #75b7ff;
}
@media(max-width:800px) {
  .site-head .brand {
    color: #fff !important
  }
}