/* =========================================================
   Services Detail (子ページ専用)
   対象例: <main class="page services-detail" id="exports">…</main>
   目的  : 子ページだけで完結。トップのCSSを上書きしない。
========================================================= */

/* ----------------------------------------
   Hero（タイトル帯）
---------------------------------------- */
.services-detail .hero--sub{
  background:#f7f9fb;
  padding:48px 0 28px;
  border-bottom:1px solid #e5e7eb;
}
.services-detail .overline{
  text-align:center;
  font:700 clamp(12px,1.6vw,14px) 'Montserrat',sans-serif;
  letter-spacing:.12em;
  color:#7a8aa0;
  margin:0 0 6px;
  text-transform:uppercase;
}
.services-detail .page-title{
  text-align:center;
  font:800 clamp(26px,4.6vw,44px) 'Noto Sans JP','Montserrat',sans-serif;
  letter-spacing:.02em;
  color:#23384d;
  margin:0 0 8px;
}
.services-detail .page-lead{
  text-align:center;
  color:#4b5563;
  max-width:820px;
  margin:8px auto 0;
}

/* ----------------------------------------
   Section
---------------------------------------- */
.services-detail .section{ padding:48px 0; }
.services-detail .section-title{
  text-align:center;
  font:800 clamp(18px,2.6vw,24px) 'Noto Sans JP','Montserrat',sans-serif;
  letter-spacing:.02em;
  color:#23384d;
  margin:0 0 16px;
}
.services-detail .section-body p + p{ margin-top:10px; }

/* 事業内容の本文だけ中央揃え */
#exports     #about-exports .section-body,
#it-support  #about-it      .section-body,
#automotive #about-auto .section-body,
#general-services #about-general .section-body {
  text-align:center;
}
#exports     #about-exports .section-body p,
#it-support  #about-it      .section-body p,
#automotive #about-auto .section-body p,
#general-services #about-general .section-body p{
  margin-left:auto;
  margin-right:auto;
}

/* ----------------------------------------
   実績カード（3列）
---------------------------------------- */
.services-detail .cases-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.services-detail .case-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  display:flex;
  flex-direction:column;
}
.services-detail .case-media{
  width:100%;
  aspect-ratio:4/3; /* 画像高さを統一（不要なら削除） */
  overflow:hidden;
}
.services-detail .case-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.services-detail .case-body{ padding:14px 16px 16px; }
.services-detail .case-heading{
  font-weight:700;
  margin:0 0 8px;
}
.services-detail .case-meta{ margin:0; }
.services-detail .case-meta dt{
  font-weight:700;
  color:#374151;
  margin-top:6px;
}
.services-detail .case-meta dd{
  margin:2px 0 8px;
  color:#4b5563;
}


/* レビュー6件レイアウト（IT支援／総合サービス 兼用） */
#it-support .reviews-grid,
#general-services .reviews-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;
}
#it-support .review-card,
#general-services .review-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,.04); padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}
#it-support .review-header,
#general-services .review-header{ display:flex; align-items:center; gap:12px; }
#it-support .avatar,
#general-services .avatar{
  width:40px; height:40px; border-radius:9999px; background:#e5effa; color:#23384d;
  font-weight:800; display:flex; align-items:center; justify-content:center; user-select:none;
}
#it-support .meta .name, #general-services .meta .name{ margin:0; font-weight:700; color:#23384d; }
#it-support .meta .role, #general-services .meta .role{ margin:2px 0 0; color:#6b7280; font-size:14px; }
#it-support .review-rating, #general-services .review-rating{ color:#f59e0b; letter-spacing:2px; font-size:14px; }
#it-support .review-text,   #general-services .review-text{ margin:0; color:#374151; line-height:1.8; }

/* レスポンシブ */
@media (max-width:1024px){
  #it-support .reviews-grid, #general-services .reviews-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  #it-support .reviews-grid, #general-services .reviews-grid{
    grid-template-columns:1fr;
  }
}


/* ----------------------------------------
   CTA バナー（広告・協業パートナー募集）
---------------------------------------- */
.services-detail .cta-banner{
  background:linear-gradient(135deg,#0f172a,#1f2937);
  color:#fff;
  padding:56px 0;
  margin-top:24px;
}
.services-detail .cta-inner{ text-align:center; }
.services-detail .cta-title{
  font:800 clamp(18px,2.6vw,24px) 'Noto Sans JP','Montserrat',sans-serif;
  letter-spacing:.02em;
  color:#fff;
  margin:0 0 10px;
}
.services-detail .cta-text{ color:#e5e7eb; margin:0 0 18px; }

/* CTAボタンはバナー内だけ（他ページの.btnに干渉しない） */
.services-detail .cta-banner .btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:9999px;
  text-decoration:none;
  font-weight:700;
  line-height:1;
}
.services-detail .cta-banner .btn-primary{
  background:#38bdf8;
  color:#001018;
  border:1px solid rgba(255,255,255,.1);
}
.services-detail .cta-banner .btn-primary:hover{ opacity:.9; }

/* ----------------------------------------
   Responsive
---------------------------------------- */
@media (max-width:1024px){
  .services-detail .cases-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .services-detail .cases-grid{ grid-template-columns:1fr; }
  .services-detail .page-title{ font-size:24px; }
}