/* ============================================================
   Q-Tools の「安心サービス」（[qc_qtools_safety]・inc/qtools-safety.php）
   ワークツール・WebRepo・Forms・mails・Manulog・Drive のページで同じ見た目
   ============================================================ */
.qc-qtools-safety{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 88px 40px;
  background: linear-gradient(180deg, #f5f8fd 0%, #eef3fb 100%);
  box-sizing: border-box;
}
.qc-qtools-safety__inner{ max-width: 960px; margin: 0 auto; text-align: center; }
.qc-qtools-safety__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #1D4382;
  margin-bottom: 16px;
}
.qc-qtools-safety__title{
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 16px;
  border: none !important;
  padding: 0 !important;
  line-height: 1.4;
}
.qc-qtools-safety__title::before,
.qc-qtools-safety__title::after{ display: none !important; }
.qc-qtools-safety__lead{ font-size: 15px; line-height: 1.9; color: #475569; margin: 0 0 40px; }
.qc-qtools-safety__photo{
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto 32px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(29, 67, 130, .12);
}
.qc-qtools-safety__cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
}
.qc-qtools-safety__card{
  background: #ffffff;
  border: 1px solid rgba(29, 67, 130, .12);
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 6px 20px rgba(29, 67, 130, .06);
}
.qc-qtools-safety__icon{ display: block; font-size: 28px; line-height: 1; margin-bottom: 14px; }
.qc-qtools-safety__name{
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  border: none !important;
  padding: 0 !important;
  line-height: 1.5;
  word-break: auto-phrase; /* 言葉の途中で折り返さない（「評価・改／善」を防ぐ） */
}
.qc-qtools-safety__name::before,
.qc-qtools-safety__name::after{ display: none !important; }
.qc-qtools-safety__desc{ font-size: 14px; line-height: 1.9; color: #475569; margin: 0; }
@media (max-width: 767px){
  .qc-qtools-safety{ padding: 64px 24px; }
  .qc-qtools-safety__cards{ grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Q-Tools の「INFRASTRUCTURE」（[qc_qtools_infra]）
   QuadWAN（pages/quadwan.css の .page-id-17885 .qc-service-overview）と同じ見た目：
   データセンターの写真を背景に、左側へ文章を重ねる
   ============================================================ */
.qc-qtools-infra{
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding: 120px 40px;
  box-sizing: border-box;
  background:
    linear-gradient(90deg, rgba(10, 21, 50, .94) 0%, rgba(10, 21, 50, .86) 45%, rgba(10, 21, 50, .35) 100%),
    url("../assets/img/quadwan/qw-infra-datacenter.webp") center / cover no-repeat;
}
.qc-qtools-infra__inner{ max-width: 900px; margin: 0 auto; }
.qc-qtools-infra__label{
  font-size: .75em;
  letter-spacing: .4em;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 24px;
}
.qc-qtools-infra__lead{
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 2;
  color: rgba(255, 255, 255, .88);
  margin: 0 0 20px;
}
.qc-qtools-infra__lead:last-child{ margin-bottom: 0; }
.qc-qtools-infra__lead strong{ color: #ffffff; }
@media (max-width: 767px){
  .qc-qtools-infra{ padding: 72px 24px; }
}