@media screen and (max-width: 896px){
.top-visual .top-visual-inner .top-visual-inner-box h1 {
    position: absolute;
	margin-left:0;
}
	.top-visual .top-visual-inner .top-visual-inner-box h2{margin-top:20px;}
}
/* 202604改修ここから */
/* ============================================================
   CO-NECT 受注側LP 追加CSS
   WP管理画面「外観 → カスタマイズ → 追加CSS」に貼り付け
   ============================================================ */

/* セクション幅・配置 */
.security-visual,
.saas-visual {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

.security-visual.aos-animate,
.saas-visual.aos-animate {
  opacity: 1 !important;
}

/* セクション背景 */
.security-visual { background: #DDF7F5 !important; }
.saas-visual     { background: #ffffff !important; }


/* コンテンツエリア幅制御 */
.security-section-inner,
.saas-section-inner {
  max-width: 1160px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ===== SECURITY：機能カードグリッド ===== */

.security-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  margin: 0 0 48px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.security-feature-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: #f0fafa !important;
  border-radius: 10px !important;
  padding: 22px 20px !important;
  border-left: 4px solid #07746E !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.security-feature-icon {
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  background: #07746E !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.security-feature-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2 !important;
  display: block !important;
}

.security-feature-title {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #07746E !important;
  margin: 0 0 6px !important;
  line-height: 1.4 !important;
}

.security-feature-desc {
  display: block !important;
  font-size: 0.825rem !important;
  color: #666666 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ===== SECURITY：締めバナー ===== */

.security-badge-bar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  background: #07746E !important;
  border-radius: 10px !important;
  padding: 32px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.security-badge-isms {
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.security-badge-isms-label {
  display: block !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.security-badge-divider {
  display: block !important;
  width: 1px !important;
  height: 60px !important;
  background: rgba(255, 255, 255, 0.25) !important;
  flex-shrink: 0 !important;
}

.security-badge-msg {
  flex: 1 !important;
  color: #ffffff !important;
}

.security-badge-msg strong {
  display: block !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  margin: 0 0 8px !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
}

.security-badge-msg p {
  display: block !important;
  font-size: 0.875rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

/* ===== WHY SaaS：4本柱グリッド ===== */

.saas-pillar-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.saas-pillar-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1.5px solid #d4eeec !important;
  padding: 36px 28px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

.saas-pillar-card:hover {
  border-color: #24B8B3 !important;
  box-shadow: 0 6px 24px rgba(7, 116, 110, 0.1) !important;
}

.saas-pillar-icon-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  background: #f0fafa !important;
  border-radius: 50% !important;
  margin: 0 auto 20px !important;
  border: 2px solid #d4eeec !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

.saas-pillar-icon-wrap svg {
  width: 30px !important;
  height: 30px !important;
  fill: none !important;
  stroke: #07746E !important;
  stroke-width: 2 !important;
  display: block !important;
}

.saas-pillar-num {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #24B8B3 !important;
  margin: 0 0 10px !important;
}

.saas-pillar-title {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #07746E !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}

.saas-pillar-desc {
  display: block !important;
  font-size: 0.85rem !important;
  color: #666666 !important;
  line-height: 1.75 !important;
  text-align: left !important;
  margin: 0 !important;
}

/* ===== レスポンシブ ===== */

@media (max-width: 896px) {
  .security-feature-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .saas-pillar-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .security-badge-bar {
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 24px !important;
    gap: 20px !important;
  }
  .security-badge-divider {
    width: 60px !important;
    height: 1px !important;
  }
}

@media (max-width: 540px) {
  .security-feature-grid {
    grid-template-columns: 1fr !important;
  }
  .saas-pillar-grid {
    grid-template-columns: 1fr !important;
  }
  .security-visual-inner,
  .saas-visual-inner {
    padding: 0 16px 40px !important;
  }
}

.saas-visual .contents-title-inner h3 {
  font-size: 4.4rem !important;
  letter-spacing: -0.02em !important;
}
/* contents-titleには背景をつけない */
/* コンテンツエリアにだけ背景をつける */
.security-visual .security-visual-inner {
  background: #DDF7F5 !important;
}

.saas-visual .saas-visual-inner {
  background: #ffffff !important;
}

/* セクション全体の背景は白に戻す */
.security-visual { background: #ffffff !important; }
.saas-visual     { background: #ffffff !important; }
/* 202604改修ここまで */