/* =========================================================
   AsTech One 事業内容（サービス内容）ページ専用スタイル
   すべて .ao-service 配下にスコープし、親テーマCSSと干渉させない
   ========================================================= */

.ao-service { font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif; color: #333; line-height: 1.7; }
.ao-service *, .ao-service *::before, .ao-service *::after { box-sizing: border-box; }
.ao-service h1, .ao-service h2, .ao-service h3, .ao-service p, .ao-service ul, .ao-service span { margin: 0; padding: 0; }
.ao-service a { color: #2BBFA4; text-decoration: none; }
.ao-service a:hover { color: #229e87; }
.ao-service .sp-br { display: none; }

/* ===== HERO ===== */
.ao-service .about-hero { position: relative; background: #0d1a2e; background-image: url('../images/sf_bg.png'); background-size: cover; background-position: center right; overflow: hidden; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.ao-service .about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,20,50,0.92) 45%, rgba(5,20,50,0.45) 100%); }
.ao-service .hero-inner { position: relative; z-index: 2; max-width: 1060px; margin: 0 auto; padding: 64px 20px 60px; }
.ao-service .hero-eyebrow { font-size: 16px; font-weight: 700; letter-spacing: 0.12em; color: #2BBFA4; margin-bottom: 18px; }
.ao-service .hero-title { font-size: 34px; font-weight: 700; line-height: 1.45; color: #fff; letter-spacing: 0.01em; }

/* ===== MAIN ===== */
.ao-service .svc-main { max-width: 1060px; margin: 0 auto; padding: 44px 20px; }
.ao-service .page-title { font-size: 28px; font-weight: 700; color: #1a3a5c; padding-bottom: 12px; border-bottom: 2px solid #2BBFA4; margin-bottom: 24px; }

.ao-service .cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #2BBFA4; }
.ao-service .cat-num { width: 42px; height: 42px; border-radius: 10px; background: #2BBFA4; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ao-service .cat-num svg { width: 23px; height: 23px; }
.ao-service .cat-name { font-size: 24px; font-weight: 700; color: #1a3a5c; }

.ao-service .concept-banner { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 24px; padding: 22px; background: #f4f9fc; border-radius: 6px; border: 1px solid #d9e7f0; flex-wrap: wrap; }
.ao-service .concept-row { display: flex; align-items: center; gap: 14px; }
.ao-service .concept-chip { background: #1a3a5c; color: #fff; font-size: 15px; font-weight: 700; padding: 11px 26px; border-radius: 5px; white-space: nowrap; }
.ao-service .concept-chip.accent { background: #2BBFA4; }
.ao-service .concept-op { font-size: 22px; color: #2BBFA4; font-weight: 700; }

.ao-service .approach-section { background: #f8f9fa; border: 1px solid #e8e8e8; border-radius: 4px; padding: 20px; margin-bottom: 32px; }
.ao-service .approach-title { font-size: 17px; font-weight: 700; color: #1a3a5c; margin-bottom: 6px; }
.ao-service .approach-desc { font-size: 16px; color: #333; line-height: 1.7; }

.ao-service .services-label { font-size: 14px; font-weight: 700; color: #555; letter-spacing: 0.12em; margin-bottom: 16px; }
.ao-service .service-cards { display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
.ao-service .service-card { border: 1px solid #dde3ea; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.ao-service .service-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; gap: 12px; }
.ao-service .service-card-head.sf { background: #00A1E0; }
.ao-service .service-card-head.ms { background: #15945a; }
.ao-service .service-card-head.df { background: #142a47; }
.ao-service .service-card-head-left { display: flex; align-items: center; gap: 10px; }
.ao-service .service-card-square { width: 14px; height: 14px; background: rgba(255,255,255,0.4); border-radius: 2px; flex-shrink: 0; }
.ao-service .service-card-name { font-size: 18px; font-weight: 700; color: #fff; }
.ao-service .service-card-related { font-size: 14px; font-weight: 700; color: #1a3a5c; background: #fff; border: none; padding: 6px 14px; border-radius: 6px; white-space: nowrap; }
.ao-service .service-card-desc { padding: 16px 20px; border-bottom: 1px solid #eef1f4; font-size: 16px; color: #333; line-height: 1.7; white-space: nowrap; }
.ao-service .service-card-body { padding: 16px 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.ao-service .card-col-label { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.04em; margin-bottom: 12px; display: inline-block; padding: 4px 14px; border-radius: 3px; }
.ao-service .card-col-label.c1 { background: #2b6cb0; }
.ao-service .card-col-label.c2 { background: #cf524b; }
.ao-service .card-col-label.c3 { background: #2BBFA4; }
.ao-service .card-items { display: flex; flex-direction: column; gap: 8px; }
.ao-service .card-item { font-size: 16px; line-height: 1.65; padding: 8px 8px; border-radius: 6px; display: block; }
.ao-service .card-item.issue { background: #e8f1fa; color: #1d4e80; border: 1px solid #bcd6ef; }
.ao-service .card-item.req { background: #fbecec; color: #9a3b36; border: 1px solid #efc4c1; }
.ao-service .card-item.prop { background: #e3f5f0; color: #0a6357; border: 1px solid #a8ddd2; font-weight: 700; }
.ao-service .service-card-foot { padding: 14px 20px; background: #fafbfc; display: flex; justify-content: flex-end; border-top: 1px solid #eef1f4; }
.ao-service .service-card-link { font-size: 16px; font-weight: 700; padding: 11px 24px; border-radius: 8px; text-decoration: none; }
.ao-service .service-card-link.sf { background: #00A1E0; color: #fff; }
.ao-service .service-card-link.ms { background: #15945a; color: #fff; }
.ao-service .service-card-link.df { background: #142a47; color: #fff; }
.ao-service .service-card-link:hover { opacity: 0.88; text-decoration: none; }
.ao-service .service-card-link::after { content: ' \2192'; }

.ao-service .ses-section { margin-bottom: 40px; }
.ao-service .ses-card { border: 1px solid #dde3ea; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.ao-service .ses-card-head { background: #455565; padding: 16px 20px; display: flex; align-items: center; gap: 10px; }
.ao-service .ses-card-square { width: 14px; height: 14px; background: rgba(255,255,255,0.35); border-radius: 2px; }
.ao-service .ses-card-name { font-size: 18px; font-weight: 700; color: #fff; }
.ao-service .ses-card-body { padding: 20px; }
.ao-service .ses-card-desc { font-size: 16px; color: #333; line-height: 1.7; }
.ao-service .ses-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ao-service .ses-tag { font-size: 14px; color: #3a4a5a; background: #eef2f6; border: 1px solid #d4dde6; padding: 5px 13px; border-radius: 3px; }
.ao-service .ses-card-foot { padding: 14px 20px; background: #fafbfc; border-top: 1px solid #eef1f4; display: flex; justify-content: flex-end; }
.ao-service .ses-card-link { font-size: 16px; font-weight: 700; padding: 11px 22px; border-radius: 4px; text-decoration: none; background: #455565; color: #fff; }
.ao-service .ses-card-link:hover { opacity: 0.88; text-decoration: none; }
.ao-service .ses-card-link::after { content: ' \2192'; }

.ao-service .cta-block { background: #f0faf8; border: 1px solid #b8e8e2; border-radius: 8px; padding: 32px 24px; text-align: center; }
.ao-service .cta-block p { font-size: 17px; color: #333; margin-bottom: 20px; font-weight: 500; }
.ao-service .cta-block a { display: inline-block; background: #2BBFA4; color: #fff; font-size: 17px; font-weight: 700; padding: 15px 44px; border-radius: 4px; text-decoration: none; box-shadow: 0 6px 18px rgba(43,191,164,0.3); }
.ao-service .cta-block a:hover { background: #17a897; color: #fff; }
.ao-service .cta-block a::after { content: ' \2192'; }

/* ===== レスポンシブ ===== */
@media (max-width: 980px) {
  .ao-service .service-card-body { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ao-service .sp-br { display: inline; }
  .ao-service .svc-main { padding: 28px 16px; }
  .ao-service .page-title { font-size: 23px; }
  .ao-service .hero-inner { padding: 36px 16px; }
  .ao-service .hero-title { font-size: 24px; }
  .ao-service .about-hero { background-image: none; background: #0d1a2e; }
  .ao-service .about-hero::before { display: none; }
  .ao-service .cat-name { font-size: 20px; }
  .ao-service .concept-banner { flex-direction: column; }
  .ao-service .concept-row { justify-content: center; }
  .ao-service .concept-op.concept-eq { transform: rotate(90deg); }
  .ao-service .service-card-body { grid-template-columns: 1fr; }
  .ao-service .service-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ao-service .service-card-desc { white-space: normal; }
}